快捷導(dǎo)航

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

更新時(shí)間：2016年11月07日 10:57:28 作者：破狼

這篇文章主要介紹了AngularJS ng-template寄宿方式用法,結(jié)合實(shí)例形式分析了ng-template模板的相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS ng-template寄宿方式用法。分享給大家供大家參考，具體如下：

如果你是一個(gè)angular的開發(fā)者的話，對(duì)于ng-html2js你應(yīng)該很熟悉。對(duì)于angular的指令，我們經(jīng)常需要定義模板( directive template/templateUrl),你可以選擇講html page 放在真正的的web容器中寄宿，也可以選擇angular的ng-template 放在view的page之上，抑或也可以講html打成一個(gè)js文件和directive 的js文件合并在一起發(fā)布。

對(duì)于直接寄宿在web容器.

這很簡(jiǎn)單，直接放在jetty，tomcat，iis，抑或node express public目錄下。這里沒(méi)什么可以多說(shuō)的，所以我們跳過(guò)。

angular ng-template模板:

代碼如下:

<script type="text/ng-template" id="/tpl.html">
   Content of the template.
</script>

這將會(huì)在angular的compile時(shí)候解析，angular將會(huì)把它放在angular的$templateCache 中。

對(duì)于$templateCache，如其名這是angular對(duì)模板的緩存的service。在啟用了$templateCache的$http ajax請(qǐng)求， angular將會(huì)首先在$templateCache中查找是否有對(duì)此url的緩存：

$templateCache.get('templateId.html')

如果存在緩存，著angular將會(huì)直接用緩存中獲取，并不會(huì)在發(fā)送一次ajax。對(duì)于所有的指令和模板angular默認(rèn)啟用了templateCache。

這在于angular所處理的模式開發(fā)很有關(guān)系的。我們經(jīng)常提到的SPA(single page application) 我們把view的顯示處理等表現(xiàn)邏輯推到了前段，而后端提供只與數(shù)據(jù)有關(guān)的soap/restful service 這樣對(duì)于一個(gè)應(yīng)用程序業(yè)務(wù)邏輯來(lái)說(shuō)不變的是處理數(shù)據(jù)的業(yè)務(wù)邏輯，這份邏輯你可以共享在不管前端是mobile app 或者是瀏覽器，或者winform gui的圖形化程序，因?yàn)閷?duì)于同一個(gè)業(yè)務(wù)這是不變的。將view的分離推到各自的客戶端將是更好的解決方案。

回到angular $templateCahce，對(duì)于一個(gè)應(yīng)用程序view的分離，之后在對(duì)于當(dāng)前的應(yīng)用程序平臺(tái)，html/js/css 這類資源是靜態(tài)的，最好是不變的，那么你可以自由的緩存在客戶端，減少服務(wù)器的交互，以及為了更大的性能追求，我們可以把這類靜態(tài)資源放在Nginx這里反向代理或者CDN上，讓我們的程序獲取更大的性能和擴(kuò)展空間。

回到angular的ng-html2js：

有了上邊對(duì)于$templateCache的理解，那你應(yīng)該很容易理解html2js的方式了，與ng-template不同的是ng-template是angular在compile的時(shí)候自動(dòng)加入$templateCache的，html2js是我們?cè)陂_發(fā) 時(shí)候利用build自己放入$templateCache。

angular.module('myApp', [])
 .run(function($templateCache) {
   $templateCache.put('templateId.html',
     'This is the content of the template'
   );
 });

形如上面的輸出，將html文件打成一個(gè)js文件。

這你也許在angular的單元測(cè)試karma unit test中看見過(guò)， karma-ng-html2js-preprocessor ，還有如果你也希望在build時(shí)候做到如此，那么你可以使用grunt plugin grunt-html2js.

但使用grunt plugin的前提是你在你的項(xiàng)目中引入的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>

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: