1. AngularJS是什麼？
它是Google開發的一款具有MVC結構的前端框架。在Angular 應用中，視圖層就是DOM，控制器就JavaScript 類，模型數據存儲在對象屬性中。
2. 數據綁定
通過聲明界面的某一部分映射到 JavaScript 的屬性，讓他們自動的同步，這種編程方式就是數據綁定。不需要對字段註冊監聽器，就可以做到對象屬性與界面顯示同步變化。
3. 依賴注入
不需要重新創建對象，將需要使用的對象$scope或$loaction按照以下方式注入到構造函數中。這就是依賴注入。
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}
4. 指令
框架的核心層有一個強大的 DOM 轉換引擎，可以讓你 擴展 HTML 語法。HTML中的ng-controller是用來指定哪個控制器來服務哪個視圖，ng-model將一個輸入框綁定到模型部分。 我們稱這些叫 HTML 擴展指令。
5. 依據示例解釋各個標籤
<!DOCTYPE html>
<html ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'/>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)"> Remove </button>
</div>
<script>
function CartController($scope) {
////@formatter:off
$scope.items = [{
title : 'Paint pots',
quantity : 8,
price : 3.95
}, {
title : 'Polka dots',
quantity : 17,
price : 12.95
}, {
Title : 'Pebbles',
quantity : 5,
price : 6.95
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>
依照上面的代碼，對關鍵內容做個解釋：
1）<html ng-app>
ng-app 屬性告訴 Angular它應該管理頁面的哪一部分。由於我們把它放在 html元素上，告知 Angular管理整個頁面。如果你正在集成 Angular和一個已存在的使用其他方式管理頁面的應用，那麼你可能需要放在應用的 div上。
2） <body ng-controller='CartController'>
在 Angular 中，用JavaScript 類管理的頁面區域叫做控制器。通過在body 標籤中包含一個控制器，聲明的CartController 將管理body 標籤之間的任何東西。
3） <div ng-repeat='item in items'>
ng-repeat 代表爲 items數組中每個元素拷貝一次這 div中的 DOM。在div 每次拷貝中，同時設置了一個叫item 的屬性代表當前的元素，所以我們能夠在模板中使用。正如你看到的，每個div 中都包含了產品名稱，數量，單價，總價和一個移除按鈕。
4） <span>{{item.title}}</span>
正如演示的‘Hello World’示例，數據綁定是通過{{ }}把變量的值插入到頁面某部分和保持同步。完整的表達式{{item.title}}檢索迭代中的當前項，然後將當前項的titile 屬性值插入到DOM 中。
5） <input ng-model='item.quantity'>
ng-model 定義創建了輸入字段和 item.quantity之間的數據綁定。span標籤中的{{ }}建立了一個單向聯繫，在這裏插入值。但是應用程序需要知道當用戶改變數量時，能夠改變總價，這是我們想要的效果。通過使用ng-model 我們將與我們的模型保持同步更改。ng-model申明將 item.quantity的值插入到輸入框中，無論何時用戶輸入一個新值將自動更新item.quantity。
6） <span>{{item.price | currency}}</span>
我們希望單價格式化成美元形式。Angular 帶有一個叫過濾器的特性，能夠讓我們轉換文本，有一個叫 currency 的過濾器將爲我們做這個美元形式格式化。
7）<button ng-click="remove($index)"> Remove </button>
點擊這個按鈕就可以調用 remove()函數。同時傳遞了$index，這個包含了ng-repeat 的迭代順序，以便知道要移除哪一項。
8）function CartController($scope) {
CartController 管理這購物車的邏輯。通過這個我們告知 Angular控制器
需要一個叫$scope 的對象。$scope就是用來把數據綁定到界面上的元素的。
9）$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
我們希望 remove()函數能夠綁定到界面上，因此我們也把它增加到$scope中。對於這
個內存中的購物車版本，remove()函數只是從數組中刪除了它們。因爲通過ng-repeat 創建
的這些<div>是數據捆綁的，當某項消失時，列表自動收縮。記住，無論何時用戶點擊移除
按鈕中的一個，都將從界面上調用 remove()函數。
6. 調用 Angular
任何應用使用 Angular 必須做兩件事：
1）加載 angular.js
2）使用 ng-app告知 Angular管理哪一部分的 DOM
7. 加載腳本
很簡單：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
推薦使用 Google 的CDN。Google的服務器是非常快的，腳本是跨應用緩存的。那就是說，如果你的用戶有多個使用 Angular的應用，它只下載一次。同樣，如果用戶訪問過使用Google Angular的 CDN鏈接，那麼當他訪問你的站點時沒有必要再次下載。
8. 模塊
<html ng-app='myApp'>
<body ng-controller='TextController'>
<p>{{someText.message}}</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
</body>
</html>
在這個模板中，我們告知 ng-app 元素我們的模塊名，myApp。然後我們調用了Angular對象創建一個名爲myApp 的模塊，傳遞了控制器函數給模塊的控制器函數。
只要記住，遠離全局命名空間是一件好事。模塊化這是我們通用的機制。
9. 模板和數據綁定
Angular 應用中的模板只是那些我們從服務器加載的 HTML文檔或者是定義在<script>標籤中的一些靜態資源。你在模板中定義界面，在界面組件中使用標準的HTML 加上Angular標識符。
基本的啓動流程就像這樣：
1）用戶請求應用的第一頁面。
2）用戶的瀏覽器發出一個 HTTP鏈接到你服務器，加載包含模板的 index.html頁面。
3）Angular加載到頁面，等待頁面完全加載完成，然後尋找 ng-app定義模板的邊界。
4）Angular經過模板尋找標識符和捆綁。這樣的結果是監聽器和 DOM操作完成了註冊，同時從服務器查詢初始化數據。這塊工作的最終結果是應用完成了自舉（啓動完成，計算機專業用語），就像DOM 一樣將模板轉換成是視圖。
5）你連接到服務器按需加載你額外需要展示給用戶的數據。
通過使用 Angular 結構化你的應用，應用程序的模板和填充它們的數據是分離開的。這樣的好處就是這些模板現在可緩存了。在第一次加載後，只有新數據加載到瀏覽器。只有JavaScript，圖片，CSS和其他資源，緩存這些模板可以給應用更好的性能。
10. ng-bind 標識符顯示和更新文本
ng-bind與{{}}等兩種方式在顯示文本上是等價。不同的是ng-bind方式是直到數據加載，用戶才能看到內容。
11. src 和 和 href屬性的建議
當數據綁定到一個<img>或<a>標籤時，在src或者href中使用{{}}的路徑不能夠正常運行。
然而，你應該用 ng-src 屬性，與之類似，<a>標籤，你應該使用ng-href
12. $route服務
Route 可以爲一個給定的瀏覽指向URL詳細指定 Angular能夠加載和顯示一個模板，實例化一個控制器爲模板提供上下文。
當URL是/Find/activityDetail時，Angular將加載模板地址爲：Find/views/activityDetail.html。otherwise()告訴路由如果沒有匹配到就走這一段。
13. 用指令修改DOM
var appModule = angular . module ( 'app' , []);
appModule . directive ( 'ngbkFocus' , function () {
return {
link : function ( scope , element , attrs , controller) {
element [ 0 ]. focus ();
}
};
});
14. 校驗用戶輸入
模板代碼：
<h1> Sign Up </h1>
<form name='addUserForm' ng-controller= "AddUserController" >
<div ng-show='message'>{{message}}</div>
<div> First name: <input name= 'firstName' ng-model= 'user.first' required ></div>
<div>Last name: <input ng-model='user.last' required ></div>
<div>Email: <input type='email' ng-model='user.email' required ></div>
<div>Age: <input type= 'number'
ng-model= 'user.age' ng-maxlength= '3'
ng-min= '1' ></div>
<div><button ng-click='addUser()'
ng-disabled= '!addUserForm.$valid' > Submit </button>
< /ng-form>
控制器：
function AddUserController ( $scope ) {
$scope . message = '' ;
$scope . addUser = function () {
// TODO for the reader: actually save user to database...
$scope . message = 'Thanks, ' + $scope . user . first + ', we added you!' ;
};
}
說明：
使用了來自 HTML5 的required 屬性，email類型、number類型的輸入
框，在一些字段上做我們的校驗。
在控制器內部，可以通過$valid 屬性來訪問表單的校驗狀態。當表單中所有的請求都是合法時，Angular 會把它設置成 true。我們可以使用$valid屬性來做額外的事，比如當表單還未完成時禁用提交按鈕。
通過個體提交按鈕添加 ng-disbaled，能夠阻止非法狀態的提交。
15. ‘use strict’是什麼意思
“use strict”是一個指令，指示解釋器用更嚴格的方式檢查代碼。"use strict"開啓嚴格模式以後，一些js糟糕的特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值。嚴格模式下的eval函數的行爲和非嚴格模式的也不相同。
16. factory,service,provider自定義服務，services.js
1) 用 Factory 就是創建一個對象，爲它添加屬性，然後把這個對象返回出來。你把 service傳進 controller之後，在 controller裏這個對象裏的屬性就可以通過 factory使用了。
2) Service 是用"new"關鍵字實例化的。因此，你應該給"this"添加屬性，然後service 返回"this"。你把service 傳進controller 之後，在controller裏"this" 上的屬性就可以通過service 來使用了。
3) Providers 是唯一一種你可以傳進 .config() 函數的service。當你想要在service 對象啓用之前，先進行模塊範圍的配置，那就應該用provider。