如果你是一个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>

ng-template寄宿方式的更多相关文章

  1. （转）WCF开发框架形成之旅---WCF的几种寄宿方式

    WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为调用者方便.高效提供服务调用.本文分别对这几种方式进行详 ...

  2. WCF ：IIS寄宿方式的Web地址、BaseAddress和EndPoint Address的关系

    对于在IIS中通过W3SVC或WAS寄宿的WCF Service,其在浏览器中显示的地址(Web地址),与其配置文件中的BaseAddress和EndPoint Address有什么关系呢?让我们来分 ...

  3. WCF寄宿方式

    WCF开发框架形成之旅---WCF的几种寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为调用者 ...

  4. WCF开发框架形成之旅---WCF的几种寄宿方式

    WCF开发框架形成之旅---WCF的几种寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为调用者 ...

  5. ASP.NET Web API 入门 （API接口、寄宿方式、HttpClient调用）

    一.ASP.NET Web API接口定义 ASP.NET Web API默认实现了Action方法和HTTP方法的映射,Action方法方法名体现了其能处理的请求必须采用的HTTP方法 二.寄宿方式 ...

  6. 微软 WCF的几种寄宿方式，寄宿IIS、寄宿winform、寄宿控制台、寄宿Windows服务

    WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为调用者方便.高效提供服务调用.本文分别对这几种方式进行详 ...

  7. [转]WCF的几种寄宿方式

    转自:WCF开发框架形成之旅---WCF的几种寄宿方式 WCF寄宿方式是一种非常灵活的操作,可以在IIS服务.Windows服务.Winform程序.控制台程序中进行寄宿,从而实现WCF服务的运行,为 ...

  8. AngularJS ngTemplate寄宿方式 模板缓存 $templateCache

    AngularJS的指令中经常定义模板(template或templateUrl),可以选择将Html模板直接寄宿在WEB容器中,如Tomcat.IIS.Nginx.NodeJs Express,也可 ...

  9. WCF学习之三， 寄宿方式 代码，配置文件

    可以通过代码或者配置文件寄宿WCF服务,在使用过程中的一些心得,记录一下,方便后续查阅. 预备知识,几个地址的作用 1. behavior.HttpGetUrl  定义元数据的地址,如果不定义基地址, ...

随机推荐

  1. cookie，session原理，以及如何使用chrome查看。

    首先,先补充下chrome浏览器的使用. 1.1.php源码: <?php $cookieDomain = '.elf.com'; setcookie(, '/', $cookieDomain) ...

  2. Python list列表的排序

    当我们从数据库中获取一写数据后,一般对于列表的排序是经常会遇到的问题,今天总结一下python对于列表list排序的常用方法: 第一种:内建函数sort() 这个应该是我们使用最多的也是最简单的排序函 ...

  3. jdk1.8下载安装

    jdk8环境变量 jdk8图解安装 java8安装   1 2 3 4 5 6 7 分步阅读 JDK8 是JDK的最新版本,加入了很多新特性,如果我们要使用,需要下载安装: JDK8在windows ...

  4. Shell--用户配置

    vim /etc/profileexport PS1='\[\e[1;33m\]\h\[\e[m\] \t [\[\e[1;36m\]\w\[\e[m\]] [\u] '   export LANG= ...

  5. hashcode深入理解

    带着问题去理解: 1. Object类HashCode方法是如何实现的,和String类有什么区别? 2.HashCode和Equals之间的关系? 一.hashCode作用 hashCode方法返回 ...

  6. idea 从github下载项目提示 file name too long 的解决方案

    1.找到git shell命令行 2运行如下命令 git config --global core.longpaths true 附地址https://github.com/Strider-CD/st ...

  7. 上传App Store成功后，无法构建版本解决方法

    最近iOS10出来了,Xcode也跟着升级到了8,想着App做个更新,于是修改好了代码打算上传新包,无奈总是发现构建不了新版本.这种情况是因为苹果更重视用户的隐私,知道原因就能想到对策了,就是在pli ...

  8. [转]JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误

    原文引自: http://blog.csdn.net/castle07/article/details/8553704 今天尝试使用JUnit,下载了最新的JUnit版本,是4.11,结果尝试使用发现 ...

  9. 『TCP/IP详解——卷一：协议』读书笔记——17

    2013-08-27 15:37:42 6.5 ICMP端口不可达差错 端口不可达报文是ICMP差错报文的一种,它是ICMP不可达报文中的一种,以此来看一看ICMP差错报文中所附加的信息.使用UDP来 ...

  10. linux 匹配字符串是否为数字

    #!/bin/bash ## 方法1 a=1234;echo "$a"|[ -n "`sed -n '/^[0-9][0-9]*$/p'`" ] &&a ...