--@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个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- Diamond Collector
Diamond Collector 题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining ...
- Mysql 中文乱码问题完美解决方案
MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin1 2.table的语系设定问题(包含character与collation) 3.客户端程式(例如 ...
- ScreenCaptureHtmlUnitDriver.java
https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-server/src/test/java/com/webautoma ...
- JS对象引用
对象和函数都是引用的关系(改变后者会改变前者) 但是下面这个列子情况不一样了.刚开始的时候 B 引用了 A的地址,后来B又重新赋值,新占了一个地址,A B俩的关系已经脱离. 那么有的时候,我们只有 ...
- ecos的model
表->dbschema->model 虚拟化model机制 在dbschema存在model不存在的情况下 很多mvc结构都这么来 model命名规则 {$app_name}_mdl_{$ ...
- Myeclipse配置优化
http://blog.csdn.net/chen_zw/article/details/7525277
- 【HighCharts系列教程】十、图例属性——legend
一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...
- 在Android上实现SSL握手（客户端需要密钥和证书），实现服务器和客户端之间Socket交互
Android的私钥和信任证书的格式必须是BKS格式的,通过配置本地JDK,让keytool可以生成BKS格式的私钥和信任证书,java本身没有BouncyCastle密库 服务端: Java代码 ...
- PAT (Advanced Level) 1024. Palindromic Number (25)
手动模拟加法高精度. 注意:如果输入数字的就是回文,这个时候输出0步. #include<iostream> #include<cstring> #include<cma ...
- office web apps部署（二）
1.安装composer 参考 http://docs.phpcomposer.com/00-intro.md 根据系统选择安装方式 修改php.ini 去掉extension=php_opens ...