--@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个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
随机推荐
- 关于Application.Lock…Application.Unlock有什么作用？
因为Application变量里一般存储的是供所有连接到服务器的用户共享的信息(就像程序中所说的 "全局变量 "), 由于是全局变量,所以就容易出现两个或者多个用户同时对这一变量进 ...
- kali系统安装
kali live 安装到U盘 http://www.backtrack.org.cn/thread-17197-1-1.html 用Live U盘安装Kali Linux http://cn.doc ...
- 3D动画效果照片墙demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...
- pscs6
http://wenku.baidu.com/link?url=cO03xdo_GQDdFdeYTDD36ZrjeHarUu4IN-fSEoFAnDXmd5W0yKvzkNWY_vOKKIaKbCdB ...
- decoder3_8
这两天回归书本,继续阅读书上的内容,此时的体会与刚开始学那会的体会是不一样的,比如3_8decoder,之前就认为可以用case来写,而书上有一种更简便的方式来描述,带给你新的思路,既然有新方式可以描 ...
- C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll，提示找不到指定模块
在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...
- WPF教程：依赖属性
一.什么是依赖属性 依赖属性就是一种自己可以没有值,并且可以通过绑定从其他数据源获取值.依赖属性可支持WPF中的样式设置.数据绑定.继承.动画及默认值. 将所有的属性都设置为依赖属性并不总是正确的解决 ...
- NIPS 2016论文：英特尔中国研究院在神经网络压缩算法上的最新成果
NIPS 2016论文:英特尔中国研究院在神经网络压缩算法上的最新成果 http://www.leiphone.com/news/201609/OzDFhW8CX4YWt369.html 英特尔中国研 ...
- CodeForces 660B Seating On Bus
模拟. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #inc ...
- jquery.validate.js 一个jQuery验证格式控件
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...