AngularJS 透過新的屬性和表達式擴展了 HTML。 Angularjs學習起來也非常的簡單。
1.AngularJS是何方神聖
Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及資料綁定和豐富UI元件。它支援整個開發進程，提供web應用的架構，無需進行手動DOM操作。
AngularJS是為了克服HTML在建造應用上的不足而設計的。 HTML是一門很好的為靜態文字展示設計的聲明式語言，但要建立WEB應用的話它就顯得乏力了。這裡AngularJS就應運而生，彌補了HTML的天然缺陷，用於構件Web應用等。
2.如何了解AngularJS
AngularJS誕生於2009年,由Misko Hevery 等人創建,後為Google所收購。
AngularJS 官網 ：http://www.angularjs.org （一般來說會被牆掉，所以可以到下面的網站）
AngularJS中文網址 ： http://www.ngnice.com
書籍 ：《AngularJS 權威教學》《用AngularJS開發下一代Web應用》等。個人意見，For your information
備註 ：影片教程，最近有看過大漠老師的AngularJS教程，覺得還不錯，但是感覺沒有一點基礎還是聽不懂的，或者要看好幾遍（不是做廣告）
3.為什麼要了解AngularJS
一項新技術能夠面世，為眾人所知，從而脫引而出，定然不是空穴來風，肯定有其標新立異的過人之處，主要有以下幾點：
（1）MVC的思想（或是MVVM）
（2）模組化與依賴注入
（3）雙向資料綁定
（4）指令
每個特性都可以大篇幅的展開，顯然，目前能力不夠，沒法展開，有興趣可以網上搜下，大體了解。
今天主要來說說AngularJS的三個指令“ @ ”，“ = ”，“ & ”的用法和區別（這個問題困擾了我大半天，和Frank交流多次，我才明白）
1.指令作用域中的@
作用是把目前屬性當作字串傳遞。
先上程式碼，前台介面：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink water="{{pureWater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="ScopeAt.js"></script>
</html>JS代碼：
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'@'
},
template:"<div>{{water}}</div>"
}
});執行的結果平淡無奇，卻暗藏玄機：
（1） HTML頁面中，宣告一個標籤
（2） JS檔案中，先從模組開始，然後建立一個控制器行2~行4，再定義一個指令，主要實現的是將"
（3） 重點介紹這裡的
scope:{
water:'@'
}此表達式等價於：
link:function(scope,element,attrs){
scope.water=attrs.water;
}具體意義就是在指令的scope上定義一個屬性名稱：water，它的值就是前台介面中water屬性的值，也就是"{{pureWater}}";
同時{{pureWater}}的值我們從聲明的控制器可以看出：
$scope.pureWater="純水";
所以最終頁面顯示的是“純淨水”，主要的流程是：
a.在指令中，透過@實作指令與HTML頁面元素關聯;
b.在控制器中又實現了與頁面的聯繫;
c.因此藉助HTML頁面建立起控制器與指令的聯繫，也是一種通訊方式。
具體見下圖：
2.指令作用域中的=
作用是與父scope中的屬性進行雙向綁定。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="pureWater">
<br>
Directive:
<br>
<drink water="pureWater"></drink>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'='
},
template:'<input type="text" ng-model="water"/>'
}
});這裡=的手段類似，透過頁面設定兩個輸入框，分別代表指令和控制器的作用域，在JS程式碼實現了雙向綁定，做到了控制器與指令在各自作用域內能夠影響對方，也就是雙向通信，具體思路與@類似，不贅述，上圖：
3.指令作用域中的&
主要作用是傳遞一個來自父scope的函數，稍後再呼叫。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});As can be seen from the page, a tag
(1)Initial interface
(2) Fill in the value in the first text box
(2) Fill in the value in the second text box
(3) Fill in the third text box
