--@angularJS--模板加载之缓存模板demo
不用缓存模板的写法如下：
1、index.html：
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>directive-templateUrl</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是加载指令模板的总入口文件. -->
<div>
<!-- hello标签就代表了templateUrl中加载的模板碎片代码.注意：这样直接加载ff是没什么问题，chrome因为同源安全策略直接就不显示,解决办法是：用缓存模板(对象$templateCache) -->
<hello></hello>
</div>
</body>
<script src="hello.js"></script>
</html>
2、hello.js：
var myModule = angular.module("app",[]);
myModule.directive('hello',function(){
return {
restrict:'AE',
replace:true,
templateUrl:'helloTemplate.html'//helloTemplate.html文件表示的就是<div>Hi there</div>这一串html模板代码碎片文件,hello标签就代表这个模板
}
});
3、模板文件——helloTemplate.html：
<div>Hi there</div>
[解析]：
加载效果：ff页面显示Hi there.chrome页面空白
上面的注意部分已经说过,因为同源安全策略chrome并不显示模板文件，解决办法就是用缓存模板对象$templateCache来加载，那么我们下面来改造下js文件即可：
2、hello.js：
var myModule = angular.module("app",[]);
myModule.run(function($templateCache){
$templateCache.put("helloTemplate.html","<div>hello everyone.</div>");
});// 向缓存中存入模板文件，并用put()方法向模板文件写入<div>hello everyone.</div>这段代码.注意这段代码会覆盖模板文件原有的代码碎片
myModule.directive('hello',function($templateCache){
return {
restrict:'AE',
replace:true,
template:$templateCache.get("helloTemplate.html")// 用get()方法从缓存模板对象获取模板文件
}
});
[解析]：
加载效果：ff和chrome：页面均显示hello everyone.(原代码<div>Hi there</div>被覆盖)
--@angularJS--模板加载之缓存模板demo的更多相关文章
- freemarker模板加载TemplateLoader常见方式
使用过freemarker的肯定其见过如下情况: java.io.FileNotFoundException: Template xxx.ftl not found. 模板找不到.可能你会认为我明明指 ...
- angular模板加载 ----ng-template
Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 如果排版乱掉,请查阅https://www.zybuluo.com/ ...
- springMVC加载远程freemarker模板文件
在一个大网站里,有很多子域名,也就是有很多子系统,这些子系统由不同的团队负责,对整个网站的风格的风格至少得要是一致的(最基本的页头.页尾必须一致),这个时候得提供一份统一的页头.页尾以及公共的JS.c ...
- Django加载静态网页模板
Django加载静态网页模板 步骤: 第一步:在子系统blog根目录下新建模版目录templates,里面新建一个login.html <!DOCTYPE html> <html l ...
- velocity模板加载
http://hi.baidu.com/ly_dayu/item/828b09c5c3c5e547a8ba9409 velocity使用基本来说比较简单,但在加载模板时老出问题,很多初学者经常会遇到找 ...
- DevExpress XtraReport - 动态加载报表布局模板
XtraReport的报表模板文件是.repx,下面的代码演示动态加载报表布局模板. XtraReport mReport = new XtraReport(); mReport.LoadLayout ...
- wordpress模板加载顺序汇总
我们要创建一个新的wordpress模板需要先了解有哪些页面模板,这些页面模板的文件是什么?它们是怎么工作的?下面ytkah汇总了一些常用的wordpress模板结构方便大家查找 首页 首先WordP ...
- 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
- Expo大作战(十一)--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- （转）多个mapreduce工作相互依赖处理方法完整实例（JobControl）
多个mapreduce工作相互依赖处理方法完整实例(JobControl) 原文地址:http://mntms.iteye.com/blog/2096456?utm_source=tuicool&am ...
- POJ 2296 Map Labeler
二分答案 + 2-SAT验证,判断正方形是否相交写起来有点烦,思路还是挺简单的. #include<cstdio> #include<cstring> #include< ...
- Java中的随机数生成器：Random，ThreadLocalRandom，SecureRandom
Java中的随机数生成器:Random,ThreadLocalRandom,SecureRandom 文中的 Random即:java.util.Random,ThreadLocalRandom 即: ...
- Struts2--默认Action
何时使用: 访问的网页不存在, 显示错误页面, 或者显示主页. 有时存在一种情况, 就是找不到对应action 可以在struts.xml里设置一个默认的action <?xml versio ...
- WordPress主题制作第二天
<?php if(have_posts()): while(have_posts()): the_post(); <!-- the_title(); the_permalink(); th ...
- 数据降维技术（2）—奇异值分解（SVD）
上一篇文章讲了PCA的数据原理,明白了PCA主要的思想及使用PCA做数据降维的步骤,本文我们详细探讨下另一种数据降维技术—奇异值分解(SVD). 在介绍奇异值分解前,先谈谈这个比较奇怪的名字:奇异值分 ...
- Xcode的管理工具
Xcode插件管理工具Alcatraz Alcatraz 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具.它可以直接集成在Xcode的图形界面中,让你感觉就像在使用Xc ...
- Manacher 最长回文子串。
最长回文子串就是一个字符串的一个子串,他从左往右读和从右往左读是一样的. 可以用 Manacher 算法来求,他的复杂度是 O(n) . 可以看这篇文章 http://blog.csdn.net/yw ...
- $.extend 用法
此处参考了RascallySnake 的博客 $.extend(boolean, dest, src1, src2, src3) 第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致 ...
- GCJ 2008 APAC local onsites C Millionaire
时间复杂度很大.dp[i][j]表示第i轮 j这种状态的概率. #include<cstdio> #include<cstring> #include<cmath> ...