一、寫在最前
AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好並且可擴展的服務，包括數據綁定、DOM操作、MVC設計模式和模塊加載等。
現在網上JS框架茫茫多，真不知道是到底要學習什么框架，學習了這個框架，說不定還沒用在項目，又有更好的js框架出來了。前端就是不斷折騰新東西，生命在於折騰~
是的，這么多的前端框架，是不是真的都要學習？？答案當然不是，看所要完成的項目。這是帶我的前端前輩告訴我，具體使用什么框架還是不用框架，
看項目需求，一切都以按時按質完成作為選擇的標准。但是新的東西要學習，不學習就落后。
二、AngularJS的幾個重要概念有什么
客戶端模板 舉個栗子：hello.html
模型/視圖/控制器(MVC)
數據綁定
依賴注入
路由管理
指令（Angular的靈魂）
示例：購物車（源碼在最后）
三、對這些概念的理解
插個曲，Angular最適合用來做單頁web應用。在百度上查了單頁web應用的概念。如表：
| 單頁web應用（qq音樂） |
| 單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。 單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。因此，對單頁應用來說模塊化的開發和設計顯得相當重要。 |
| 優點： |
| 1).良好的交互體驗（用戶不需要重新曬新頁面，獲取數據都是通過ajax異步獲取） 2).良好的前后端分離 3).減輕服務器壓力（服務器只用出數據， 不用管展示邏輯和頁面合成，吞吐能力會提高幾倍）
4)..共用一套后端程序代碼（不用修改后端程序代碼就可以同時用於Web界面、手機、平板等多種客戶端）
|
| 缺點： |
| 1).SEO難度較高 2).前進、后退管理（ 所有的頁面切換需要自己建立堆棧管理） 3).初次加載耗時多（代碼合並、CDN） 像游戲開發，頻繁操作DOM也不適合使用Angular |
| 客戶端模板 | |
| 多頁面 | 單頁面 |
| 通過裝配和鏈接服務器上數據來創建HTML，然后將構建好的HTML頁面發送到瀏覽器。 | Angular將模板和數據推送到瀏覽器中裝配他們，然后服務器角色只是為模板提供靜態資源以及為模板提供數據 |
| 模型/視圖/控制器(MVC) | |
| M 代碼中清晰的分離數據管理 (模型 ) C 應用程序邏輯 (控制器 ) |
Angular中的
M 模型中的數據便是存儲在對象中的屬性 (屬性值 V 文檔對象模型 (DOM) C 控制器是 JavaScript類
C和V之間的紐帶就是$scope
|
| 數據綁定 | 雙向綁定 |
| ng-model | 所謂的雙向綁定，無非是從界面的操作能實時反映到數據，數據的變更能實時展現到界面。 |
| 依賴注入 | 舉個栗子 |
| 程序運行過程中，如需另一個對象協作(調用它的方法、訪問他的屬性)時，無須在代碼中創建被調用者，而是依賴於外部容器的注入 |
在HelloController控制器中，$scope對象會把數據綁定自動傳遞給我們；我們不需要通過調用任何函數來創建他。只是通過將他防止在控制器的構造器中來請求它。 |
| 數據綁定 | |
 |
該過程，沒有在輸入字段上注冊一個改變值的事件監聽器。 |
| 指令 | Angular之可以可以編寫模板如HTML一樣，是因為框架核心包含了一個強大的DOM解析引擎。 |
| 擴展指令 | 例如：ng-controller。在HTML模板看到不屬於HTML規范的新屬性，這稱為HTML擴展指令 |
| 自定義指令 | 自己定義自己需要的指令（據說指令是Angular的靈魂） |
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"> <title>購物車</title> </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> </body> <script src="../assets/js/angular-1.3.0.js"></script> <script> function CartController($scope){ // currency是過濾器，用來轉換文本 // $index參數 包含了它在ng-repeat的索引值 //splice() arrayObject.splice(index,howmany,item1,.....,itemX) // 定義一個一維數組存放對象 $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} ]; $scope.remove = function(index){ $scope.items.splice(index,1); } } </script> </html>
