AngularJS ng-template寄宿方式用法分析
本文实例讲述了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程序设计有所帮助。
相关文章
今天小编就为大家分享一篇angular4强制刷新视图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10![angular4自定义表单控件[(ngModel)]的实现](//img.jbzj.com/images/xgimg/bcimg1.png)
这篇文章主要介绍了angular4自定义表单控件[(ngModel)]的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Angular Material Icon使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Angular.js初始化之ng-app的自动绑定与手动绑定详解
这篇文章主要给大家介绍了关于Angular.js初始化之ng-app的自动绑定与手动绑定的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接操作 DOM 的情况下操纵应用程序的元素,本文给大家介绍了如何在 Angular 中使用 Renderer2,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2024-03-03
本文通过实例代码给大家介绍了angular实现下载安装包的功能以及基于angularjs代码实现锚点跳转的功能，需要的朋友参考下吧2017-09-09
本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下2016-07-07
本文主要介绍AngularJS ng-mousedown 指令,这里帮大家整理了ng-mousedown 指令的基本资料,并附代码示例,有需要的朋友可以参考下2016-08-08
这篇文章主要介绍了AngularJS全局警告框实现方法,结合实例形式分析了AngularJS全局警告框的实现步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
![angular4自定义表单控件[(ngModel)]的实现](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论