Web前端JS架構AngularJS

       AngularJS是Google研發的一款優秀的前端JS架構，是為了克服HTML在建構應用上動态性不足而設計的，現已經被用于Google的多款産品當中。

       通常，我們使用以下方法來解決靜态網頁技術在建構動态應用上的不足：

       類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。通過在自己的核心代碼中調用類庫的方法，實作某種功能，例如：jQuery等。

       架構 - 架構是一種特殊的、已經實作了的WEB應用，你隻需要套用該架構并對它進行具體的邏輯填充即可。這裡架構是起主導作用的，由它來根據具體的應用邏輯調用你的代碼。架構有：knockout、sproutcore等。

       AngularJS使用了不同的方法，它嘗試去補足HTML本身在建構應用方面的缺陷。AngularJS通過使用我們稱為辨別符(directives)的結構，讓浏覽器能夠識别新的文法。AngularJS最為核心的特性就是：MVC、自動化雙向資料綁定、子產品化、路由、語義化标簽等等。

1、AngularJS MVC

       MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計建立 Web 應用程式的模式。

AngularJS程式的MVC分為3部分：模闆（View），表現層邏輯（Controller），資料（Model）。

1）模闆：

       是我們用HTML、CSS寫的UI視圖代碼，其中包含AngularJS的指令、表達式，這些指令、表達式幫助你映射model到view的内容。

       AnjularJS的機制就是：HTML模闆被浏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS将會周遊DOM模闆來生成一些指令。所有的指令都負責針對view來設定資料綁定。使用DOM作為輸入，而不是字元串，是AngularJS差別于其它的架構的最大原因。使用DOM允許你擴充指令詞彙并且可以建立你自己的指令，甚至開發可重用的元件。AngularJS的指令後面将會再詳細做一介紹。

說到AngularJS編譯機制就不得不說一下DOM。DOM檔案對象模型（Document Object Model），是w3c組織推薦的處理可擴充标志語言的标準程式設計接口。要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文檔中所有元素進行通路的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型DOM來獲得的。

 2）表現層邏輯（控制器）：

       包括應用程式邏輯和行為。用javascript定義，作為視圖控制器邏輯。在控制器中我們無需添加對于DOM級的事件監聽，這些在AngularJS中已經内置了。在UI節點DOM事件發生後（例如點選button事件），AngularJS會自動轉到scope上的某個行為（Action）邏輯上（即自動通過内置DOM進行事件擷取，然後找到對應的scope範圍，進行JS函數邏輯應用）。

3）資料：

       視圖對象（viewobject）需要被AngularJS Scope引用，可以是任何類型的javascript對象、數組、基本類型對象。并且AngularJS會自動異步更新模型，即在UI發生改變時它會自動重新整理模型（mode），反之在模型發生改變的時候也會自動重新整理UI。在這裡我們不需要定義形如getter，setter的一系列方法。AngularJS可以通過雙向資料綁定自動從擁有JavaScript對象（模型）的UI（視圖）中同步資料。

2、自動化雙向資料綁定

<input class="inputheight" ng-model="activity_name" type="search">  

<button class=" btn btn-primary btn-lg btn-block" ng-click="create_Activity()" ng-disabled="!activity_name"> 
           

       雙向資料綁定指的就是，綁定對象屬性的改變到使用者界面的變化的能力，反之亦然。在這裡使用指令ng-model建立了一個資料模型"activity_name"，并與所在的标簽“input”雙向綁定，無論什麼時候界面輸入的值發生變化，所對應的資料模型也發生了改變（比如$scope.activity_name的值會跟着輸入的資料而改變）。反之，使用"activity_name"屬性作為ng-disabled的屬性值，當$scope.activity_name的值改變時（有值沒值），就會以button是否可點表現在界面UI 上。

      雙向資料綁定指令提供了Model投射到View的方法，傳統情況下，當Model變化時， 開發人員需要手動處理DOM元素并且将屬性反映到這些變化中。這是一個雙向的過程，一方面，Model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。

3、路由機制

      ng的路由機制是靠ngRoute提供的，通過hash和history兩種方式實作了路由，可以檢測浏覽器是否支援history來靈活調用相應的方式。ng的路由(ngRoute)是一個單獨的子產品，每一個使用的子產品都要進行引用，下面的應用引用了6個子產品。形式如下：

angular
    .module('yoDemoApp', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngRoute', 
        'ngSanitize',
        'ngTouch'
    ])      

路由子產品包含以下内容：

服務$routeProvider用來定義一個路由表，即位址欄與視圖模闆的映射

.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/activity_list.html',
                controller: 'activity_listCtrl'
            })
 });      

服務$routeParams儲存了位址欄中的參數，例如{id : 1, name : 'tom'}

服務$route完成路由比對，并且提供路由相關的屬性通路及事件，如通路目前路由對應的controller

指令ngView用來在主視圖中指定加載子視圖的區域

在index.html中使用

<div ng-view=""></div>
           

 來加載。以上内容再加上$location服務，我們就可以實作一個單頁面應用了。

具體跳轉機制：

 1）引入檔案和依賴

<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
           

 并在子產品中聲明中注入對ngRoute的依賴

angular
    .module('yoDemoApp', [
        'ngRoute'
    ])      

2)定義路由表

$routeProvider提供了定義路由表的服務，它有兩個核心方法，when(path,route)和otherwise(params)，

.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/activity_list.html',
                controller: 'activity_listCtrl'
            })
 });      

 3）整個路由查找過程

       我們通過$location.path頁面跳轉方法将跳轉的路徑跟路由表中的進行比對，比如比對“/“，找到對應的‘/’，在目前模闆上執行的controller函數，生成新的scope，而templateUrl這一部分就會被ng-view所引用，我們的子視圖将會在此處被引入跳轉進來。otherwise(params)方法對應路徑比對不到時的情況，這時候我們可以配置一個redirectTo參數，讓它重定向到404頁面或者是首頁。

.otherwise({
                redirectTo: '/'
            });      

 4、AngularJS指令屬性和标記

      “ 指令屬性”就是綁定在DOM元素上的函數，它可以調用方法、定義行為、綁定controller及$scope對象、操作DOM，等等。當浏覽器啟動、開始解析HTML（像平時一樣）時，DOM元素上的指令屬性就會跟其他屬性一樣被解析。當一個Angular.js應用啟動，Angular編譯器就會周遊DOM樹（從有ng-app指令屬性的那個DOM元素開始），解析HTML，尋找這些指令屬性函數。

1）ng-model指令屬性

       ng-model指令屬性被用來将DOM的屬性值與Controller裡的$scope model綁定起來。具體的實作過程，是在這個值上綁定了一個$watch函數（類似JavaScript裡的事件監聽函數）。$watch函數（在使用時）運作在Angular.js的事件循環（即$digest循環）裡，讓Angular.js能夠對DOM進行相應的更新。

2）{{ 表達式 }}标記

       這個雙大括号指令屬性，使用$watch()函數，給括号内的表達式注冊了一個監聽器。正是這個$watch函數，讓Angular.js能夠實時自動更新view。

3）ng-show / ng-hide

       ng-show和ng-hide指令，根據賦予它們的表達式的值的真假性(truthy)，來顯示和隐藏它們所屬的那一部分DOM。

4）ng-app

       ng-app聲明了Angular管理的邊界，隻需查找對應的ng-app所在的标簽。獲得Angular管理的範圍。

5）ng-repeat

       在第一張卡小結時就介紹過ng-repeat，這裡再進行一下說明。在自己的scope中定義一個數組（model）來儲存資料，然後使用 ng-repeat 将它與 DOM 綁定，進行周遊，實作清單。