1 前言javascript
前端技術的發展是如此之快，各類優秀技術、優秀框架的出現簡直讓人應接不暇，緊跟時代潮流，學習掌握新知識天然是不敢怠慢。html
AngularJS是google在維護，其在國外已經十分火熱，但是國內的使用狀況卻有不小的差距，參考文獻/網絡文章也很匱乏。這裏便將我學習AngularJS寫成文檔，一方面做爲本身學習路程上的記錄，另外一方面也給有興趣的同窗一些參考。前端
首先我本身也是一名學習者，會以學習者的角度來整理個人行文思路，這裏可能只是些探索，有理解或是技術上的錯誤還請你們指出；其次我特別喜歡編寫小例子來把一件事情說明白，故在文中會盡量多的用示例加代碼講解，我相信這會是一種比較好的方式；最後，我深知AngularJS的使用方式跟jquery的使用方式有很大不一樣，在你們都有jquery、ext經驗的條件下對於angular的學習會困難重重，不過我更相信在你們的堅持下，可以快速的學好AngularJS，至少咱也能深刻了解到AngularJS的基本思想，對我們之後本身的插件開發、項目開發都會有很大的啓示。java
2 AngularJS概述jquery
2.1 AngularJS是什麼？git
AngularJs（後面就簡稱ng了）是一個用於設計動態web應用的結構框架。首先，它是一個框架，不是類庫，是像EXT同樣提供一整套方案用於設計web應用。它不只僅是一個javascript框架，由於它的核心實際上是對HTML標籤的加強。angularjs
何爲HTML標籤加強？其實就是使你可以用標籤完成一部分頁面邏輯，具體方式就是經過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。後面會詳細介紹。那麼，什麼又是動態web應用呢？與傳統web系統相區別，web應用能爲用戶提供豐富的操做，可以隨用戶操做不斷更新視圖而不進行url跳轉。ng官方也聲明它更適用於開發CRUD應用，即數據操做比較多的應用，而非是遊戲或圖像處理類應用。github
爲了實現這些，ng引入了一些很是棒的特性，包括模板機制、數據綁定、模塊、指令、依賴注入、路由。經過數據與模板的綁定，可以讓咱們擺脫繁瑣的DOM操做，而將注意力集中在業務邏輯上。web
另一個疑問，ng是MVC框架嗎？仍是MVVM框架？官網有提到ng的設計採用了MVC的基本思想，而又不徹底是MVC，由於在書寫代碼時咱們確實是在用ng-controller這個指令(起碼從名字上看，是MVC吧)，但這個controller處理的業務基本上都是與view進行交互，這麼看來又很接近MVVM。讓咱們把目光移到官網那個非醒目的title上：「AngularJS — Superheroic JavaScript MVW Framework」。設計模式
2.2 AngularJS簡單介紹
AngularJS 從新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它
非但不畏縮不前，反而正面出擊，提出了有效的解決方案。
不少前端應用的開發框架，好比Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript對象。這種方式有其長處，但它沒必要要地污染了開發者本身代碼的對象空間，還要求開發者去了解內存裏那些抽象對象。儘管如此咱們仍是接受了這種方式，由於網絡最初的設計沒法提供 咱們今天所需的交互性，因而咱們須要框架，來幫咱們填補JavaScript和HTML之間的鴻溝。並且有了它，你不用再「直接」操控DOM，只要給你的DOM註上metadata（即AngularJS裏的directive們），而後讓AngularJS來幫你操縱DOM。同時，AngularJS不依賴（也不妨礙）任何其餘的框架。你甚至能夠基於其它的框架來開發AngularJS應用。
API地址：http://docs.angularjs.org/api/；
AngularJS在github上的中文粗譯版地址：https://github.com/basestyle/angularjs-cn。
2.3 何時該用AngularJS
AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專一於擴展HTML的功能，提供動態數據綁定（data binding），並且它能跟其它框架（如jQuery）合做融洽。
若是你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。可是像遊戲開發之類對DOM進行大量操縱、又或者單純須要 極高運行速度的應用，就不是AngularJS的用武之地了。
3 AugularJS特性
AngularJS是一個新出現的強大客戶端技術，提供給你們的一種開發強大應用的方式。這種方式利用而且擴展HTML，CSS和javascript，而且彌補了它們的一些很是明顯的不足。本應該使用HTML來實現而如今由它開發的動態一些內容。
AngularJS有五個最重要的功能和特性：
3.1 特性一：雙向的數據綁定
數據綁定多是AngularJS最酷最實用的特性。它可以幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定是的代碼更少，你能夠專一於你的應用。
咱們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。數據綁定指令提供了你的Model投射到view的方法。這些投射能夠無縫的，絕不影響的應用到web應用中。
傳統來講，當model變化了。 開發人員須要手動處理DOM元素而且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另外一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加複雜，由於開發人員須要處理和解析
這些互動，而後融合到一個model中，而且更新View。這是一個手動的複雜過程，當一個應用很是龐大的時候，將會是一件很是費勁的事情。
這裏確定有更好的解決方案！那就是AngularJS的雙向數據綁定，可以同步DOM和Model等等。
這裏有一個很是簡單的例子，用來演示一個input輸入框和<h1>元素的雙向綁定(例01)：
說明：實際效果請你們看AngularJS/demo/index.html
3.2 特性二：模板
在AngularJS中，一個模板就是一個HTML文件。可是HTML的內容擴展了，包含了不少幫助你映射model到view的內容。
HTML模板將會被瀏覽器解析到DOM中。DOM而後成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。全部的指令都負責針對view來設置數據綁定。
咱們要理解AuguarJS並不把模板當作String來操做。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的鏈接或者innerHTML變化。使用DOM做爲輸入，而不是字符串，是AngularJS區別於其它的框架的最大緣由。使用DOM容許你擴展指令詞彙而且能夠建立你本身的指令，甚至開發可重用的組件。
最大的好處是爲設計師和開發者建立了一個緊密的工做流。設計師能夠像往常同樣開發標籤，而後開發者拿過來添加上功能，經過數據綁定將會使得這個過程很是簡單。
這裏有一個例子，咱們使用ng-repeat指令來循環圖片數組而且加入img模板，以下：
function AlbumCtrl($scope) {
scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="http://m.cnblogs.com/142260/{{image.thumbnail}}" rel="nofollow"/>
</li>
</ul>
</div>
這裏還有一件事值得提一句，AngularJS並不強制你學習一個新的語法或者從你的應用中提出你的模板。
3.3 特性三：MVC
針對客戶端應用開發AngularJS吸取了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不一樣的人可能意味不一樣的東西。AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Moodel-View-ViewModel)。
Model
model是應用中的簡單數據。通常是簡單的javascript對象。這裏沒有必要繼承框架的classes，使用proxy對象封裝或者使用特別的setter/getter方法來訪問。事實上咱們處理vanilla javascript的方法就是一個很是好的特性，這種方法使得咱們更少使用應用的原型。
ViewModel
viewmodel是一個用來提供特別數據和方法從而維護指定view的對象。
viewmodel是$scope的對象，只存在於AnguarJS的應用中。$scope只是一個簡單的js對象，這個對象使用簡單的API來偵測和廣播狀態變化。
Controller
controller負責設置初始狀態和參數化$scope方法用以控制行爲。須要指出的controller並不保存狀態也不和遠程服務互動。
View
view是AngularJS解析後渲染和綁定後生成的HTML 。這個部分幫助你建立web應用的架構。$scope擁有一個針對數據的參考，controller定義行爲，view處理佈局和互動。
3.4 特性四：服務和依賴注入
AngularJS服務其做用就是對外提供某個特定的功能。
AngularJS擁有內建的依賴注入（DI）子系統，能夠幫助開發人員更容易的開發，理解和測試應用。
DI容許你請求你的依賴，而不是本身找尋它們。好比，咱們須要一個東西，DI負責找建立而且提供給咱們。
爲了而獲得核心的AngularJS服務，只須要添加一個簡單服務做爲參數，AngularJS會偵測而且提供給你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}
你也能夠定義本身的服務而且讓它們注入：
angular.module('MyServiceModule', []).
factory('notify', ['$window', function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.$inject = ['$scope', 'notify'];
3.5 特性五：指令（Directives）
指令是我我的最喜歡的特性。你是否是也但願瀏覽器能夠作點兒有意思的事情？那麼AngularJS能夠作到。
指令能夠用來建立自定義的標籤。它們能夠用來裝飾元素或者操做DOM屬性。能夠做爲標籤、屬性、註釋和類名使用。
這裏是一個例子，它監聽一個事件而且針對的更新它的$scope ，以下：
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
而後，你可使用這個自定義的directive來使用：
<my-component ng-model="message"></my-component>
使用一系列的組件來建立你本身的應用將會讓你更方便的添加，刪除和更新功能。