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 相关文章推荐
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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代码
2008/09/10 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python k-近邻算法实例分享
2014/06/11 Python
python 性能优化方法小结
2017/03/31 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
详解python算法之冒泡排序
2019/03/05 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python函数生成器原理及使用详解
2020/03/12 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
学校采购员岗位职责
2014/01/02 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技