摘要：為指令賦值函數(shù)名，即可運行。它也是一個對象，指向應(yīng)用程序作用域內(nèi)的所有元素和執(zhí)行上下文。簡而言之，是與指令元素相關(guān)聯(lián)的當(dāng)前作用域，可以理解為視圖和控制器間的一個通道。它們被組織為模塊形式，之后可以被另一個引用。

Angular是一款主旋律的MVVM框架，框架和傳統(tǒng)的庫不同：

類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來決定何時使用類庫。類庫有：jQuery等

框架是一種特殊的、已經(jīng)實現(xiàn)了的WEB應(yīng)用，你只需要對它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼?？蚣苡校簁nockout等。

Angular.js主要用于構(gòu)建單頁面web應(yīng)用，提供了諸如：

1.解耦應(yīng)用邏輯、數(shù)據(jù)模型和視圖
2.AJax服務(wù)
3.依賴注入
4.瀏覽歷史
5.測試和更多功能

簡要解釋Angularjs就是一個可以給HTML加上互動性的客戶端js框架。我們需要明白如何讓HTML適時調(diào)用js。

在Angular中，我們通過指令（Directives）給HTML加上行為。指令是一個在HTML標(biāo)簽上的標(biāo)記，用來告訴Angular運行或者引用哪些js代碼。為指令賦值函數(shù)名，即可運行。但這不是很好的方式，我們只需明白這就是指令如何綁定行為的

模塊是指寫Angular應(yīng)用的代碼片段，這樣可以使代碼分離開來，因此代碼會更好維護，可讀和測試。還可以在module里定義代碼依賴關(guān)系，可以調(diào)用一個模塊，再在代碼中定義這個模塊依賴于另外兩個。

var app = angular.module("store",[]);//store=>應(yīng)用名,[]=>定義依賴關(guān)系,app為模塊的實例對象

AngularJS允許我們使用angular.module()方法來聲明模塊，這個方法能夠接受兩個參數(shù), 第一個是模塊的名稱，第二個是依賴列表,也就是可以被注入到模塊中的對象列表。

表達(dá)式{{}}允許你動態(tài)插入值到你的HTML當(dāng)中。

控制器幫助我們把應(yīng)用內(nèi)的數(shù)據(jù)信息顯示到頁面中，控制器是通過定義函數(shù)和變量，從而定義應(yīng)用行為的地方。ng-controller定義了AngularJS 應(yīng)用程序被控制器控制。

ng-controller幫助我們把控制器附屬在html元素上，作為ng-controller屬性的值，我們要寫控制器名字，我們用as關(guān)鍵字這個屬性值起個別名。我們將會在元素內(nèi)的表達(dá)式中使用這個別名

    
{{store.product.name}}
    
${{store.product.price}}
    
{{store.product.description}}

(function () {
    var app = angular.module("store",[]);
    app.controller("StoreController", function () {
        this.product = gem;
    });
    var gem = {
        name: "trigkit4",
        price: 2.09,
        description: "..."
    }
})();

這個控制器的范圍權(quán)限僅限于它所附屬的元素

指令是觸發(fā)javascript函數(shù)行為的html標(biāo)記
模塊是定義應(yīng)用的各個組成部分
控制器定義應(yīng)用的行為
表達(dá)式控制我們?nèi)绾螌⑿畔@示在頁面上

ng-app來把應(yīng)用模塊放到頁面上 
ng-controller來把邏輯控制器放到頁面上
ng-show & ng-hide來通過表達(dá)式控制元素的顯示與否
ng-repeat來循環(huán)一個數(shù)組中所有的數(shù)據(jù)

angular提供了很多不同的過濾器，在相似的表示方式下，即取出一些數(shù)據(jù)，傳遞數(shù)據(jù)（豎線| 后跟表達(dá)式）給相應(yīng)的過濾器，
有時候也可以給它加上相應(yīng)的參數(shù)

{{data* | filter:option*}}

比如：
uppercase & lowercase

{{"trigkit4" | uppercase}} /*TRIGKIT4*/

還有比如限制過濾器（limitTo filter），可以控制字符的輸出數(shù)量：

{{"My dictionary" | limitTo:8}} /*My dicti*/

Angularjs通過指令（directive）擴展HTML的語法，通過通過{{}}進行數(shù)據(jù)綁定

