ng-app指令指明瞭應用, ng-controller 指明瞭控制器。
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用於控制 AngularJS 應用。
AngularJS 表達式 與 JavaScript 表達式
類似於 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環及異常。
與 JavaScript 表達式不同，AngularJS 表達式支持過濾器
ng-app 指令
ng-app 指令定義了 AngularJS 應用程序的 根元素。
ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
稍後您將學習到 ng-app 如何通過一個值（比如 ng-app="myModule"）連接到代碼模塊。
ng-init 指令
ng-init 指令爲 AngularJS 應用程序定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
稍後您將學習更多有關控制器和模塊的知識。
ng-model 指令
ng-model 指令 綁定 HTML 元素 到應用程序數據。
ng-model 指令也可以：
- 爲應用程序數據提供類型驗證（number、email、required）。
- 爲應用程序數據提供狀態（invalid、dirty、touched、error）。
- 爲 HTML 元素提供 CSS 類。
- 綁定 HTML 元素到 HTML 表單。
ng-repeat 指令
ng-repeat 指令對於集合中（數組中）的每個項會 克隆一次 HTML 元素。
創建自定義的指令
除了 AngularJS 內置的指令外，我們還可以創建自定義指令。
你可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
你可以通過以下方式來調用指令：
- 元素名
- 屬性
- 類名
- 註釋
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
AngularJS Scope(作用域)
Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個對象，有可用的方法和屬性。
Scope 可應用在視圖和控制器上。
Scope 概述
AngularJS 應用組成如下：
- View(視圖), 即 HTML。
- Model(模型), 當前視圖中可用的數據。
- Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
根作用域
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 應用程序的數據。
AngularJS 控制器是常規的 JavaScript 對象。
AngularJS 控制器
AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
AngularJS 使用$scope 對象來調用控制器。
在 AngularJS 中， $scope 是一個應用對象(屬於應用變量和函數)。
控制器的 $scope （相當於作用域、控制範圍）用來保存AngularJS Model(模型)的對象。
AngularJS 過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
AngularJS 過濾器
AngularJS 過濾器可用於轉換數據：
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數字爲貨幣格式。 |
| filter | 從數組項中選擇一個子集。 |
| lowercase | 格式化字符串爲小寫。 |
| orderBy | 根據某個表達式排列數組。 |
| uppercase |
格式化字符串爲大寫。 |
AngularJS 服務(Service)
AngularJS 中你可以創建自己的服務，或使用內建服務。
什麼是服務？
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它可以返回當前頁面的 URL 地址。
爲什麼使用服務?
在很多服務中，比如 $location 服務，它可以使用 DOM 中存在的對象，類似 window.location 對象，但 window.location 對象在 AngularJS 應用中有一定的侷限性。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。
$location vs window.location
| window.location | $location.service | |
|---|---|---|
| 目的 | 允許對當前瀏覽器位置進行讀寫操作 | 允許對當前瀏覽器位置進行讀寫操作 |
| API | 暴露一個能被讀寫的對象 | 暴露jquery風格的讀寫器 |
| 是否在AngularJS應用生命週期中和應用整合 | 否 | 可獲取到應用生命週期內的每一個階段，並且和$watch整合 |
| 是否和HTML5 API的無縫整合 | 否 | 是（對低級瀏覽器優雅降級） |
| 和應用的上下文是否相關 | 否，window.location.path返回"/docroot/actual/path" | 是，$location.path()返回"/actual/path" |
$http 服務
$http 是 AngularJS 應用中最常用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。
創建自定義服務
你可以創建自定義服務，鏈接到你的模塊中：
創建名爲hexafy 的服務:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
要使用自定義服務，需要在定義控制器的時候獨立添加，設置依賴關係:
實例
使用自定義的的服務 hexafy 將一個數字轉換爲16進制數:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。
控制器通常屬於一個模塊。
創建模塊
你可以通過 AngularJS 的 angular.module 函數來創建模塊：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 參數對應執行應用的 HTML 元素。
現在你可以在 AngularJS 應用中添加控制器，指令，過濾器等。
添加控制器
你可以使用 ng-controller 指令來添加應用的控制器:
AngularJS 實例
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
在模塊定義中 [] 參數用於定義模塊的依賴關係。
中括號[]表示該模塊沒有依賴，如果有依賴的話會在中括號寫上依賴的模塊名字。
模塊和控制器包含在 JS 文件中
通常 AngularJS 應用程序將模塊和控制器包含在 JavaScript 文件中。
在以下實例中， "myApp.js" 包含了應用模塊的定義程序， "myCtrl.js" 文件包含了控制器：
函數會影響到全局命名空間
JavaScript 中應避免使用全局函數。因爲他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數的作用域在該模塊下，避免了該問題。
AngularJS 依賴注入
什麼是依賴注入
wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然後成爲了該客戶端狀態的一部分。
該模式分離了客戶端依賴本身行爲的創建，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式形成直接對比的是，它允許客戶端了解客戶端如何使用該系統找到依賴
一句話 --- 沒事你不要來找我，有事我會去找你。
AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作爲依賴注入：
- value
- factory
- service
- provider
- constant
AngularJS 路由
本章節我們將爲大家介紹 AngularJS 路由。
AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。
通過 AngularJS 可以實現多視圖的單頁 Web 應用（single page web application，SPA）。
通常我們的 URL 形式爲 http://runoob.com/first/page，但在單頁 Web 應用中 AngularJS 通過 #! + 標記 實現，例如：
http://runoob.com/#!/first http://runoob.com/#!/second http://runoob.com/#!/third
注意 Angular1.6 之前的版本是通過 # + 標記 實現路由。
當我們點擊以上的任意一個鏈接時，向服務端請的地址都是一樣的 (http://runoob.com/)。 因爲 #! 號之後的內容在向服務端請求時會被瀏覽器忽略掉。 所以我們就需要在客戶端實現 #! 號後面內容的功能實現。 AngularJS 路由就通過 #! + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。