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 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
js的对象与函数详解
Jan 21 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
layer弹出层取消遮罩的方法
Sep 25 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
在python中安装basemap的教程
2018/09/20 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
VC++笔试题
2014/10/13 面试题
饲料采购员岗位职责
2013/12/19 职场文书
个人简历自我评价范文
2014/02/04 职场文书
揠苗助长教学反思
2014/02/04 职场文书
公司承诺书怎么写
2014/05/24 职场文书
团队队名口号大全
2014/06/06 职场文书
班级班风口号大全
2015/12/25 职场文书