《AngularJS深度剖析與最佳實踐》一2.1 什麼是UI

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

提起ui，你一定知道它是指使用者界面（user interface），但是如果細細剖析，你會發現它沒那麼簡單。

對于一個使用者界面，它實際上包括三個主要部分：

内容：你想展現哪些資訊？包括動态資訊和靜态資訊。注意，這裡的内容不包括它的格式，比如生日，跟它顯示為紅色還是綠色無關，跟它顯示為年月日還是顯示為生辰八字也無關。

外觀：這些資訊要展示為什麼樣子？這包括格式和樣式。樣式還包括靜态樣式和動畫效果等。

互動：使用者點選了加入購物車按鈕時會發生什麼？還要更新哪些顯示？

在前端技術棧中，這三個部分分别由三項技術來負責：html負責描述内容，css負責描述外觀，javascript負責實作互動。當然，這三者之間沒有明确的界限，比如有些格式化需要javascript來實作，而html也往往會影響一些樣式。

如果進一步抽象，它們分别對應mvc的三個主要部分：内容—model，外觀—view，互動—controller。

對應到angular中的概念，“靜态内容”對應模闆，“動态内容”對應scope，互動對應controller，外觀部分略微複雜點：css決定樣式，過濾器（filter）則決定格式。

有了這些概念為基礎，我們再來深入講解下angular中的概念。