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

转载:https://blog.csdn.net/yczz/article/details/48316167

Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念。

NG加载模板的顺序为 内存加载---AJAX加载。

如果排版乱掉,请查阅https://www.zybuluo.com/bornkiller/note/6023

内存加载

如果之前使用过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 的相关内容,将作为单独篇章出现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值