angularJs $templateCache
模板加载后,AngularJS会将它默认缓存到 $templateCache 服务中。在实际生产中,可以提前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了
$templateCache 服务允许 $http 服务缓存经过XHR的模板请求,这样它们就只会被请求一次。当一个模板被取到了,它的内容就会存储在 $templateCache 中,用模板路径作键。例如,当获取下面的实例指令时,它会请求 templateUrl 并且把模板的内容放在 $templateCache 中:
angular.module('myApp')
.directive('notification', function($timeout) {
return {
restrict: 'A',
scope: { ngModel: '=' },
templateUrl: 'views/templates/notification.html',
}});
$templateCache 会 把 这 个 模 板 的 内 容 保 持 在 $templateCache('views/templates/notification.html') 中。如果已经预先在 $templateCache 中存放了测试所需的指令文件内容,就可以使用 $templateCache 来阻止在指令的单元测试中再产生请求。可以使用优秀的 karma-ng-html2js-preprocessor 包来把模板转换成可在测试中使用的Angular模块。
利用 $templateCache
在生产中部署应用时,我们都希望应用的加载尽可能快,以及尽可能做出响应。使用XHR加载模板可能会导致Web应用缓慢或者有卡顿的感觉。可以通过将模板包装为JavaScript文件,然后连同应用程序的其他部分一起传输的方式伪造模板缓存加载,而不是通过XHR提取模板。关于如何有效地包装模板的详细信息,请参考 $templateCache 工具: grunt-angular-templates 。
默认情况下,Angular无法从本地 $tempalteCache 中找到模板时,会通过XHR提取模板。当XHR请求很慢,或者模板很大时,它可能会对应用的用户体验造成很大的负面影响。
你可以通过“伪造” $templateCache 已经被填充的方式来避免这一延迟,这样Angular就不必从远程加载模板。可以在JavaScript中手动实现这个技巧,就像这样:
angular.module('myApp',[])
.run(function($templateCache) {
$templateCache.put('home.html', 'This is the home template');
});
现在,当Angular需要提取名为home.html的模板时,它会在 $templateCahce 中找到它,而无需从服务器提取。
angularJs $templateCache的更多相关文章
- AngularJs $templateCache 和 $templateRequest 模板缓存
$templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <scri ...
- 【js类库AngularJs】web前端的mvc框架angularjs之hello world
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- [AngularJS] Taking control of your templates using $templateCache
Using $templateCache for quickly retrieval from the cache after first time used. $templateCache main ...
- JS框架~Angularjs
无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...
- 转载:温故而知新 - AngularJS 1.x
原文: http://geek.csdn.net/news/detail/102405 温故而知新 - AngularJS 1.x
- Angular - - $templateCache 和 $templateRequest
$templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <scri ...
- [转][Angularjs]$http.post与$.post
本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇 ...
- AngularJS ngTemplate寄宿方式 模板缓存 $templateCache
AngularJS的指令中经常定义模板(template或templateUrl),可以选择将Html模板直接寄宿在WEB容器中,如Tomcat.IIS.Nginx.NodeJs Express,也可 ...
- angular 缓存模板 ng-template $templateCache
由于浏览器加载html模板是异步加载的,如果加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板. 使用angular缓存模板主要有三种方法: 方法一:通过script标签引入 <sc ...
随机推荐
- Python爬虫与数据分析之模块:内置模块、开源模块、自定义模块
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
- python练习题_04
import os def fetch(data): # print('\033[1;43m这是查询功能\033[0m') # print('\033[1;43m用户数据是\033[0m',data) ...
- jeecg之弹窗插件lhgdialog小结
说到弹窗,在jeecg中弹窗用到最多的地方无非是新增/编辑的弹窗. 1.列表页面新增编辑按钮触发的弹窗即lhgdialog,不论是add/update,最终走的都是curdtools.js中的crea ...
- Python学习日记 --day4
list列表: # # 列表 ''' # 增 # li = [1,'qwer','小明',[1,2,'qwe']] # print(li[0],type(li)) # 跟字符串的操作方法是一样的,返回 ...
- Cordova开发App使用USB进行真机调试
在使用cordova开发app时,不像浏览器中可以直接使用浏览器的开发者工具进行调试.为了看到app的显示效果, 一种是使用模拟器进行展示,一种是使用真机进行展示. 模拟器:可以使用Android s ...
- Linux一行命令处理批量文件
前言 最好的方法不一定是你最快能想到的.这里提供一种使用sed命令构造命令解决处理批量文件的技巧,供参考. 需求案例1 将当前目录下所有的0_80_91.txt.0_80_92.txt.0_80_93 ...
- 聊聊JMM
JMM是什么? JMM 全称 Java memory model ,直译过来就是Java内存模型,这里注意了,指到并不是JVM中的内存分布新生代.老年代.永久代这些,当然也不是 程序计数器(PC).j ...
- PHP拦截器之__set()与__get()的理解与使用方法
“一般来说,总是把类的属性定义为private,这更符合现实的逻辑. 但是,对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数“__get()”和“__set()”来获取和赋值 ...
- 接口测试之——Charles抓包及常见问题解决(转载自https://www.jianshu.com/p/831c0114179f)
简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用,安装Charl ...
- 用eclipse创建动态web项目手动生成web.xml方法
建一个web项目,后来在用到web.xml文件时,才发现项目创建时没有自动创建web.xml文件. 在创建的项目上单击右键,然后单击java EE Tools下的用红线圈住的地方,然后查看你的WEB- ...