今天學的angularJS

標籤：http   檔案   io   art   re   c   

首先引入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})
}]);