- 導入ANGULARJS庫
<script src="lib/angular/angular.js"></script>
- 通知ANGULARJS引擎開始工作,并設置作用域
<html ng-app>
- 運行一個CONTROLLER,如果里面有設置模型的數據的,就將模型保存下來,此CONTROLLER僅僅可以存取BODY內的所有數據
<body ng-controller="PhoneListCtrl">
- CONTROLLER代碼,其中$scope是ANGULARJS管理的對象,這時就注入到此方法中
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}
- 如遇到雙大括號的標簽,則運行里面的表達式,并將結果更新至DOM顯示
{{phone.name}}
- 根據數組中ITEM的多少,產生相對應的LI標簽
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
- 此標簽(指令)會將INPUT的VALUE值與一個叫QUERY的對象進行雙向綁定,任何一方的改變都會同步至對方
<input ng-model="query">
- 使用外部數據,$http是ANGULARJS管理的提供HTTP訪問服務的對象,$scope.phones是往$scope里面新增一個phones,并賦值
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}