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获得地址栏参数的两种方法
Nov 08 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JavaScript中的 new 命令
May 22 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
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JS常用算法实现代码
2016/11/14 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
python实现单机五子棋
2020/08/28 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
服务质量承诺书
2014/03/27 职场文书
协议书样本
2014/04/23 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
施工安全员岗位职责
2015/04/11 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书