--@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个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- 素数个数的位数<Math>
小明是一个聪明的孩子,对数论有着很浓烈的兴趣.他发现求1到正整数10^n (10的n次方)之间有多少个素数是一个很难的问题,该问题的难点在于决定于10^n 值的大小. 告诉你n的值,并且用ans表示小 ...
- 如何做好移动安全(梆梆加固后的APK破解提取dex)
智能手机的普及将移动互联网的发展推到了一个让所有人都为之兴奋的高度,我想即使是以商业眼光见长的“苹果教父”乔布斯也不会料想到短短几年时间,智能手 机就已经成为了所有人离不开的商业产品,各种商业应用层出 ...
- HDU 1882 Strange Billboard（状态压缩+转置优化）
状态压缩,我们枚举第一行的所有状态,然后根据第一行去转变下面的行,枚举或者深搜直到最后最后一行,可以判断是不是所有的1都可以全部转换为0,记录所有的解,输出最小的一个就可以. 这里有一个很重要的优化, ...
- android KeyEvent for dot "."
android连接了4x4的物理按键,需要映射".". 在linux驱动层注册了按键KEY_DOT, 写android的app的时候却没有对应的宏KEYCODE_DOT.只有KEY ...
- composer 的快速安装
Packagist 镜像 请各位使用本镜像的同学注意: 本镜像已经依照 composer 官方的数据源安全策略完全升级并支持 https 协议!请各位同学 按照下面所示的两个方法将 http://pa ...
- 强制修改mysql 中root的密码
/etc/init.d/mysqld stop (service mysqld stop )/usr/bin/mysqld_safe --skip-grant-tables另外开个SSH连接[ro ...
- mac ox 配置java和maven
参考http://www.cnblogs.com/iOS-mt/p/5726380.html 以及http://blog.csdn.net/done58/article/details/5113805 ...
- HDU 4081 Qin Shi Huang's National Road System 次小生成树变种
Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- PHP Markdown 解析器Parsedown
PHP Markdown 解析器Parsedown http://parsedown.org/demo
- python+django+bootstrap
python install django 置环境变量,将这个目录添加到系统环境变量中: C:\Python36\Lib\site-packages\django\ cmd下测试: 1.输入pytho ...