->Tutorial：https://docs.angularjs.org/tutorial
->Specification：http://www.runoob.com/angularjs/angularjs-tutorial.html
->Source code：
AngularJS 通過新的屬性和表達式擴展了 HTML。
AngularJS 可以構建一個單一頁面應用程序（SPAs：Single Page Applications）。
AngularJS 是一個
JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁面。
The project is preconfigured with a number of npm helper scripts to make it easy to run the common tasks that you will need while developing:
- npm start: Start a local development web server.
- npm test: Start the Karma unit test runner.
- npm run protractor: Run the Protractor end-to-end (E2E) tests.
- npm run update-webdriver: Install the drivers needed by Protractor.
AngularJS 通過
ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
AngularJS
模塊（Module） 定義了 AngularJS 應用。
AngularJS
控制器（Controller） 用於控制 AngularJS 應用。
ng-app指令定義了應用,ng-controller 定義了控制器。
AngularJS 指令是擴展的 HTML 屬性，帶有前綴ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
AngularJS 完美支持數據庫的 CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程序。
把實例中的對象想象成數據庫中的記錄。
ng-app 指令定義了 AngularJS 應用程序的根元素。
ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
ng-init 指令爲 AngularJS 應用程序定義了初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
ng-model 指令綁定 HTML 元素 到應用程序數據。
ng-model 指令也可以：
- 爲應用程序數據提供類型驗證（number、email、required）。
- 爲應用程序數據提供狀態（invalid、dirty、touched、error）。
- 爲 HTML 元素提供 CSS 類。
- 綁定 HTML 元素到 HTML 表單。
ng-repeat 指令對於集合中（數組中）的每個項會克隆一次 HTML 元素。
除了 AngularJS 內置的指令外，我們還可以創建自定義指令。
你可以使用
.directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令，
runoobDirective, 但在使用它時需要以 - 分割,
runoob-directive
你可以通過以下方式來調用指令：
- 元素名
- 屬性
- 類名
- 註釋
你可以限制你的指令只能通過特定的方式來調用。
restrict 值可以是以下幾種:
- E 作爲元素名使用
- A 作爲屬性使用
- C 作爲類名使用
- M 作爲註釋使用
restrict 默認值爲EA, 即可以通過元素名和屬性名來調用指令。
ng-model 指令根據表單域的狀態添加/移除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個對象，有可用的方法和屬性。
Scope 可應用在視圖和控制器上。
AngularJS 應用組成如下：
- View(視圖), 即 HTML。
- Model(模型), 當前視圖中可用的數據。
- Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
所有的應用都有一個
$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。
AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是
JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
控制器也可以有方法（變量和函數）
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
| 過濾器 | 描述 |
| currency | 格式化數字爲貨幣格式。 |
| filter | 從數組項中選擇一個子集。 |
| lowercase | 格式化字符串爲小寫。 |
| orderBy | 根據某個表達式排列數組。 |
| uppercase | 格式化字符串爲大寫。 |
<li ng-repeat="x in names | filter:test | orderBy:'country'">
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個
$location 服務，它可以返回當前頁面的 URL 地址。
AngularJS 使用
$location 服務比使用 window.location 對象更好。
$http 是 AngularJS 應用中最常用的服務。
你可以創建訪問自定義服務，鏈接到你的模塊中：
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
以下是存儲在web服務器上的 JSON 文件：
get 請求是本站的服務器，你不能直接拷貝到你本地運行，會存在跨域問題，解決辦法就是將 Customers_JSON.php 的數據拷貝到你自己的服務器上
在 AngularJS 中我們可以使用 ng-option 指令來創建一個下拉列表，列表項通過對象和數組循環輸出
ng-repeat 指令是通過數組來循環 HTML 代碼來創建下拉列表，但
ng-options 指令更適合創建下拉列表，它有以下優勢：
使用
ng-options 的選項的一個對象， ng-repeat 是一個字符串。ng-repeat 有侷限性，選擇的值是一個字符串:
ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬於一個模塊。
JavaScript 中應避免使用全局函數。因爲他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數的作用域在該模塊下，避免了該問題。
對於 HTML 應用程序，通常建議把所有的腳本都放置在 <body> 元素的最底部。
這會提高網頁加載速度，因爲 HTML 加載不受制於腳本加載。
在我們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。
在我們的實例中，AngularJS 在 <head> 元素中被加載，因爲對 angular.module 的調用只能在庫加載完成後才能進行。
另一個解決方案是在 <body> 元素中加載 AngularJS 庫，但是必須放置在您的 AngularJS 腳本前面：
novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證。
novalidate 屬性在應用中不是必須的，但是你需要在 AngularJS 表單中使用，用於重寫標準的 HTML5 驗證。
我們使用了
ng-show指令， color:red 在郵件是 $dirty 或
$invalid 才顯示。
| 屬性 | 描述 |
| $dirty | 表單有填寫記錄 |
| $valid | 字段內容合法的 |
| $invalid | 字段內容是非法的 |
| $pristine | 表單沒有填寫記錄 |
API 意爲
Application Programming
Interface（應用程序編程接口）。
AngularJS 全局 API 用於執行常見任務的 JavaScript 函數集合，如：
- 比較對象
- 迭代對象
- 轉換對象
全局 API 函數使用 angular 對象進行訪問。
以下列出了一些通用的 API 函數：
| API | 描述 |
| angular.lowercase() | 轉換字符串爲小寫 |
| angular.uppercase() | 轉換字符串爲大寫 |
| angular.isString() | 判斷給定的對象是否爲字符串，如果是返回 true。 |
| angular.isNumber() | 判斷給定的對象是否爲數字，如果是返回 true。 |
使用 AngularJS, 你可以使用ng-include 指令來包含 HTML 內容:
ngAnimate 模型並不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素 ，如果事件發生 ngAnimate 就會使用預定義的 class 來設置 HTML 元素的動畫
AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作爲依賴注入：
- value
- factory
- service
- provider
- constant
使用 ngView 指令，該 div 內的 HTML 內容會根據路由的變化而變化。
$routeProvider 爲我們提供了 when(path,object) & otherwise(object) 函數按順序定義所有路由，函數包含兩個參數:
- 第一個參數是 URL 或者 URL 正則規則。
- 第二個參數是路由配置對象。
AngularJS 路由也可以通過不同的模板來實現。
$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。
路由配置對象語法規則如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
