AngularJS (8) directive templateUrl

作者： Tshuà Bûn-lī (蔡文莉) - 8月 09, 2014

本篇完整程式碼請看(Plunkr)

當HTML很長或是有重複的內容時，為了讓HTML更好管理、更有組織，所以將很長的內文或是重複的內容抽出放到樣版(template)裡，讓HTML模組化。

AngularJS的宣告標籤有個參數，templateUrl，指定要匯入哪份樣版到HTML頁面。而且，宣告標籤的位置，就決定了樣版匯入到HTML的地方。

舉個例子，我們想在網頁第一頁的開頭顯示一段歡迎文，讓網友覺得親切。

Hello, everyone.
Welcome to Titiau.

如果是一般的HTML寫法：

<body ng-app="app1">
    <p>
       Hello, everyone.<br/>
       Welcome to Titiau.<br/>
    </p>
</body>

問題是，這個歡迎文可能很常用，總不能一直複製貼上吧？

<body ng-app="app1">
    <p>
       Hello, everyone.<br/>
       Welcome to Titiau.<br/>
    </p>
    ...
    <p>
       Hello, everyone.<br/>
       Welcome to Titiau.<br/>
    </p>
    ... 
    <!--看起來好像蠻冗長的？^_^"-->
</body>

所以我們不直接寫死在第一頁，而是把歡迎文字寫到一個樣版。

歡迎文字的樣版

greet.html

Hello, everyone.<br/>
Welcome to Titiau.<br/>
<br/>

JS

為了能夠匯入歡迎樣版到第一頁，我們得定義一個連結到歡迎樣版的宣告標籤。

var app = angular.module("app1",[]);
app.directive("myGreet", function(){
  return {
    restrict:'E',
    templateUrl:'greet.html'
  };
});

templateUrl:'greet.html' 讓myGreet連結到歡迎樣版。

※ "myGreet" 對應到HTML的呼叫方法是<my-greet>標籤

第一頁

我們想在開頭顯示兩次歡迎文，在開頭呼叫<my-greet>標籤後，就能輕鬆匯入歡迎樣版嚕！是不是比一般的HTML寫法簡短很多呢？

index.html

<body ng-app="app1">
    <my-greet></my-greet>
    <my-greet></my-greet>
</body>

顯示

Hello, everyone.
Welcome to Titiau.

Hello, everyone.
Welcome to Titiau.

搜尋此網誌

Ti-Tiâu