本文實(shí)例講述了AngularJS模板加載用法。分享給大家供大家參考，具體如下：

angular模板加載 ----ng-template

AngularJS作為mvc（或者說(shuō)mvvm)框架，同樣具備模板這一基本概念。

NG加載模板的順序?yàn)?內(nèi)存加載---AJAX加載。

內(nèi)存加載

如果之前使用過(guò)Bootstrap 插件的ng版，即angular-ui，就會(huì)了解到這種方式的具體應(yīng)用。模板本質(zhì)上是字符串，把字符串直接寫(xiě)入內(nèi)存，加載時(shí)直接從內(nèi)存獲取，速度會(huì)更快，有兩種方式顯式啟用內(nèi)存加載。

通過(guò)使用 $templateCache service來(lái)實(shí)現(xiàn)

angular.module('myApp', [])
 .controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
    var tmp = '<h4>lovestory</h4>'
       + '<p>這是直接調(diào)用$templateCache服務(wù)獲取模板文件的方式</p>'
       + '<a ;
    $templateCache.put('lovestory.html',tmp);
  }])

$templateCache 服務(wù)put方法負(fù)責(zé)向內(nèi)存寫(xiě)入模板內(nèi)容。

通過(guò) script 標(biāo)簽引入

<script type="text/ng-template" id="lovestory.html">
  <h4>lovestory</h4>
  <p>這是script標(biāo)簽獲取模板文件的方式</p>
  <a >標(biāo)簽啟用templateCache方式</a>
</script>

這里需要注意， type="text/ng-template" 是指明這是ng模板，id屬性是指實(shí)際使用模板時(shí)的一個(gè)引用，標(biāo)簽之間的內(nèi)容才是實(shí)際的模板內(nèi)容。而且，需要注意，id絕對(duì)不是URL，這個(gè) script 標(biāo)簽絕對(duì)不會(huì)發(fā)出HTTP請(qǐng)求，具體討論見(jiàn)最后。

實(shí)際應(yīng)用模板時(shí)候，使用 ID 屬性，即可從內(nèi)存中獲取對(duì)應(yīng)數(shù)據(jù)。

<div ng-include="'lovestory.html'" class="well"></div>

使用 ng-include 的時(shí)候，應(yīng)該注意，id相當(dāng)于一個(gè)字符串，不是ng-expression ，所以不要忘了加單引號(hào)。

AJAX加載

上述的內(nèi)存加載，相當(dāng)于一個(gè)預(yù)定義模板，定義在 client-side ，不會(huì)與服務(wù)器有任何交互，適合變化頻率低的模板。

當(dāng)NG在內(nèi)存中找不到對(duì)應(yīng)模板時(shí)，就會(huì)啟用AJAX請(qǐng)求，去拉取對(duì)應(yīng)模板。假設(shè)項(xiàng)目入口文件地址為 http://127.0.0.1/index.html ;

<div ng-include="'lovestory.html'" class="well"></div>

在指令中同樣可以使用，templateUrl對(duì)應(yīng)值

angular.module('myApp', [])
 .directive('templateDemo', ['$log', function($log){
  return {
  restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
  templateUrl: 'butterfly.html',
  replace: true,
  link: function($scope, iElm, iAttrs, controller) {}
  }
 }])

內(nèi)存中沒(méi)有對(duì)應(yīng)模板時(shí)，AJAX請(qǐng)求地址為 http://127.0.0.1/lovestory.html , 請(qǐng)求成功后將對(duì)應(yīng)內(nèi)容寫(xiě)入 $templateCache ，在頁(yè)面不進(jìn)行刷新，不手動(dòng)刪除的情況下，寫(xiě)入的內(nèi)容不會(huì)丟失。而且，務(wù)必記住，AJAX是有緩存控制的。。。

內(nèi)存模板優(yōu)點(diǎn)

在雅虎前端優(yōu)化34條里，有一條是“合并壓縮文件”。

