本節書摘來自華章出版社《angularjs實戰》一 書中的第2章，第2.3節，作者：陶國榮，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
angular自身提供了一整套完整的模闆系統，配合$scope對象和資料雙向綁定機制，将頁面純靜态元素經過行為、屬性的添加和格式的轉換，最終變成在浏覽器中顯示的動态頁。
在模闆系統中，可以包含angular的指令、資料綁定、表單控件和過濾器，同時，在處理複雜程式時，可以建構多個模闆頁面作用于視圖層。在首頁中，再通過包含（include）的方式加載這些零散的模闆頁。這樣做的好處在于，一次定義可多處調用，增加代碼的重複使用，減少維護成本。
構模組化闆的内容是使用模闆功能的前提，一般通過下列幾種方式來實作。
直接在頁面中添加元素和angular指令，依賴控制器中建構的屬性和方式綁定模闆中的元素内容和事件，實作應用需求。
通過“type”類型為“text/ng-template”的
（3）頁面效果
執行html檔案2-9.html，最終實作的頁面效果如圖2-9所示。
（4）源碼分析
在本示例的源碼中，先添加一個“type”類型為“text/ng-template”的
在構模組化闆内容的過程中，有時需要反複将不同的資料加載到一個元素中，例如，通過
元素綁定一個數組的各成員。此時，可以使用“ng-repeat”指令，它的功能是根據綁定數組成員的數量，複制頁面中被綁定的元素，并在複制過程中添加元素相應的屬性和方法，通過這種方式，實作數組資料與元素綁定的過程。
在使用“ng-repeat”指令複制元素的過程中，還提供了幾個非常實用的專有變量，可以通過這些變量來處理顯示資料時的各種狀态。這些變量的功能分别如下。
$f?irst，該變量表示記錄是否是首條，如果是則傳回true,否則傳回false。
$last，該變量表示記錄是否是尾條，如果是則傳回true,否則傳回false。
$middle，該變量表示記錄是否是中間條，如果是則傳回true,否則傳回false。
$index，該變量表示記錄的索引号，其對應的值從0開始。
接下來，通過一個示例來示範使用“ng-repeat”指令複制元素的過程。
示例2-10 使用指令複制元素
（1）功能描述
在頁面中，通過元素顯示一個數組中的全部成員資料，并且在顯示資料時列出當條記錄是否為“首條”和“尾條”記錄的狀态資訊。
（2）實作代碼
建立一個html檔案2-10.html，加入如代碼清單2-10所示的代碼。
代碼清單2-10 使用指令複制元素
執行html檔案2-10.html，最終實作的頁面效果如圖2-10所示。
在本示例的源碼中，首先，在對應頁面的控制器代碼中，以$scope屬性的方式添加了一個名為“data”的數組，用作頁面中
元素綁定的資料源；然後，在頁面中添加
元素，并在該元素中再添加兩個
元素，第一個用于标題顯示，第二個用于綁定“data”數組内容。
在用于綁定“data”數組内容的第二個
元素中，調用angular中的“ng-repeat”指令完成資料與頁面元素的綁定。在綁定過程中，angular先周遊“data”數組，在周遊時複制一份
元素，并通過“stu”對象将控制器中的屬性和方法添加至該元素中，在周遊完成後便生成了與數組成員數量對應的
元素，并且在這些元素中也添加了需要顯示的内容和方法，進而最終實作以清單方式顯示集合資料的功能。
在通過“ng-repeat”指令複制元素過程中，可以通過表達式的方式直接調用angular提供的幾個專用的變量$f?irst、$middle、$last和$index。由于這些變量均傳回布爾值，是以，可以根據傳回的布爾值，再借助“?:”運算符轉成中文顯示的文字内容，實作的過程如本示例中的源碼所示。
在angular中，添加元素的樣式也非常簡單，概括起來可以通過下列幾種方式來進行。
（1）直接綁定值為css類别名稱的$scope對象屬性
這種方式的操作非常簡單，先在控制器中添加一個值為css類别名稱的屬性，然後在頁面元素的class或ng-class屬性值中，通過雙花括号方式綁定屬性名即可，如以下代碼。
上述代碼表示在控制器中添加了一個名為“red”的屬性，它的屬性值是名為“red”的css類别名。在添加完“red”屬性後，在頁面中可以通過下列代碼進行調用。
等價于下列代碼：
這種方式操作起來雖然簡單，但在控制器中定義css類别名稱，并不是angular所提倡的，我們在開發angular應用時，盡量保證控制器的代碼都是處理業務邏輯，并不涉及頁面元素。
（2）以字元串數組方式選擇性添加css類别名稱
這種方式将根據控制器中一個布爾類型的屬性值來決定頁面中元素添加的css樣式名，當該屬性值為true時，添加一個css樣式名，當屬性值為false值時，添加另外一個css樣式名。下列代碼添加一個名為“blnfocus”屬性，由它決定頁面中
元素的樣式。
接下來在頁面的
元素中添加ng-class屬性，并在屬性值中通過字元串數組方式來添加css類别名稱，代碼如下。
在上述代碼中，
的css樣式取決于“blnfocus”屬性值，當該值為true時，添加“red”樣式名，當該值為false時，添加“green”樣式名。這種方式隻能在兩種樣式中選擇一種，并且{}和[]順序不可颠倒。在{}中設定可選擇的兩種樣式名稱，在[]中放置控制樣式的屬性名。
（3）通過定義key/value對象的方式來添加多個css類别名稱
與前面介紹的兩種添加css類别名的方法相比，第三種方法的功能要強大很多，它可以根據控制顯示樣式的屬性值添加多個樣式名。例如，先添加兩個用于控制樣式顯示的“a”和“b”屬性，這兩個屬性的類型均為布爾型，代碼如下。
元素中，添加ng-class屬性。在設定屬性值時，通過定義key/value對象的方式來添加多個css樣式名，代碼如下。
在上述ng-class屬性值設定過程中，樣式名“red”和“green”分别為“key”值，屬性值“a”和“b”分别為對應的“value”值。當“value”屬性值為true時，則添加對應的“key”即css樣式名。是以，這種方式可以實作添加多種css樣式名稱，适合在處理複雜樣式時使用。
此外，在angular中，還有另外兩個用于添加樣式的頁面指令，分别為“ng-class-odd”和“ng-class-even”，這兩個樣式指令是專用于以清單方式顯示資料，對應奇數行與偶數行的樣式。
接下來，通過一個完整的示例來詳細介紹樣式在頁面中的使用。
示例2-11 添加元素樣式
在示例2-10的基礎之上，在樣式方面增加3個功能。首先，将第一個
元素中顯示的字型加粗；其次，添加“ng-class-odd”和“ng-class-even”兩個指令，實作清單的隔行變色的功能；最後，當單擊某行
的元素時，顯示相應的背景色。
建立一個html檔案2-11.html，加入如代碼清單2-11所示的代碼。
代碼清單2-11 添加元素樣式
執行html檔案2-11.html，最終實作的頁面效果如圖2-11所示。
在本示例的源代碼中，首次定義了名稱為“odd”、“even”、“bold”和“focus”的4個樣式，分别用于隔行時的兩種字型色、标題欄字型變粗和單擊某行時的背景色。
其次，在示例的控制器代碼中，除添加“data”數組集合外，再添加了一個“bold”屬性，用于指定加粗顯示字型時的樣式名。另外，還添加了一個帶參數的“li_click”方法，當調用該方法時，将“focus”屬性值設為傳入參數值。
再有，在示例的頁面代碼中，先通過雙花括号方式将第一個
元素的“ng-class”值與“bold”屬性值綁定，由于該值指定的是一個加粗時的樣式名，是以，在綁定後，
元素中的字型變粗；然後，使用“ng-class-odd”和“ng-class-even”樣式指令分别綁定奇數和偶數行的樣式名，實作隔行換色的功能；最後，在
元素的單擊事件中，将執行$scope對象中添加的“li_click()”方法，在該方法中将“$index”（行号值）作為實參傳給方法，并且将“focus”屬性值設定為“$index”值。是以，當單擊某行
元素時，“focus”屬性值将變為相應的“$index”值。
最後，在示例頁面
元素的“ng-class”樣式指令值中通過key/value對象的方式指定該元素需要添加的樣式。由于單擊
元素時，“$index”變量值和“focus”屬性值相同，也就是說，表達式“$index==focus”的傳回值為true。是以，“ng-class”樣式指令值變為“focus”，最終實作當單擊
元素時，添加背景樣式的頁面效果。
在angular中，可以通過“ng-show”“ng-hide”和“ng-switch”指令來控制元素隐藏與顯示的狀态，前兩個指令直接控制元素的顯示和隐藏狀态，當“ng-show”值為true或“ng-hide”值為false時，元素顯示，反之，元素隐藏。
後一個“ng-switch”指令的功能是顯示比對成功的元素，該指令需要結合“ng-switch-when”和“ng-switch-defalut”指令使用。在“ng-switch”指令中，當指定的“on”值與某個或多個添加“ng-switch-when”指令的元素比對時，這些元素顯示，其他未比對的元素則隐藏。如果沒有找到與“on”值相比對的元素時，則顯示添加了“ng-switch-defalut”指令的元素。
接下來，通過一個示例來示範控制元素隐藏或顯示狀态的過程。
示例2-12 控制元素的隐藏與顯示狀态
在頁面中，調用“ng-show”“ng-hide”和“ng-switch”指令綁定$scope對象的屬性值，控制
和
元素顯示或隐藏的狀态。
建立一個html檔案2-12.html，加入如代碼清單2-12所示的代碼。
代碼清單2-12 控制元素的隐藏與顯示狀态
執行html檔案2-12.html，最終實作的頁面效果如圖2-12所示。
在本示例的源代碼中，前兩個
元素分别添加了“ng-show”和“ng-hide”，并通過雙花括号綁定了“isshow”屬性和“ishide”屬性，這兩個屬性在控制器中添加時的值分别為true和false，是以，這兩個元素都将顯示在頁面中。
此外，在添加“ng-switch”指令的
元素中，由于“on”值綁定了“switch”屬性，而該屬性在控制器中添加時的值為3，并且在頁面中添加了“ng-switch-when”指令的
元素中，沒有找到“ng-switch-when”指令值為3的元素，是以，隻能顯示添加了“ng-switch-default”指令的
元素，即最後一行顯示内容為“更多…”的
元素，最終顯示效果如圖2-12所示。