AngularJS 教學 - 模組化及開發模式

AngularJS 提供了一個 Javascript 的 MVC 框架讓開發者能夠輕易的在前端開發中實現 MVC 架構

但我認為 AngularJS 帶給前端開發者最重要的思維還是模組化以及開發模式

先從模組化談起

模組化(Modularity)已經是前端開發中一個很重要的準則了，就像大部分書籍說的

模組化能夠讓我們更能夠輕易重用(reuse)各個模組，另外能夠讓你容易地進行測試

也能夠幫助開發者快速並明確地釐清一個大型的前端應用的架構

但要組織一個大量模組間相互依賴的關係其實是一個蠻重要的課題

如果處理不當容易造成模組間的緊密耦合關係，並且降低重用性以及難於測試

要如何解耦？你可以透過 Mediator Pattern 或是 Observer Pattern 這類型的設計模式

這其實就有點像是 Event Driven Development



當然要在一個大型應用中實作出這些架構還是有一定的複雜性存在

然而 AngularJS 提供的兩項強大的功能讓我們可以容易的進行模組化的開發

分別是 Data Binding AngularJS 教學 - Data Binding 以及 Dependency Injection(DI)

簡單說，AngularJS 提供了 scope 物件，進而分離了 View 與 Controller 之間的關聯

也繫結了 View 與 Model 間的資料

試想如果今天不是用 AngularJS，要如何做到 View 上的資料改變也能夠反映到 Model 上而且盡量讓模組間解耦?

Observer Pattern 是其中一個解法，而 AngularJS 給你的好處是，你不需要理會這些細節，遵循它的做法就對了

另外一個是依賴注入AngularJS Dependency Injection

AngularJS 算是提供了一個類似容器的東西負責管理你的元件(Components)以及AngularJS的元件

當 A元件需要 B元件時，可以透過依賴注入將 B 元件注入到 A元件之中

這讓你能夠不需要在意 B 元件是何時被建立、如何被建立的，你只需要專住 A 元件的邏輯

並了解你需要哪些元件，注入進來就對了

在測試上也很容易針對各個單一元件進行測試，如果你的元件有很複雜的深度依賴關係時，尤為明顯

就是這兩項功能，Data Binding 及 Dependency Injection 我認為是 AngularJS 最好用的功能

也是你在模組化你的應用程式時必須考慮的兩個環節

接下來是開發模式

大多數的前端應用多半都是負責針對資料進行呈現，因此你必須知道資料的樣子(Ex:有哪些欄位)

知道了有什麼資料以及大概的內容，可能就會針對畫面進行設計並予以呈現

這其實就類似於 Data Driven Development，而這跟 AngularJS 的關係又為何?

假如說你有以下的資料

[

{"id": "1", "name": "Share your task", "priority": "High"},

{"id": "2", "name": "Sign up free", "priority": "Middle"},

{"id": "3", "name": "Contact John", "priority": "High"}

]

你可以透過 AngularJS 來組織你的畫面

<div ng-controller="TodoController">

<ul>

<li ng-repeat="todo in todos">

{{todo.name}}: {{todo.priority}}

</li>

</ul>

</div>

最後組織你的 Javascript 程式

demoApp.controller("TodoController", function($scope, todoService){

$scope.todos = todoService.list();

});

大多數的前端類 MVC 的框架的開發流程不敢說相同但可能都雷同

重點在於 AngularJS 的 Data Binding 以及 Directive 能夠讓你更容易地實現這樣的 MVC 架構

但最重要的還是在於你的開發模式，AngularJS 給了開發者很多好用又強大的功能

它並不像 jQuery 著重在 DOM 的操作，也不像 jQuery UI 提供很多豐富的頁面元件，

AngularJS 希望開發者能夠遵循一個固定且正確的開發模式，來架構出一個好的前端應用。