1. 安裝AngularJS
1.1 AngularJS官網
Github源碼：https://github.com/angular/angular.js
1.2 npm安裝AngularJS
npm install angular
2. AngularJS應用的構成元素
◊ 模型（Model）：AngularJS應用中用於展示到頁面的數據，本質是一個JavaScript對象。
◊ 視圖（View）：View是用戶所看到的網頁內容，View是AngularJS指令與表達式經過解析后的DOM元素。
◊ 控制器（Controller）：AngularJS中用於處理業務邏輯的JavaScript方法。
◊ 作用域（Scope）：作用域可以理解為一個容器，在控制器（Controller）中可以訪問這個容器（Scope），往容器中放入數據模型，在視圖（View）中可以通過表達式將數據展現給用戶。
◊ 指令（Directives）：擴展的HTML屬性或標簽，能夠被AngularJS框架識別，根據不同的指令執行相應的動作。
◊ 表達式（Expressions）：用於向頁面輸出信息。
◊ 模板（Template）：AngularJS以HTML作為模板語言，AngularJS模板時間是HTML片段。
3. AngularJS第一個應用
示例：
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> </head> <body> {{"Hello AngularJS!"}} </body> </html>
說明：<html>標簽中ng-app是AngularJS的一個內置指令，可以出現在任意位置。
ng-app兩個作用：
(1). 啟動AngularJS框架；
(2). AngularJS框架管理ng-app指令所在標簽的開始標簽到結束標簽之間的所有DOM元素。
{{}}：是AngularJS的表達式形式，由兩個嵌套的大括號構成，大括號中間為表達式內容。AngularJS會對表達式內容進行解析，將表達式內容輸出到瀏覽器。
4. AngularJS表達式
AngularJS使用表達式把數據綁定到HTML。
4.1 表達式定義方式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
4.2 表達式中的四則運算
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> </head> <body> 四則運算：5 + 5 = {{ 5 + 5 }} </body> </html>
4.3 表達式中的邏輯運算
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> </head> <body> 邏輯運算：true && false = {{ true && false }} </body> </html>
4.4 表達式與作用域
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> </head> <body> <div ng-init="points=[1,15,19,2,40]"> <p>第三個值為 {{ points[2] }}</p> </div> </body> </html>
ng-init指令：用於初始化作用域。
5. AngularJS數據綁定
數據綁定是AngularJS框架在視圖（View）與作用域（Scope）之間建立的數據同步機制。
5.1 雙向綁定ng-model
AngularJS雙向綁定：View的操作能實時同步到Scope中，Scope中的數據修改能夠實時回顯到View中。
ng-model 指令：用於綁定應用程序數據到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以將輸入域的值與 AngularJS 創建的變量綁定。
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", function($scope) { $scope.text = "Hello AngularJS!"; }); </script> </head> <body> <div ng-controller="HelloCtrl"> <input type="text" ng-model="text" /></div> </body> </html>
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" /> {{ name }} </body> </html>
注：上例中ng-app指令用於啟動AngularJS應用。當AngularJS遇到ng-app指令時，會創建$rootScope作用域，為AngularJS的根作用域。
把ng-model制定作為屬性添加到input標簽中，AngularJS會在$rootScope作用域中添加屬性。
當input表單中輸入內容發生變化時，AngularJS會自動把輸入的內容同步到作用域的屬性中。
{{ name }}為AngularJS表達式形式，可以訪問AngularJS作用域中的屬性。AngularJS能夠監控作用域中數據的變化，當數據發生變化時，頁面實時更新顯示內容。
5.2 單向綁定ng-bind
ng-bind指令：實現作用域（Scope）到視圖（View）的單向數據綁定，和表達式功能類似。
<div>{{ text }}</div>
<div ng-bind="text"></div>
ng-bind與{{ expression }}區別：
在使用AngularJS表達式{{ expression }}時，如果遇到網絡問題，會導致AngularJS加載緩慢，瀏覽器會直接把AngularJS表達式當作字符串渲染到頁面中。
ng-bind指令在AngularJS沒有加載完畢時不會解析執行，只有AngularJS加載完畢才會解析顯示。
推薦使用ng-bind指令。