《AngularJS深度剖析與最佳實踐》一2.5 視圖

本節書摘來自華章出版社《angularjs深度剖析與最佳實踐》一書中的第2章，第2.5節，作者 雪狼 破狼 彭洪偉，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視

我們有了子產品和控制器之後，内容和互動邏輯就已經基本确定了，接下來我們就得把它們展示給使用者了，這時就用到“視圖”（view）。

css并不在angular的範圍内，在實踐中，常常結合一套成熟的css架構來做，比如bootstrap就可以和angular結合得非常好。

angular中實作視圖的主體是模闆。最常見的模闆形式當然是html，也有通過jade等中間語言編譯為html的。模闆中包括靜态資訊和動态資訊，靜态資訊是指直接寫死（hard code）在模闆中的，而動态資訊則是對scope中内容的展示。

展示動态資訊的方式有兩種：

綁定表達式：形式如{{username}}，綁定表達式可以出現在html中的文本部分或節點的屬性部分。

指令：形式如，事實上任何指令都可以用來展示動态資訊，展示的方式取決于指令的内在實作邏輯。

視圖中的綁定表達式或指令中用到的變量或函數都是$scope中的一個屬性或方法，上面兩個表達式綁定的都是$scope.username，但是也可以綁定到方法，如$scope.getfirstname()。綁定到方法是一種很常用的方式，但是如果使用不當，也可能導緻一些很難追查的bug。特别要注意不要在方法中傳回一個新對象或新數組，否則會出現“10 $digest iterations reached.”錯誤。

另一個要點是，在表達式中無法直接使用window對象下的全局屬性或方法。angular這樣的設計可以確定視圖的局部性，以免受到意料之外的幹擾而出現bug。如果确實需要調用，請在controller中簡單包裝一層。

除了展示資訊之外，常常還需要對資訊進行格式化，比如把一個date對象格式化為“年-月-日”格式或“年-月-日　時：分：秒”格式。一個分層清晰的系統，在scope中通常是沒有格式的概念的，想要顯示成什麼格式是視圖層的事情。這樣的設計可以提高model層的内聚性（隻做一件事），把與此相關的需求變更在視圖層處理，可以提高model層的穩定性。

angular中對資訊進行格式化的機制是過濾器（filter），如：{{birthday|date}}。對過濾器的更深入講解，請參見稍後的2.7節“過濾器”。