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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JS实现时间校验的代码
May 25 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
ECMAScript 基础知识
2007/06/29 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
python书籍信息爬虫实例
2018/03/19 Python
python计算列表内各元素的个数实例
2018/06/29 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
高中运动会广播稿
2014/01/21 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL