AngularJS ng-template寄宿方式用法分析


Posted in Javascript onNovember 07, 2016

本文实例讲述了AngularJS 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 plugin  nghtml2js. 使用方式如下:

<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>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 #Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 #Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 #Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 #Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 #Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 #Javascript
You might like
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php数组去重的函数代码
2013/02/03 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
小班开学寄语
2014/04/04 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
国际贸易系求职信
2014/08/09 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
初中同学会活动方案
2014/08/22 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript