Ng-template寄宿方式
如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉。对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿,也可以选择angular的ng-template 放在view的page之上,抑或也可以讲html打成一个js文件和directive 的js文件合并在一起发布。
对于直接寄宿在web容器.
这很简单,直接放在jetty,tomcat,iis, 抑或node express public目录下。这里没什么可以多说的,所以我们跳过。
angular ng-template模板:
代码如下:
<script type="text/ng-template" id="/tpl.html">Content of the template.</script>
这将会在angular的compile时候解析,angular将会把它放在angular的$templateCache 中。
对于$templateCache,如其名 这是angular对模板的缓存的service。在启用了$templateCache的$http ajax请求, angular将会首先在$templateCache中查找是否有对此url的缓存:
$templateCache.get('templateId.html')
如果存在缓存,着angular将会直接用缓存中获取,并不会在发送一次ajax。 对于所有的指令和模板angular默认启用了templateCache。
这在于angular所处理的模式开发很有关系的。我们经常提到的SPA(single page application) 我们把view的显示处理等表现逻辑推到了前段,而后端提供只与数据有关的soap/restful service 这样对于一个应用程序业务逻辑来说不变的是处理数据的业务逻辑,这份逻辑你可以共享在不管前端是mobile app 或者是浏览器,或者winform gui的图形化程序,因为对于同一个业务这是不变的。将view的分离推到各自的客户端 将是更好的解决方案。
回到angular $templateCahce,对于一个应用程序view的分离,之后在对于当前的应用程序平台,html/js/css 这类资源是静态的,最好是不变的,那么你可以自由的缓存在客户端,减少服务器的交互,以及为了更大的性能追求,我们 可以把这类静态资源放在Nginx这里反向代理或者CDN上,让我们的程序获取更大的性能和扩展空间。
回到angular的ng-html2js:
有了上边对于$templateCache的理解,那你应该很容易理解html2js的方式了,与ng-template不同的 是ng-template是angular在compile的时候自动加入$templateCache的,html2js是我们在开发 时候利用build自己放入$templateCache。
angular.module('myApp', []).run(function($templateCache) {$templateCache.put('templateId.html','This is the content of the template');});
形如上面的输出,将html文件打成一个js文件。
这你也许在angular的单元测试karma unit test中看见过, karma-ng-html2js-preprocessor ,还有如果你也希望在build时候做到如此,那么你可以使用grunt plugin grunt-html2js.
但使用grunt plugin的前提是你在你的项目中引入的grunt build的work flow,那么你可以在gruntfile.js中几行代码轻松的搞定。但是如果 你和我一样使用的是java的maven或者是gradle 作为build,那么你可以尝试博主的maven pluginnghtml2js. 使用方式如下:
<plugin><groupId>com.github.greengerong</groupId><artifactId>nghtml2js</artifactId><version>0.0.3</version><configuration><module>demo.template</module><html>${project.basedir}</html><extensions><param>tpl</param><param>html</param></extensions></configuration><executions><execution><id>nghtml2js</id><phase>generate-resources</phase><goals><goal>run</goal></goals></execution></executions>
</plugin>
转载于:https://www.cnblogs.com/zhepama/p/3753531.html
Ng-template寄宿方式相关推荐
- ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...
- cannot bind to cxOutlet since it is not a known property of ng template
我在SAP Spartacus处于运行状态(即ng serve)始终处于运行状态时,进行代码热修改,经常遇到此类错误消息 退出ng serve,重新执行即可: 更多Jerry的原创文章,尽在:&quo ...
- 1.1.2 以Web Host方式寄宿Web API
采用Web Host方式寄宿Web API的宿主程序WebHost是一个空的ASP.NET应用,除了让它引用定义ContactsController项目的WebApi 我们还需要引用几个必须的程 ...
- 1.1.3 以Self Host方式寄宿Web API
寄宿Web API不一定需要IIS的支持,我们可以采用Self Host的方式使用任意类型的应用程序(控制台.Windows Forms应用.WPF)作为宿主. 对于SelfHost这样一个空的控制台 ...
- Wcf 基础教程 服务寄宿之 Windows 服务寄宿
wcf的寄宿方式多种多样,今天我们一起来探讨一下windows 服务的寄宿方式,其实明白了控制台的寄宿方式,在windows下的寄宿方式也是一样,只不过是操作方式有点区别.编程代码基本是一样的. 我们 ...
- WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效...
WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效 原文:WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的Bas ...
- C++ 可变索引模板 和 template template
可变索引模板 某些情况下,我们需要指定参数的索引并输出,此时可以选择可变索引模板,只要支持[]操作的,都可以执行可变索引模板.下面给出代码实例: #include <iostream> # ...
- 使用Angular cli(ng generate)创建组件、服务、类、路由、指令、管道
日常angular开发中,相信不少人在创建新组件时,普遍会采用复制粘贴的方式创建新的组件或服务等.其实可以采用ng generate的方式快速创建组件.服务.类.路由等. 在使用angular cli ...
- vue中class类名绑定属性的方式归纳总结
通过class类名,来给元素绑定属性.绑定class属性有以下几种方式 <template><div><!-- 方式一:放置字符串 --><p class=& ...
最新文章
- 数模学习笔记——微分方程(传染病模型)
- OpenV P N + AD(Ldap) + GoogleAuth认证安装
- docker+httpd的安装
- 主机Ping扫描自动化工具
- [react] react的书写规范有哪些
- Error generating final archive: Debug Certificate expired on 的错误解决方法
- dede 验证码不显示 vdimgck.php,织梦(dedecms)后台登录验证码不显示或不正常的解决方法...
- 打开VS项目时出错 MSBuild。。。
- jsdroid 教程_服装制版教程如何利用紧身胸衣来制作无袖服装417才智服装
- 微信PC版怎么安装旧版本
- 【UL 2272 、 UL 2849】电动自行车美国UL认证电动自行车EN15194欧盟EN17128轻型电动车新标准
- xcode6更新证书错误:No matching provisioning profiles found 解决方案
- 基于区块链技术实现“资产通证化”
- 彩票预测应该用什么神经网络
- 高频交易(二)浅谈高频交易中比较成熟的一些交易策略
- 如何用光盘自动安装win7操作系统
- 阿里程序员试用期被淘汰,原因竟是?
- missing iso 9660 image the installer has tried to mount image #1
- Rsync用于数据备份
- 2021西邮linux兴趣小组纳新题解