本文实例讲述了AngularJS模板加载用法。分享给大家供大家参考,具体如下:
angular模板加载 ----ng-template
AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念。
NG加载模板的顺序为 内存加载---AJAX加载。
内存加载
如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用。模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载。
$templateCache 服务put方法负责向内存写入模板内容。
lovestory
这是script标签获取模板文件的方式
这里需要注意, type="text/ng-template" 是指明这是ng模板,id属性是指实际使用模板时的一个引用,标签之间的内容才是实际的模板内容。而且,需要注意,id绝对不是URL,这个 script 标签绝对不会发出HTTP请求,具体讨论见最后。
实际应用模板时候,使用 ID 属性,即可从内存中获取对应数据。
rush:xhtml;">
lovestory.html'" class="well">
使用 ng-include 的时候,应该注意,id相当于一个字符串,不是ng-expression ,所以不要忘了加单引号。
AJAX加载
上述的内存加载,相当于一个预定义模板,定义在 client-side ,不会与服务器有任何交互,适合变化频率低的模板。
当NG在内存中找不到对应模板时,就会启用AJAX请求,去拉取对应模板。假设项目入口文件地址为 http://127.0.0.1/index.html ;
rush:xhtml;">
lovestory.html'" class="well">
在指令中同样可以使用,templateUrl对应值
rush:js;">
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($s
cope,iElm,iAttrs,controller) {}
}
}])
内存中没有对应模板时,AJAX请求地址为 http://127.0.0.1/lovestory.html,请求成功后将对应内容写入 $templateCache ,在页面不进行刷新,不手动删除的情况下,写入的内容不会丢失。而且,务必记住,AJAX是有缓存控制的。。。
内存模板优点
在雅虎前端优化34条里,有一条是“合并压缩文件”。
合并压缩文件可以减小HTTP请求量,又可以减小网络传输量,对于路径依赖并不严重的JS,CSS文件完全是必备,因为各JS,CSS文件开发时分割为不同的文件,实现各自的功能需求,上线时合并即可,但是,HTML文件可以压缩,但是无法合并,因为路径依赖严重。
以我为学习Angularjs而做的个人博客练习 路由为例:
rush:js;">
angular.module('administratorApp',[])
.con
fig(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)就需要注意几点。
自动把结果放入cache里,所以需要手动控制.模板与控制器存在对应关系,可以在控制器内部加上如下代码
rush:js;">
$s
cope.$on('$locationChangeStart',function(){
$templateCache.remove('****.html');
})
函数,通过函数返回值可以控制模板加载。
性能提升,内存不再是个困扰。
$templateCache 方法
$templateCache 基于 cacheFactory 而来,接口保持一致,可以认为
rush:js;">
\$templateCache = \$cacheFactory('template');
ottom: rgb(221,221,221) 1px solid; widows: 1; text-transform: none; background-color: rgb(249,249,245); text-indent: 0px; border-spacing: 0px; width: 849px; border-collapse: separate; font: 16px/27px 'PingFang SC','Hiragino Sans GB','Helvetica Neue','Microsoft Yahei','WenQuanYi Micro Hei',sans-serif; max-width: 100%; white-space: normal; margin-bottom: 20px; letter-spacing: normal; color: rgb(44,62,80); border-top: rgb(221,221) 1px solid; border-left-width: 0px; border-right: rgb(221,221) 1px solid; word-spacing: 0px; border-radius: 4px; -webkit-text-stroke-width: 0px">
ottom: 8px; line-height: 20px; padding-left: 8px; padding-right: 8px; border-top-width: 0px; vertical-align: bottom; font-weight: 700; padding-top: 8px; border-top-left-radius: 4px">方法
ottom: 8px; line-height: 20px; padding-left: 8px; padding-right: 8px; border-top-width: 0px; vertical-align: bottom; font-weight: 700; padding-top: 8px; border-top-right-radius: 4px">功能 |
ottom: 8px; line-height: 20px; padding-left: 8px; padding-right: 8px; vertical-align: top; border-top: rgb(221,221) 1px solid; padding-top: 8px">put内容获取模板内容删除对应模板内容删除所有模板内容ottom-left-radius: 4px">infoottom-right-radius: 4px">模板缓存对象的信息
Grunt与ID属性误解
rush:js;">
module.exports = function(grunt){
grunt.initCon
fig({
html2js : {
simple : {
options : {
base : '',module : 'templateStore'
},files : [{
src : ['views/*.html'],dest : 'build/scripts/templateStore.js'
}]
}
}
});
grunt.loadN
pmtasks('grunt-html2js');
grunt.registerTask('default',['html2js']);
}
这是我目前使用Grunt--html2js的配置方案,目的是将 views 文件夹下的所有模板文件全部放入 templateStore 模块中,各模板对应ID即为路径,生成的部分代码如下:
rush:js;">
angular.module("views/diaryList.html",[]).run(["$templateCache",function($templateCache) {
$templateCache.put("views/diaryList.html",'*******'
}]);
这部分代码等效于
rush:js;">