合并壓縮文件可以減小HTTP請(qǐng)求量，又可以減小網(wǎng)絡(luò)傳輸量，對(duì)于路徑依賴(lài)并不嚴(yán)重的JS,CSS文件完全是必備，因?yàn)楦鱆S,CSS文件開(kāi)發(fā)時(shí)分割為不同的文件，實(shí)現(xiàn)各自的功能需求，上線時(shí)合并即可，但是，HTML文件可以壓縮，但是無(wú)法合并，因?yàn)槁窂揭蕾?lài)嚴(yán)重。

以我為學(xué)習(xí)Angularjs而做的個(gè)人博客練習(xí) 路由為例：

angular.module('administratorApp',[])
 .config(function ($routeProvider,$locationProvider) {
  $locationProvider.html5Mode(false);
  $routeProvider
   .when('/manage', {
    templateUrl: 'views/manage.html',
    controller: 'ManageCtrl'
   })
   .when('/diary/:key', {
    templateUrl: 'views/diaryDetail.html',
    controller: 'DiaryDetailCtrl',
   })
   .when('/diary', {
    templateUrl: 'views/diaryList.html',
    controller: 'DiaryListCtrl'
   })
   .when('/publish/:key', {
    templateUrl: 'views/update.html',
    controller: 'UpdateCtrl'
   })
   .when('/publish', {
    templateUrl: 'views/publish.html',
    controller: 'PublishCtrl'
   })
   .when('/record', {
    templateUrl: 'views/record.html',
    controller: 'RecordCtrl'
   })
   .otherwise({
    redirectTo: '/diary'
   });
 });

六個(gè)控制器需要六個(gè)模板，六次HTTP請(qǐng)求加載數(shù)據(jù)量并不大的模板資源浪費(fèi)嚴(yán)重。NG的優(yōu)化方案是，通過(guò)虛擬路徑取代實(shí)體路徑，去除掉 server-side 的路徑依賴(lài)。

好處就是，一個(gè)JS文件一次HTTP請(qǐng)求,而不是六次。壞處就是內(nèi)存壓力變大，PC上無(wú)所謂，開(kāi)發(fā)web app(mobile)就需要注意幾點(diǎn)。

① 移動(dòng)端內(nèi)存太脆，盡量不要使用上述所說(shuō)的預(yù)定義模板,因?yàn)槟０鍟?huì)全部加載到內(nèi)存中

② AJAX請(qǐng)求完畢，會(huì)自動(dòng)把結(jié)果放入cache里，所以需要手動(dòng)控制.模板與控制器存在對(duì)應(yīng)關(guān)系，可以在控制器內(nèi)部加上如下代碼

$scope.$on('$locationChangeStart',function(){
   $templateCache.remove('****.html');
})

③ $routeProvider的 template , templateUrl 可以是函數(shù)，通過(guò)函數(shù)返回值可以控制模板加載。

PS::本人并未涉及到移動(dòng)端開(kāi)發(fā)，所以此處為思考所得，而且隨著手機(jī)硬件性能提升，內(nèi)存不再是個(gè)困擾。

$templateCache 方法

$templateCache 基于 cacheFactory 而來(lái)，接口保持一致，可以認(rèn)為

\$templateCache = \$cacheFactory('template');

Grunt與ID屬性誤解

module.exports = function(grunt){
 grunt.initConfig({
  html2js : {
   simple : {
    options : {
     base : '',
     module : 'templateStore'
    },
    files : [{
     src : ['views/*.html'],
     dest : 'build/scripts/templateStore.js'
    }]
   }
  }
 });
 grunt.loadNpmTasks('grunt-html2js');
 grunt.registerTask('default',['html2js']);
}

這是我目前使用Grunt--html2js的配置方案，目的是將 views 文件夾下的所有模板文件全部放入 templateStore 模塊中，各模板對(duì)應(yīng)ID即為路徑，生成的部分代碼如下：

angular.module("views/diaryList.html", []).run(["$templateCache", function($templateCache) {
 $templateCache.put("views/diaryList.html", '*******'
}]);

這部分代碼等效于

<script type="text/ng-template" id="views/diaryList.html">
   ***********
</script>

現(xiàn)在應(yīng)該明白，id只是個(gè)標(biāo)示，不是URL。。。。。。

AJAX緩存

涉及到部分HTTP Header 和 XHR2 的相關(guān)內(nèi)容，將作為單獨(dú)篇章后續(xù)介紹。

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論