初識angular體驗(三)

　　哈嘍，大家好，不知不覺又過了一個星期，感覺一周一周過得好快啊，上周的分享我們說到了angular的一個主要的特性——雙向數據綁定，這周呢，我會把其他特性以代碼的形式給大家介紹！！

　　特性二：模板

　　在AngularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。

　　HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設置數據綁定。

　　我們要理解AuguarJS并不把模板當做String來操作。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區別于其它的框架的最大原因。使用DOM允許你擴展指令詞匯并且可以創建你自己的指令，甚至開發可重用的組件。

var m= angular.module('hd',[]);
        m.controller('ctrl',['$scope',function($scope){
             scope.p_w_picpaths = [
            {"p_w_picpath":"img/p_w_picpath_01.png", "description":"Image 01 description"},
            {"p_w_picpath":"img/p_w_picpath_02.png", "description":"Image 02 description"},
            {"p_w_picpath":"img/p_w_picpath_03.png", "description":"Image 03 description"},
            {"p_w_picpath":"img/p_w_picpath_04.png", "description":"Image 04 description"},
            {"p_w_picpath":"img/p_w_picpath_05.png", "description":"Image 05 description"}
        ];
}]); 
 <div ng-controller="'ctrl'">
      <ul>
        <li ng-repeat="p_w_picpath in p_w_picpaths">
          <img ng-src="`p_w_picpath`.`thumbnail`" alt="`p_w_picpath`.`description`">
        </li>
      </ul>
    </div>

　　以上代碼就是通過遍歷scope.p_w_picpaths 的數據把img一一通過li輸出，這就是一個模板。

　　當然，真正的項目的數據都是通過接口去讀取的，在這里我只能以假的數據來定義！

　　特性三：MVC

　　針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS并不執行傳統意義上的MVC，更接近于MVVM（Model-View-ViewModel)。

　　特性四：依賴注入（Dependency Injection，即DI）

　　AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。

　　DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建并且提供給我們。

　　特性五：Directives（指令）

　　指令可以用來創建自定義的標簽。它們可以用來裝飾元素或者操作DOM屬性。

　　好啦，以上就是這周分享的內容，下周開始我會以節的形式給大家分享angular知識點和注意事項，讓我們這些零基礎的朋友們，能夠快速進步！！！