[AngularJS] Taking control of your templates using $templateCache

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

$templateCache mainly can use two methods:

  • get(id)
  • put(id, "your html code here")
angular.module(‘app‘, [])
    .directive(‘myButton‘, function () {
        return {
            templateUrl: ‘timestamp‘
        }
    })
    .run(function ($templateCache) {
        $templateCache.put(‘timestamp‘, ‘<button>‘ + Date.now() + ‘</button>‘);
    });

or you can but your template in the <script> tag, then use templateCache.get() method:

<script type="text/ng-template" id="templateId.html">
  <button>Date.now()</button>
</script>
angular.module(‘app‘, [])
    .directive(‘myButton‘, function ($templateCache) {
        return {
            templateUrl: $templateCache.get(‘templateId.html‘)
        }
    })
时间: 2024-11-10 15:37:26

[AngularJS] Taking control of your templates using $templateCache的相关文章

AngularJs学习笔记--Understanding Angular Templates

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在templ

angularJs $templateCache

模板加载后,AngularJS会将它默认缓存到 $templateCache 服务中.在实际生产中,可以提前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了 $templateCache 服务允许 $http 服务缓存经过XHR的模板请求,这样它们就只会被请求一次.当一个模板被取到了,它的内容就会存储在 $templateCache 中,用模板路径作键.例如,当获取下面的实例指令时,它会请求 templateUrl 并且把模板的内容放在 $template

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

angularJS中如何写自定义指令

指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS表达式 正是指令使得angularJS这个框架变得强大,并且正如所见,我们可以自己创造新的指令 指令声明方法 angular.module('freefedApp',[]).directive(name,function(){ return { restrict: String, priority:

ExtJS和AngularJS比较

原文地址:http://www.techferry.com/articles/ExtJS-vs-AngularJS.html ExtJS 和AngularJS 是两种企业级的富 UI设计框架. 这篇文章从优势.架构.测试.性能等各个方面比较了 ExtJS 和 AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序,进行完整的性能测试.我们选取了同样的组件,规范了测试的流程,以保证测试的结果. ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构

angularjs跨域调取webservice

1.配置 web.config <webServices> <!--必须添加--> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices> <httpModules> <add name="JsonpHttpModule" type=

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht

从Knockout到Angular的架构演变

2008年第一次在WPF中使用MVVM模式之后,就一直热衷于耦合隔离.模块化与重构.UI和逻辑分离.单元测试以及后面的领域模型.谈及MVVM模式,自己也开发过一套框架,但没有长期更新和维护,所以索性就一直使用Prism和MVVM Light.到2012年的时候,看到HTML5的大行其道和Silverlight的衰落,果断把主要精力投入到ASP.NET MVC和Knockout的开发和研究当中,虽然Knockout比较容易上手且方便使用,但总觉得没有在WPF和Silverlight中使用MVVM那