1 前言

前端技術的發展是如此之快，各種優秀技術、優秀框架的出現簡直讓人目不暇接，緊跟時代潮流，學習掌握新知識自然是不敢怠慢。

AngularJS是google在維護，其在國外已經十分火熱，可是國內的使用情況卻有不小的差距，參考文獻/網路文章也很匱乏。這裡便將我學習AngularJS寫成文件，一方面作為自己學習路程上的記錄，另一方面也給有興趣的同學一些參考。

首先我自己也是一名學習者，會以學習者的角度來整理我的行文思路，這裡可能只是些探索，有理解或是技術上的錯誤還請大家指出；其次我特別喜歡編寫小例子來把一件事情說明白，故在文中會盡可能多的用示例加程式碼講解，我相信這會是一種比較好的方式；最後，我深知AngularJS的使用方式跟jquery的使用方式有很大不同，在大家都有jquery、ext經驗的條件下對於angular的學習會困難重重，不過我更相信在大家的堅持下，能夠快速的學好AngularJS，至少咱也能深入瞭解到AngularJS的基本思想，對咱們以後自己的外掛開發、專案開發都會有很大的啟示。

2 AngularJS概述

2.1 AngularJS是什麼？

AngularJs（後面就簡稱ng了）是一個用於設計動態web應用的結構框架。首先，它是一個框架，不是類庫，是像EXT一樣提供一整套方案用於設計web應用。它不僅僅是一個javascript框架，因為它的核心其實是對HTML標籤的增強。

何為HTML標籤增強？其實就是使你能夠用標籤完成一部分頁面邏輯，具體方式就是通過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。後面會詳細介紹。那麼，什麼又是動態web應用呢？與傳統web系統相區別，web應用能為使用者提供豐富的操作，能夠隨使用者操作不斷更新檢視而不進行url跳轉。ng官方也宣告它更適用於開發CRUD應用，即資料操作比較多的應用，而非是遊戲或影象處理類應用。

為了實現這些，ng引入了一些非常棒的特性，包括模板機制、資料繫結、模組、指令、依賴注入、路由。通過資料與模板的繫結，能夠讓我們擺脫繁瑣的DOM操作，而將注意力集中在業務邏輯上。

　 另外一個疑問，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應用。

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>

使用一系列的元件來建立你自己的應用將會讓你更方便的新增，刪除和更新功能。

4 功能介紹

4.1資料繫結

AngularJS的雙向資料繫結，意味著你可以在Mode(JS)中改變資料，而這些變動立刻就會自動出現在View上，反之亦然。即：一方面可以做到model變化驅動了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。

