AngularJS應用開發思惟之1：聲明式界面

這篇博客以前承接上一篇：http://www.cnblogs.com/xuema/p/4335180.html

重寫示例：模板、指令和視圖

AngularJS最顯著的特色是用靜態的HTML文檔，就能夠生成具備動態行爲的頁面。

仍是前面的小時鐘示例，咱們使用AngularJS模板來重寫，示例已經嵌入→_→：

示例地址：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

HTML文件看起來像普通的HTML，只是其中多了一些特別的標記 （好比：ng-app,ez-clock等等）。在Angular中，這個HTML文件被稱爲模板。

ng-app這樣的標記咱們稱之爲指令。模板經過指令指示AngularJS進行必要的操做。 好比：ng-app指令用來通知AngularJS自動引導應用；ez-clock 指令用來通知AngularJS生成指定的時鐘組件。

當AngularJS啓動應用時，它會經過一個編譯器解析處理這個模板文件，生成的結果就是： 視圖：

咱們定義了兩個部件：模板（包含指令的HTML文件）和指令實現 （JavaScript文件），AngularJS將這兩部分拼裝起來，生成了最終的視圖。

有點理解框架的含義了嗎？

使用指令封裝JavaScript代碼

咱們在模板中使用了一個自定義的標籤ez-clock，而它變成了一個會動的時鐘， 這期間發生了什麼事情?

確定不是瀏覽器乾的，它不認識ez-clock是什麼東西。

angular.min.js引入了基本的angularJS庫，它會在瀏覽器載入HTML文檔而且 創建好DOM樹後，執行如下操做：

1. 找到有ng-app屬性的DOM節點

2. 以這個節點爲根節點，搜索自定義指令，發現ez-clock

3. 調用ez-clock指令的實現函數（指令類工廠）進行展開

根據咱們的定義，ez-clock的展開操做以下：

1. 使用一個div元素替換這個自定義標籤

2. 建立一個定時器，在定時器觸發時刷新div元素的innerText

ez-clock這樣的非HTML標準標籤，在AngularJS中之因此稱爲指令/directive， 就是指看到它時，基礎框架須要對其進行解釋，以便展開成瀏覽器能夠理解 的東西（HTML元素和腳本），而這個解釋的過程被稱爲：編譯。

可見，AngularJS框架要求將HTML文檔和JavaScript代碼分割的更清晰，一般混雜在 HTML文檔中的JavaScript代碼，須要以指令的形式進行封裝，而模板、指令 實現代碼這兩個部件，則由基礎框架負責拼裝運行。

將指令看作API

將DOM操做封裝成指令，更容易進行分工與代碼複用。

因爲AngularJS更清晰地界定了一個WEB應用的組成部分，這樣，在一個團隊中，能夠有人負責 實現指令，有人負責開發模板，各自幹擅長的事情，效率更高，成本更低。

固然，從編寫界面HTML模板的角度看，諸如ez-clock之類的指令比div更具備語義性， 使模板更容易維護，使指令的實現升級不影響模板，這也是不小的好處了。

與咱們所熟悉的對象、函數這類接口徹底不一樣，指令算是一種新型的API，它提供了在 靜態化的HTML文件中，植入動態行爲的能力：

定義本身的指令

AngularJS內置的指令不能徹底知足實際開發的須要，一般咱們須要定義本身的指令：

• 加強標準DOM元素的行爲

好比，但願一個DOM元素是可拖拽的，那麼能夠這樣寫：

1. <p ez-draggable="true">...</p>

經過ez-draggable指令，咱們賦予DOM元素可拖拽的能力。

• 自定義組件

好比，我但願一個圖片裁剪功能，那麼能夠這樣寫：

1. <ez-photoshop src="a.jpg"></ez-photoshop>

經過ez-photoshop指令，咱們定義了一個包含交互行爲的web組件。

• 封裝其餘組件庫

這不是AngularJS鼓勵的方向，可是確實有強勁的需求。

起點：聲明化

基於前面的示例，咱們容易感覺到使用AngularJS進行應用開發的一個重要的思惟模式： 從構造聲明式界面入手。

事實上，我猜想這也是Misko開發AngularJS最初的動機。稍早一些的Flex、WPF和Firefox 的XUL，或多或少給了Misko啓發。

在使用AngularJS進行前端開發時，始終應該從構造聲明式界面模板開始，若是現成的指令不夠 用，那麼就定義本身的指令、實現本身的指令。這是一個迭代的過程。

記住，指令是新型的API，用界面的聲明化做爲需求，來指導咱們的代碼封裝。

 

參考資料：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/