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模闆:

代碼如下:

1

2

3

4

5

<code>&lt;script type=</code><code>"text/ng-template"</code> <code>id=</code><code>"/tpl.html"</code><code>&gt;</code>

<code>     </code><code>content of the template.</code>

<code>   </code><code>&lt;/script&gt;</code>

這将會在angular的compile時候解析，angular将會把它放在angular的$templatecache 中。

如果存在緩存，着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。

6

<code>angular.module(</code><code>'myapp'</code><code>, [])</code>

<code>  </code><code>.run(</code><code>function</code><code>($templatecache) {</code>

<code>      </code><code>$templatecache.put(</code><code>'templateid.html'</code><code>,</code>

<code>          </code><code>'this is the content of the template'</code>

<code>      </code><code>);</code>

<code>  </code><code>});</code>

        形如上面的輸出，将html檔案打成一個js檔案。