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

  <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>

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

转载于:https://www.cnblogs.com/calvin-dong/p/9534678.html