AngularJS模板加载用法详解

本文实例讲述了angularjs模板加载用法。分享给大家供大家参考，具体如下：

angular模板加载 ----ng-template

angularjs作为mvc（或者说mvvm)框架，同样具备模板这一基本概念。

ng加载模板的顺序为 内存加载---ajax加载。

内存加载

如果之前使用过bootstrap 插件的ng版，即angular-ui，就会了解到这种方式的具体应用。模板本质上是字符串，把字符串直接写入内存，加载时直接从内存获取，速度会更快，有两种方式显式启用内存加载。

通过使用 $templatecache service来实现

angular.module('myapp', [])
 .controller('myctrl', ['$scope','$templatecache', function($scope,$templatecache){
    var tmp = '<h4>lovestory</h4>'
       + '<p>这是直接调用$templatecache服务获取模板文件的方式</p>'
       + '<a href="http://www.baidu.com">服务启用templatecache方式</a>';
    $templatecache.put('lovestory.html',tmp);
  }])

$templatecache 服务put方法负责向内存写入模板内容。

通过 script 标签引入

<script type="text/ng-template" id="lovestory.html">
  <h4>lovestory</h4>
  <p>这是script标签获取模板文件的方式</p>
  <a href="http://www.baidu.com">标签启用templatecache方式</a>
</script>

这里需要注意， type="text/ng-template" 是指明这是ng模板，id属性是指实际使用模板时的一个引用，标签之间的内容才是实际的模板内容。而且，需要注意，id绝对不是url，这个 script 标签绝对不会发出http请求，具体讨论见最后。

实际应用模板时候，使用 id 属性，即可从内存中获取对应数据。

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

使用 ng-include 的时候，应该注意，id相当于一个字符串，不是ng-expression ，所以不要忘了加单引号。

ajax加载

上述的内存加载，相当于一个预定义模板，定义在 client-side ，不会与服务器有任何交互，适合变化频率低的模板。

当ng在内存中找不到对应模板时，就会启用ajax请求，去拉取对应模板。假设项目入口文件地址为 http://127.0.0.1/index.html ;

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

在指令中同样可以使用，templateurl对应值

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) {}
  }
 }])

内存中没有对应模板时，ajax请求地址为 http://127.0.0.1/lovestory.html , 请求成功后将对应内容写入 $templatecache ，在页面不进行刷新，不手动删除的情况下，写入的内容不会丢失。而且，务必记住，ajax是有缓存控制的。。。

内存模板优点

在雅虎前端优化34条里，有一条是“合并压缩文件”。

合并压缩文件可以减小http请求量，又可以减小网络传输量，对于路径依赖并不严重的js,css文件完全是必备，因为各js,css文件开发时分割为不同的文件，实现各自的功能需求，上线时合并即可，但是，html文件可以压缩，但是无法合并，因为路径依赖严重。

以我为学习angularjs而做的个人博客练习 路由为例：

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'
   });
 });

六个控制器需要六个模板，六次http请求加载数据量并不大的模板资源浪费严重。ng的优化方案是，通过虚拟路径取代实体路径，去除掉 server-side 的路径依赖。

好处就是，一个js文件一次http请求,而不是六次。坏处就是内存压力变大，pc上无所谓，开发web app(mobile)就需要注意几点。

① 移动端内存太脆，尽量不要使用上述所说的预定义模板,因为模板会全部加载到内存中

② ajax请求完毕，会自动把结果放入cache里，所以需要手动控制.模板与控制器存在对应关系，可以在控制器内部加上如下代码

$scope.$on('$locationchangestart',function(){
   $templatecache.remove('****.html');
})

③ $routeprovider的 template , templateurl 可以是函数，通过函数返回值可以控制模板加载。

ps::本人并未涉及到移动端开发，所以此处为思考所得，而且随着手机硬件性能提升，内存不再是个困扰。

$templatecache 方法

$templatecache 基于 cachefactory 而来，接口保持一致，可以认为

\$templatecache = \$cachefactory('template');

方法	功能
put	向内存写入模板内容
get	从内存获取模板内容
remove	传入key值，删除对应模板内容
removeall	删除所有模板内容
destroy	解除key-value对应关系，但不释放内存
info	模板缓存对象的信息

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 模块中，各模板对应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>

现在应该明白，id只是个标示，不是url。。。。。。

ajax缓存

涉及到部分http header 和 xhr2 的相关内容，将作为单独篇章后续介绍。

希望本文所述对大家angularjs程序设计有所帮助。