剛開始接觸時總是去wiki或各種百科以了解一番。
它們會告訴我一些MVVM、雙向數據綁定、依賴注入等等名詞，覺得這些名詞好上檔次，然後我很可能就不打算用這個東西了。
AngularJS是什麼?
完全使用 JavaScript編寫的客戶端技術。同其他歷史悠久的 Web技術（ HTML、 CSS 和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。
不考慮那些名詞，本篇幫助你快速了解AngularJS的基本用法。
文用的AngularJS版本為1.2.x，1.3.x中不再用本文中提到的方式聲明controller。
先從這段開始：
<div ng-app="" data-ng-init="name='Kavlez'">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
{{name}}
{{6+8}}
</div>
AngularJS的指令都是以ng開頭，或者也可以使用data-ng開頭。 AngularJS的表達式用兩個大括號表示:{{expression}}
這便是AngularJS最基本的功能：數據綁定。
我們可以對各種類型進行綁定並顯示：
Number
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total : ￥{{ quantity * cost }}</p>
</div>
String
<div ng-app="" ng-init="firstName='Kavlez';lastName='Jin'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Object
<div ng-app="" ng-init="person={firstName:'Kavlez',lastName:'Jin'}">
<p>The name is {{ person.lastName }}</p>
</div>
Array
PS: 可以使用ng-repeat進行迭代
<div ng-app="" ng-init="myArr=[0,2,4,6,8]">
<p ng-repeat="element in myArr">
{{ element }}
</p>
</div>
我們用controller對一個AngularJS應用進行控制。
用ng-controller定義一個controller，聲明所有被它包含的元素都屬於這個控制器。
例如：
<div ng-app="" ng-controller="personController">
<h1>{{ person.name +' is a(an) '+person.job }}</h1>
<h1>{{ person.sayHi() }}</h1>
</div>
<script>
function personController($scope) {
$scope.person = [];
$scope.person.name='Kavlez'
$scope.person.job='brogrammer'
$scope.person.sayHi = function(){
return "Hi! I'm "+ $scope.person.name + ", I'm a(an) " + $scope.person.job;
}
}
</script>
當然，我們應該使用更高效的組織方式。
AngularJS支持將Controller定義在其他js文件中，比如上面的例子可以改為：
<div ng-app="" ng-controller="personController">
<h1>{{ person.name +' is a(an) '+person.job }}</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
到目前為止，定義一個Angular app都用ng-app=""的方式。
可行，但是這個app下的變量和函數都是global的，而且會造成controller污染(pollute)。
而通常，我們用module把app組織起來。 我們可以通過ng-app="名稱"或angular.modele()來聲明一個module。
該方法有兩個參數：
比如，之前的例子可以改為：
<div ng-app="myApp" ng-controller="fighterController">
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("fighterController", function($scope) {
//..
}
</script>
</div>
如果將app和controller放到兩個文件分別定義，則：
<div ng-app="myApp" ng-controller="fighterController">
<script src="myApp.js"></script>
<script src="myAppControllers.js"></script>
</div>
myApp.js：
var myApp = angular.module("myApp",[]);
myAppControllers.js:
myApp.controller("fighterController", function($scope) {
//..
}
這個東西可以加在表達式裡面，改變表達式的輸出格式。
我們可以用以下Filters：
前3種可以直接用在表達式中，比如：
{{name | uppercase}}
{{name | lowercase}}
{{total | currency}}
filter和orderBy通常用於數組：
<div ng-app="" ng-controller="fighterController">
<input ng-model="search"/>
<ul>
<li ng-repeat="f in fighters|filter:search">
{{ f }}
</li>
</ul>
<script>
function fighterController($scope) {
$scope.fighters = [
{name:'Ryu',country:'Japan'},
{name:'Ken',country:'USA'},
{name:'Chun Li',country:'China'},
{name:'GuiLe',country:'USA'},
{name:'Zangief',country:'Russia'}
];
}
</script>
</div>
當然，數據不會這樣放在一個controller裡。
我們可以通過$http來請求數據並進行綁定。
上面的例子可以改為：
function fighterController($scope,$http) {
var url = '請求地址';
$http.get(url).success(function(response) {
$scope.fighters = response;
})
}
AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜歡，並分享我的工作~帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡
