模板加载后,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的更多相关文章

  1. AngularJs $templateCache 和 $templateRequest 模板缓存

    $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <scri ...

  2. 【js类库AngularJs】web前端的mvc框架angularjs之hello world

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  3. [AngularJS] Taking control of your templates using $templateCache

    Using $templateCache for quickly retrieval from the cache after first time used. $templateCache main ...

  4. JS框架~Angularjs

    无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...

  5. 转载:温故而知新 - AngularJS 1.x

    原文: http://geek.csdn.net/news/detail/102405 温故而知新 - AngularJS 1.x

  6. Angular - - $templateCache 和 $templateRequest

    $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <scri ...

  7. [转][Angularjs]$http.post与$.post

    本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇 ...

  8. AngularJS ngTemplate寄宿方式 模板缓存 $templateCache

    AngularJS的指令中经常定义模板(template或templateUrl),可以选择将Html模板直接寄宿在WEB容器中,如Tomcat.IIS.Nginx.NodeJs Express,也可 ...

  9. angular 缓存模板 ng-template $templateCache

    由于浏览器加载html模板是异步加载的,如果加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板. 使用angular缓存模板主要有三种方法: 方法一:通过script标签引入 <sc ...

随机推荐

  1. 李清华201772020113《面向对象程序设计(java)》第十一周学习总结

    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: (2) 了解java集合框架体系组成: (3) ...

  2. java面试题复习(三)

    21.静态嵌套类和内部类的不同? 答:静态嵌套类是被声明为静态(static)的内部类,它可以不依赖于外部类实例被实例化.而通常的内部类需要在外部类实例化后才能实例化.//还是考的static的知识 ...

  3. CSS设计中的错误大整理!

    如果有人发明时间机器,那应该将这些错误纠正,不然可把前端程序猿们给还惨了.大家一起看看都有哪些CSS规则应该完善. (CSS 代码) white-space: nowrap 应该 white-spac ...

  4. laravel5.6中jquery+ajax分页

    public function shows(Request $request){ $p=$request->get("page"); $page=empty($p)?:$p; ...

  5. Jenkins+Git+Maven构建并部署war包到tomcat

    主要思路:1.jenkins从git中拉取项目源码:jenkins使用maven构建并将生成的war部署到tomcat容器下. 环境:Centos7.Maven3.5.3.git(单机) 安装Git ...

  6. (英文版)VScode一键生成.vue模板

    1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...

  7. Windows 7升级1月更新汇总后导致SMBv2网络无法正常工作

    在本月的补丁星期二活动日中,微软面向Windows 7.Windows 2008 R2服务器系统推出了KB4480970的月度更新汇总.然而根据部分用户反馈,在安装该更新之后导致系统的网络设置无法正常 ...

  8. 2017-11-11 Sa Oct 消参

    2017-11-11 Sa Oct 消参 Prior versions: 2017-11-04 Sa Oct 消参 2017-11-10 Fr Oct 消参 2017-11-04 Sa $ P(-3, ...

  9. k8s 代码生成

    https://blog.openshift.com/kubernetes-deep-dive-code-generation-customresources/ # 代码生成的工作目录,也就是我们的项 ...

  10. IO输入输出流

    在Java中进行文件的读写,Java IO流是必备的知识. IO流指 的是输入输出流,用来处理设备上的数据.这里的设备指硬盘,内存,键盘录入,网络传输等. 按处理数据类型来分:字节流和字符流. 按流的 ...