首页 > 代码库 > 今天学的angularJS
今天学的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="http://www.mamicode.com/#/phones/{{phone.id}}"这个链接就是用于app的映射的
<img>
ng-src="http://www.mamicode.com/{{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})
}]);