在我們使用jQuery的時候，程式碼中會大量充斥類似這樣的語句：var val = $(‘#id’).val(); $(‘#id’).html(str);等等，即頻繁的DOM操作（讀取和寫入），其實我們的最終目的並不是要操作DOM，而是要實現業務邏輯。ng的繫結將讓你擺脫DOM操作，只要模板與資料通過宣告進行了繫結，兩者將隨時保持同步，最新的資料會實時顯示在頁面中，頁面中使用者修改的資料也會實時被記錄在資料模型中。

從View到Controller再到View的資料互動（例01）：

<html ng-app="demoApp">

……

<input type="text" ng-model="user.name" placeholder="請輸入名稱"/>

Hello, {{ user.name }}！

……

關鍵： ng-app 、 ng-model 和 { {user.name } } 

首先： <html>元素的ng-app屬性。標識這個DOM裡面的內容將啟用AngularJS應用。

其次：告訴AngularJS，對頁面上的“user.name” 這個Model進行雙向資料繫結。

第三：告訴AngularJS，在“{{ user.name}}”這個指令模版上顯示“user.name”這個Model的資料。

從Server到Controller再到View的資料互動（例02）：

<html ng-app="demoApp">

……

<div  ng-controller="demoController">

<input type="text" ng-model="user.name" disabled="disabled"/>

<a href="javascript:void(0);" target="_blank" rel="nofollow">獲取名字</a>

……

demoApp.controller("demoController", function($http, $scope){

$scope. getAjaxUser = function(){

// $http.get({url:"../xxx.action"}).success(function(data){

// $scope.user= data;

// });

$scope.user = {"name":"從JOSN中獲取的名稱","age":22};

};

});

改變$scope中的user，View也會自動更新。

4.2 scopes、module、controller 

4.2.1 scopes

$scope是一個把view（一個DOM元素）連結到controller上的物件。在我們的MVC結構裡，這個 $scope 將成為model，它提供一個繫結到DOM元素（以及其子元素）上的excecution context。

儘管聽起來有點複雜，但 $scope 實際上就是一個JavaScript物件，controller和view都可以訪問它，所以我們可以利用它在兩者間傳遞資訊。在這個 $scope 物件裡，我們既儲存資料，又儲存將要執行在view上的函式。

每一個Angular應用都會有一個 $rootScope。這個 $rootScope 是最頂級的scope，它對應著含有 ng-app 指令屬性的那個DOM元素。

app.run(function($rootScope) { $rootScope.name = "張三"; });

如果頁面上沒有明確設定 $scope ，Angular 就會把資料和函式都繫結到這裡， 第一部分中的例子就是靠這一點成功執行的。

這樣，我們就可以在view的任何地方訪問這個name屬性，使用模版表示式{{}}，像這樣：

{{ name }}  

4.2.2 module

首先需要明確一下模板的概念。在我還不知道有模板這個東西的時候，曾經用js拼接出很長的HTML字串，然後append到頁面中，這種方式想想真是又土又笨。後來又看到可以把HTML程式碼包裹在一個<script>標籤中當作模板，然後按需要取來使用。

在ng中，模板十分簡單，它就是我們頁面上的HTML程式碼，不需要附加任何額外的東西。在模板中可以使用各種指令來增強它的功能，這些指令可以讓你把模板和資料巧妙的繫結起來。

在<html>標籤上多了一個屬性ng-app=”MyApp”，它的作用就是用來指定ng的作用域是在<html>標籤以內部分。在js中，我們呼叫angular物件的module方法來宣告一個模組，模組的名字和ng-app的值對應。這樣宣告一下就可以讓ng執行起來了。

示例：

<html ng-app="demoApp">

var demoApp = angular.module('demoApp', []);

4.2.3 ng-controller

要明確建立一個$scope 物件，我們就要給DOM元素安上一個controller物件，使用的是ng-controller 指令屬性：

<div ng-controller="MyController"> {{ person.name }} </div>  

ng-controller指令給所在的DOM元素建立了一個新的$scope 物件，並將這個$scope 物件包含進外層DOM元素的$scope 物件裡。在上面的例子裡，這個外層DOM元素的$scope 物件，就是$rootScope 物件。這個scope鏈是這樣的：

所有scope都遵循原型繼承（prototypal inheritance），這意味著它們都能訪問父scope們。對任何屬性和方法，如果AngularJS在當前scope上找不到，就會到父 scope上去找，如果在父scope上也沒找到，就會繼續向上回溯，一直到$rootScope 上。即如果controller是多層巢狀的，就會從最裡面一直往外找，這個scope鏈是這樣的：

唯一的例外：有些指令屬性可以選擇性地建立一個獨立的scope，讓這個scope不繼承它的父scope們，這個會在指令詳解中說明。

4.3 ajax

$http 服務是AngularJS的核心服務之一，它幫助我們通過XMLHttpRequest物件或JSONP與遠端HTTP服務進行交流。

$http 服務是這樣一個函式：它接受一個設定物件，其中指定了如何建立HTTP請求；它將返回一個承諾（*參考JavaScript非同步程式設計的promise模式），其中提供兩個方法： success方法和error方法。

demoApp.controller("demoController", function($http, $scope){

$scope. getAjaxUser = function(){

$http.get({url:"../xxx.action"}).success(function(data){

alert(data);

相關推薦