AngularJS模板加载用法详解


Posted in Javascript onNovember 04, 2016

本文实例讲述了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是有缓存控制的。。。

内存模板优点

在雅虎前端优化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程序设计有所帮助。

Javascript 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
jQuery图片加载显示loading效果
Nov 04 #Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
简单学习vue指令directive
Nov 03 #Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python实现飞船大战
2020/04/24 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年手术室工作总结
2014/11/26 职场文书
税务会计岗位职责
2015/04/02 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Nginx速查手册及常见问题
2022/04/07 Servers