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是有缓存控制的。。。