AngularJs $templateCache 和 $templateRequest 模板缓存

简介: $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索。你可以直接将模板标签加载到缓存中,或者通过$templateCache服务。 通过script标签: This is the content of the template 备注:script标签模板不需要包含在文档头部。

$templateCache

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

通过script标签

<script type=”text/ng-template” id=”template.html”>

<p>This is the content of the template</p>

</script>

备注:script标签模板不需要包含在文档头部。但他必须在$rootElement下,不然模板将会被忽略。

通过$templateCache服务:

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
    <!--<div ng-include="'templateId.html'"></div>-->
    <div ng-bind-html="ctrl.text"></div>
  </div>
  (function () {
    angular.module("Demo", [])
    .run(["$templateCache",templateCache])
    .controller("testCtrl", ["$templateCache","$sce",testCtrl]);
    function templateCache($templateCache){
      $templateCache.put('templateId.html', '<a>This is the content of the template</a>');
    }
    function testCtrl($templateCache,$sce) {
        var tpl = $templateCache.get('templateId.html');
        tpl = $sce.trustAsHtml(tpl);
        this.text = tpl;
    };
  }());

在上面调用模板的代码中,可以使用controller里的代码调用缓存里的模板,但是需要注意的是,需要使用$sce转成受信任的html插入代码,所以这里需要注入$sce服务。而且这边不止可以使用js调用,也可以直接在html里标签里使用ng-include调用。

$templateRequest

$templateRequest服务运行进行安全检测,然后使用$http下载被提供的模板,成功后,将内容存储在$templateCache里。如果HTTP请求失败或HTTP请求的响应数据是空的,将抛出个$compile错误(通过设置该函数的第二个参数为true)。该注意的是,$templateCache的内容是可信的,所以调用$sce.getTrustedUrl(tpl)是省略的,当tpl的类型是字符串并且$templateCache具有匹配的项。

使用:$templateRequest(tpl,[ignoreRequestError]);

tpl:字符串或者TrustedResourceUrl,HTTP请求URL的模板。

ignoreRequestError:boolean值,当请求失败或模板为空时,是否忽略该异常。

使用代码:

  (function () {
    angular.module("Demo", [])
    .run(["$templateCache",templateCache])
    .controller("testCtrl", ["$templateRequest","$sce",testCtrl]);
    function templateCache($templateCache){
      $templateCache.put('templateId.html', '<a>This is the content of the template</a>');
    }
    function testCtrl($templateRequest,$sce) {
        var vm = this;
        $templateRequest("templateId.html").then(function(html){
            vm.text = $sce.trustAsHtml(html);
        })
    };
  }());
相关文章
|
存储 缓存 Linux
Ansible最佳实践之 AWX 启用facts缓存和模板问卷调查
写在前面 分享一些 AWX 启用facts缓存和模板问卷调查的笔记 博文内容涉及: 启动facts缓存相关配置Demo 启用模板调查来设置变量demo 食用方式: 需要了解 Ansible 理解不足小伙伴帮忙指正
206 0
Ansible最佳实践之 AWX 启用facts缓存和模板问卷调查
|
Web App开发 缓存 PHP
去掉phpcms的模板缓存
去掉phpcms的模板缓存 最近在使用phpcms做个简单的东西,由于太简单了,所以直接在ftp上调试了,但是上传了模板文件,但是前台一直不刷新,都到要缓存目录下去删除生成的缓存php,来回操作几次感觉好烦,但是在网上没有找到合适的文章来关掉他,所以就简单粗爆地,先干掉缓存了 global.func.php中有函数名为 function template($module = 'c
1286 0
|
Web App开发 存储 缓存
AngularJs $cacheFactory 缓存服务
可能之前的api写的有些枯燥吧,因为不烧脑,不需要很多逻辑思维来做处理,那么之后的文章会有趣很多,慢慢的开始烧脑了,准备好大量脑细胞的死亡吧~   先来篇简单的缓存服务。 本文将api文档里的$cacheFactory和 $cacheFactory.Cache 放到一起学习,其实就差不多的东西。
1004 0
|
1月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(一)
数据的存储--Redis缓存存储(一)
|
1月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(二)
数据的存储--Redis缓存存储(二)
数据的存储--Redis缓存存储(二)
|
1月前
|
消息中间件 缓存 NoSQL
Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。随着数据增长,有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法:1)使用 Redis 命令与重定向;2)利用 Redis 的 RDB 和 AOF 持久化功能;3)借助第三方工具如 `redis-dump`。每种方法均附有示例代码,帮助你轻松完成数据导出任务。无论数据量大小,总有一款适合你。
74 6
|
7天前
|
缓存 NoSQL 关系型数据库
大厂面试高频:如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
本文详解缓存雪崩、缓存穿透、缓存并发及缓存预热等问题,提供高可用解决方案,帮助你在大厂面试和实际工作中应对这些常见并发场景。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
|
9天前
|
存储 缓存 NoSQL
【赵渝强老师】基于Redis的旁路缓存架构
本文介绍了引入缓存后的系统架构,通过缓存可以提升访问性能、降低网络拥堵、减轻服务负载和增强可扩展性。文中提供了相关图片和视频讲解,并讨论了数据库读写分离、分库分表等方法来减轻数据库压力。同时,文章也指出了缓存可能带来的复杂度增加、成本提高和数据一致性问题。
【赵渝强老师】基于Redis的旁路缓存架构
|
17天前
|
缓存 NoSQL Redis
Redis 缓存使用的实践
《Redis缓存最佳实践指南》涵盖缓存更新策略、缓存击穿防护、大key处理和性能优化。包括Cache Aside Pattern、Write Through、分布式锁、大key拆分和批量操作等技术,帮助你在项目中高效使用Redis缓存。
96 22