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

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

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

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

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

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

簡(jiǎn)要解釋Angularjs就是一個(gè)可以給HTML加上互動(dòng)性的客戶(hù)端js框架。我們需要明白如何讓HTML適時(shí)調(diào)用js。

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

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

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

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

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

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

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

    
{{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: "..."
    }
})();

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

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

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

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

{{data* | filter:option*}}

比如：
uppercase & lowercase

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

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

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

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

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

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

    {{names}} 

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

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

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

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

AngularJS也有自己的HTML事件指令,比如說(shuō)通過(guò)ng-click定義一個(gè)AngularJS單擊事件。

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

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

控制器在AngularJS中的作用是增強(qiáng)視圖。 當(dāng)我們?cè)陧?yè)面上創(chuàng)建一個(gè)新的控制器時(shí)，AngularJS會(huì)生成并傳遞一個(gè)新的$scope給這個(gè)控 制器。可以在這個(gè)控制器里初始化$scope。

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

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

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

初始化 $scope 對(duì)象

為 $scope 對(duì)象添加行為（方法）

    

        

            

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

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

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

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

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

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

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

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

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

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

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

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

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

todoList demo

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