- 導(dǎo)入ANGULARJS庫(kù)
<script src="lib/angular/angular.js"></script>
- 通知ANGULARJS引擎開(kāi)始工作，并設(shè)置作用域
<html ng-app>
- 運(yùn)行一個(gè)CONTROLLER，如果里面有設(shè)置模型的數(shù)據(jù)的，就將模型保存下來(lái)，此CONTROLLER僅僅可以存取BODY內(nèi)的所有數(shù)據(jù)
<body ng-controller="PhoneListCtrl">
- CONTROLLER代碼，其中$scope是ANGULARJS管理的對(duì)象，這時(shí)就注入到此方法中
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."}
];
}
- 如遇到雙大括號(hào)的標(biāo)簽，則運(yùn)行里面的表達(dá)式，并將結(jié)果更新至DOM顯示
{{phone.name}}
- 根據(jù)數(shù)組中ITEM的多少，產(chǎn)生相對(duì)應(yīng)的LI標(biāo)簽
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
- 此標(biāo)簽(指令)會(huì)將INPUT的VALUE值與一個(gè)叫QUERY的對(duì)象進(jìn)行雙向綁定，任何一方的改變都會(huì)同步至對(duì)方
<input ng-model="query">
- 使用外部數(shù)據(jù)，$http是ANGULARJS管理的提供HTTP訪問(wèn)服務(wù)的對(duì)象，$scope.phones是往$scope里面新增一個(gè)phones，并賦值
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}