理解和學習AngularJS（一）

Angularjs

Angular是一款主旋律的MVVM框架，框架和傳統的庫不一樣：

• 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等
  
  

• 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout等。

Angular.js主要用於構建單頁面web應用，提供了諸如：

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

簡要解釋Angularjs就是一個能夠給HTML加上互動性的客戶端js框架。咱們須要明白如何讓HTML適時調用js。

在Angular中，咱們經過指令（Directives）給HTML加上行爲。指令是一個在HTML標籤上的標記，用來告訴Angular運行或者引用哪些js代碼。爲指令賦值函數名，便可運行。但這不是很好的方式，咱們只需明白這就是指令如何綁定行爲的

Angular模塊（module）

模塊是指寫Angular應用的代碼片斷，這樣可使代碼分離開來，所以代碼會更好維護，可讀和測試。還能夠在module裏定義代碼依賴關係，能夠調用一個模塊，再在代碼中定義這個模塊依賴於另外兩個。

var app = angular.module('store',[]);//store=>應用名,[]=>定義依賴關係,app爲模塊的實例對象

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

表達式

表達式{{}}容許你動態插入值到你的HTML當中。

控制器（Controller）

控制器幫助咱們把應用內的數據信息顯示到頁面中，控制器是經過定義函數和變量，從而定義應用行爲的地方。ng-controller定義了AngularJS 應用程序被控制器控制。

ng-controller幫助咱們把控制器附屬在html元素上，做爲ng-controller屬性的值，咱們要寫控制器名字，咱們用as關鍵字這個屬性值起個別名。咱們將會在元素內的表達式中使用這個別名

<div ng-controller="StoreController as store">
    <h1>{{store.product.name}}</h1>
    <h2>${{store.product.price}}</h2>
    <p>{{store.product.description}}</p>
</div>
(function () {
    var app = angular.module('store',[]);
    app.controller("StoreController", function () {
        this.product = gem;
    });
    var gem = {
        name: 'trigkit4',
        price: 2.09,
        description: '...'
    }
})();

這個控制器的範圍權限僅限於它所附屬的元素

指令是觸發javascript函數行爲的html標記
模塊是定義應用的各個組成部分
控制器定義應用的行爲
表達式控制咱們如何將信息顯示在頁面上

ng-app來把應用模塊放到頁面上 
ng-controller來把邏輯控制器放到頁面上
ng-show & ng-hide來經過表達式控制元素的顯示與否
ng-repeat來循環一個數組中全部的數據

過濾器filter

angular提供了不少不一樣的過濾器，在類似的表示方式下，即取出一些數據，傳遞數據（豎線| 後跟表達式）給相應的過濾器，
有時候也能夠給它加上相應的參數

{{data* | filter:option*}}

好比：
uppercase & lowercase

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

還有好比限制過濾器（limitTo filter），能夠控制字符的輸出數量：

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

指令Directives

Angularjs經過指令（directive）擴展HTML的語法，經過經過{{}}進行數據綁定

ng-app

ng-app屬性聲明全部被其包含的內容都屬於這個AngularJS應用, 只有被具備ng-app屬性的DOM元素包含的元素纔會受AngularJS影響。若是不寫該指令，angular是不會執行的。

ng-init

ng-init指令初始化應用程序數據，也就是爲AngularJS應用程序定義初始值。以下，爲應用程序name賦初值：

<div ng-app="" ng-init="names=['mike','trigkit4','jack']">
    {{names}} <!--['mike','trigkit4','jack'] -->
</div>

ng-model

只須要使用ng-model指令就能夠把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。看下面實例：

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

ng-bind

ng-bind和Angularjs表達式{{}}很相似，不一樣的是ng-bind是在angular解析渲染完畢後纔將數據顯示出來的。還有就是表達式不能寫在DOM元素的屬性裏，而指令能夠。

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

ng-click

AngularJS也有本身的HTML事件指令,好比說經過ng-click定義一個AngularJS單擊事件。

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

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

ng-controller

控制器在AngularJS中的做用是加強視圖。 當咱們在頁面上建立一個新的控制器時，AngularJS會生成並傳遞一個新的$scope給這個控 制器。能夠在這個控制器裏初始化$scope。

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

要明確建立一個$scope對象，咱們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

通常狀況下，咱們使用控制器作兩件事：

• 初始化 $scope 對象

• 爲 $scope 對象添加行爲（方法）

ng-repeat

<div ng-app="" ng-init="people=[
        {name:'mike',age:21},
        {name:'trigkit4',age:22},
        {name:'Tom',age:12}]">
    <table>
        <tbody>
            <tr ng-repeat="x in people">
                <td>{{'Name: ' + x.name + ',Age: '+ x.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

$scope控制範圍

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

它也是一個JavaScript對象，指向應用程序做用域內的全部HTML元素和執行上下文。

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

簡而言之，$scope 是與指令元素相關聯的當前做用域，能夠理解爲視圖和控制器間的一個通道。當angular運行時，全部的$scope對象都會附加或者連接到視圖中。

指令和做用域

指令一般不會建立本身的$scope，除了ng-controller和ng-repeat，他們會建立本身的子做用域並將他們附加到DOM元素上。

雙向數據綁定

雙向數據綁定意味着這些表達式會在屬性改變的時候自動改變。當數據發生改變的時候，會使相應的視圖進行改變，當咱們的視圖上發生改變的時候，能夠促使相應的數據發生改變，這就是雙向的數據綁定到一塊兒了。

雙向數據綁定節省了大量的樣板代碼。Angular 幫助你把構建應用的程序塊劃分爲下面這幾種類型：控制器(Controller)，指令(Directive)，工廠(Factory)，過濾器 (Filter)，服務(Service)和視圖(View) (就是模板)。它們被組織爲模塊形式，以後能夠被另外一個引用。

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

雙向數據綁定的優勢是無需進行和單向數據綁定的那些CRUD（Create，Retrieve，Update，Delete）操做

雙向數據綁定最常常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操做，咱們就已經拿到了用戶的數據存放到數據模型中了。

依賴注入

依賴注入的意思是 你須要的東西不用由你建立，而是由第三方，或者說容器提供給你的。這樣的設計符合正交性，即所謂的鬆耦合。

總之就是你不用關心對象的生命週期，何時被建立，何時銷燬，只需直接使用便可，對象的生命週期由提供 依賴注入的框架來管理。

第一個 AngularJS Web 應用

todoList demo

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