zoukankan      html  css  js  c++  java
  • 今天学的angularJS

    首先引入js文件angular.min.js,
    引入控制器:controllers。js
    其中可以定义多个控制器:比如
    var PhoneListCtrl = ['变量','变量',function(变量,变量){
    //为布局中的变量赋值,比如
    $http.get(XXX).success(function(data){
    $scope.phones = data;
    });
    }];
    var PhoneDetailCtrl = ['$scope','$routeParams',function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
    }];
    $scope:布局文件中的变量对象
    $http:用于获取文件的对象
    $routeParams:用于从路径中获取变量的对象。


    布局中:
    ng-app="phonecat"
    导入一个名为phonecat的映射
    <div ng-view></div>
    导入 ng的视图
    <select ng-model="orderProp">
    用于搜索的select,匹配器为orderProp
    <input ng-model="query">
    用于搜索的input,匹配器为query

    <li>
    ng-repeat="phone in phones" 对phones变量进行遍历,存放在phone单元中
    filter:query 匹配input查找
    orderBy:orderProp 匹配 select 排序
    <a>
    href="#/phones/{{phone.id}}"这个链接就是用于app的映射的
    <img>
    ng-src="{{phone.imageUrl}}"不能用src,是在页面载入以后加载图片的

    app.js中://定义名为phonecat的映射.config:设置
    angular.module('phonecat',[]).
    config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/phones',{templateUrl:'XXX',controller: PhoneListCtrl}).
    when('/phones/:phoneId',{templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl})
    }]);

  • 相关阅读:
    Nginx常用日志分割方法
    nginx的 CPU参数worker_processes和worker_cpu_affinity使用说明
    js中的“==”和“===”的区别
    学习JS
    svg
    用户界面设计
    bootstrap和easyui
    axure—日期函数
    axure--轮播图
    字符串属性和函数的使用
  • 原文地址:https://www.cnblogs.com/youngercode/p/3864225.html
Copyright © 2011-2022 走看看