本文实例讲述了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://ment 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程序设计有所帮助。