ng-app屬性聲明所有被其包含的內(nèi)容都屬于這個AngularJS應(yīng)用, 只有被具有ng-app屬性的DOM元素包含的元素才會受AngularJS影響。如果不寫該指令，angular是不會執(zhí)行的。

ng-init指令初始化應(yīng)用程序數(shù)據(jù)，也就是為AngularJS應(yīng)用程序定義初始值。如下，為應(yīng)用程序name賦初值：

    {{names}} 

只需要使用ng-model指令就可以把應(yīng)用程序數(shù)據(jù)綁定到HTML元素，實現(xiàn)model和view的雙向綁定?？聪旅鎸嵗?/p>

http://codepen.io/hawx1993/pe...

ng-bind和Angularjs表達(dá)式{{}}很類似，不同的是ng-bind是在angular解析渲染完畢后才將數(shù)據(jù)顯示出來的。還有就是表達(dá)式不能寫在DOM元素的屬性里，而指令可以。

http://codepen.io/hawx1993/pe...

AngularJS也有自己的HTML事件指令,比如說通過ng-click定義一個AngularJS單擊事件。

http://codepen.io/hawx1993/pe...

ng-hide="true"，設(shè)置HTML元素不可見。

控制器在AngularJS中的作用是增強視圖。 當(dāng)我們在頁面上創(chuàng)建一個新的控制器時，AngularJS會生成并傳遞一個新的$scope給這個控 制器?？梢栽谶@個控制器里初始化$scope。

http://codepen.io/hawx1993/pe...

要明確創(chuàng)建一個$scope對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

一般情況下，我們使用控制器做兩件事：

初始化 $scope 對象

為 $scope 對象添加行為（方法）

    

        

            

                
{{"Name: " + x.name + ",Age: "+ x.age}}
            
        
    

$scope是一個將view（一個DOM元素）連結(jié)到controller上的對象。每一個Angular應(yīng)用都會有一個 $rootScope。這個 $rootScope 是最頂級的scope，它對應(yīng)著含有 ng-app 指令屬性的那個DOM元素。

它也是一個JavaScript對象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。

所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope，也具有原型鏈那樣的特性，即向上訪問屬性和方法，直到最頂層。

簡而言之，$scope 是與指令元素相關(guān)聯(lián)的當(dāng)前作用域，可以理解為視圖和控制器間的一個通道。當(dāng)angular運行時，所有的$scope對象都會附加或者鏈接到視圖中。

指令通常不會創(chuàng)建自己的$scope，除了ng-controller和ng-repeat，他們會創(chuàng)建自己的子作用域并將他們附加到DOM元素上。

雙向數(shù)據(jù)綁定意味著這些表達(dá)式會在屬性改變的時候自動改變。當(dāng)數(shù)據(jù)發(fā)生改變的時候，會使相應(yīng)的視圖進行改變，當(dāng)我們的視圖上發(fā)生改變的時候，可以促使相應(yīng)的數(shù)據(jù)發(fā)生改變，這就是雙向的數(shù)據(jù)綁定到一起了。

雙向數(shù)據(jù)綁定節(jié)省了大量的樣板代碼。Angular 幫助你把構(gòu)建應(yīng)用的程序塊劃分為下面這幾種類型：控制器(Controller)，指令(Directive)，工廠(Factory)，過濾器 (Filter)，服務(wù)(Service)和視圖(View) (就是模板)。它們被組織為模塊形式，之后可以被另一個引用。

雙向數(shù)據(jù)綁定：數(shù)據(jù)模型（Module）和視圖（View）之間的雙向綁定。

雙向數(shù)據(jù)綁定的優(yōu)點是無需進行和單向數(shù)據(jù)綁定的那些CRUD（Create，Retrieve，Update，Delete）操作

雙向數(shù)據(jù)綁定最經(jīng)常的應(yīng)用場景就是表單了，這樣當(dāng)用戶在前端頁面完成輸入后，不用任何操作，我們就已經(jīng)拿到了用戶的數(shù)據(jù)存放到數(shù)據(jù)模型中了。

依賴注入的意思是 你需要的東西不用由你創(chuàng)建，而是由第三方，或者說容器提供給你的。這樣的設(shè)計符合正交性，即所謂的松耦合。

總之就是你不用關(guān)心對象的生命周期，什么時候被創(chuàng)建，什么時候銷毀，只需直接使用即可，對象的生命周期由提供 依賴注入的框架來管理。

todoList demo

http://codepen.io/hawx1993/pe...