Angular使用總結

前端開發大部分時候面對兩類問題：一是業務邏輯，二是界面展現邏輯。在一個管理系統或互聯網產品中，咱們首先會經過業務數據對整個業務系統建模。所謂業務邏輯，反映到程序層面就是對一些業務數據的增刪改查操做；同時咱們也須要將這些業務邏輯的操做結果反饋給用戶，這就是界面展現邏輯。好比當你在發佈一條微博，在業務邏輯上是多了一條微博數據，同時在界面上也須要將這條數據呈現出來。在我看來，用戶界面本質上就是業務數據的一種對用戶友好的展現形態。一個理想的前端架構是將業務邏輯和界面展現邏輯徹底分離，二者獨立變化，互不影響。在咱們考慮業務邏輯的時候，就不要考慮界面展現的問題；在考慮界面展現問題的時候，就不要考慮業務邏輯的問題。若是將二者耦合在一塊兒，那麼在面對複雜問題的時候可能就會左右爲難，無從下手。

MVC模式的主要目的就是將業務邏輯和界面展現分離。雖然對於C(Controller)是有爭議的，可是M(model)和V(view)是廣泛認同的。將業務邏輯和界面展現分離的關鍵也在model和view的分離。angular是一個很是優秀的MV*框架，很是好的體現了MVC的思想，本文將從該角度來介紹angular的一些使用心得。

需求

這是一個後來管理頁面，用來設置各個客戶端的banner顯示。頁面主要有如下功能：
1.編輯banner信息，能夠設置banner的類型和上傳banner圖片。
2.刪除和插入。
3.上下移動banner順序。
4.保存。

實現業務邏輯

不考慮頁面展現，咱們能夠先實現業務邏輯。各個端banner列表的邏輯是同樣的，只是類型以及與後臺的交互接口不同。咱們能夠將banner的這些列表邏輯定義成一個service，不一樣端的列表均可以重用這個service。其定義以下。

這個service的實現很是簡單，就是對一個banner數組進行增刪改查。

實現界面展現邏輯

實現完業務邏輯咱們再來解決界面展現的問題。angular提供了一個很是強大的模版引擎,經過指令和表達式就能將數據呈現到界面。如何才能模版中使用這些業務數據和方法呢？咱們須要將這些數據和方法寫到scope對象中,scope對象定義了對應模版可以使用的數據和方法。bannerCollection service的attach(scope)方法就是將對應的banner數據和方法寫到scope對象中以便能在模版中使用。下面的代碼是在mobile controller中使用bannerCollection service,並經過其attach方法和對應的scope對象綁定。

將數據和方法註冊到scope對象後，咱們就能夠在模版中使用了。下圖是模版的一部分。

ng-repeat指令用來展現banner列表，雙花括號用來輸出數據，ng-click用來響應用點擊。angular框架提供了許多很是有用的內建指令，基本上能知足咱們大部分的需求了。除了內建指令，angular還爲咱們提供了自定義指令的接口，經過自定義指令咱們能夠擴展出很是豐富的web組件。在這個banner管理頁面中，有個上傳banner圖片的功能，咱們就能夠將其封裝成一個指令。

如上圖，該指令的實現主要在link方法中。每一個自定義指令均可以實現這個方法，當模版引擎在連接模版的時候會回調指令的link方法，調用時將當前的scope和element做爲參數傳進來。link方法很是重要,它體現了指令的本質：scope到element之間的一個橋樑，其實也就是model到view的一個橋樑。咱們能夠在這個link方法中監聽element的事件來響應用戶操做並修改scope中的數據；也能夠監聽scope中數據的變化將其反映到用戶界面上。scope對象有個$watch方法，能夠經過該方法去監聽scope中須要關心的數據的變化。
在這個圖片上傳的指令中，咱們在link方法中監聽了用戶選擇文件的事件。當用戶選擇文件後，經過post請求將圖片上傳到後臺生成url和dsfid，同時更新scope中的img數據；ng-repeat指令在監聽到scope中img數據的變化後又會刷新相應的界面展現。

結語

angular爲咱們提供了一個很是好的業務邏輯和界面展現邏輯分離的機制，極大地簡化了前端開發。特別對於數據型應用，angular是很是好的選擇。