初識angular體驗(三)

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

　　特性二：模板

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

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

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

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 的數(shù)據(jù)把img一一通過li輸出，這就是一個模板。

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

　　特性三：MVC

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

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

　　AngularJS擁有內(nèi)建的依賴注入子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應(yīng)用。

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

　　特性五：Directives（指令）

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

　　好啦，以上就是這周分享的內(nèi)容，下周開始我會以節(jié)的形式給大家分享angular知識點和注意事項，讓我們這些零基礎(chǔ)的朋友們，能夠快速進步！?。?/p>