AngularJS 教學 - MVC 介紹

上一篇的 AngularJS 教學 - 第一個AngularJS App 寫了第一支 AngularJS 的 HelloWorld 之後

接下來就來說明一下 AngularJS 所提供的 MVC pattern 吧

MVC 是什麼就不再多加解釋了，這裡附上一個連結 MVC 維基百科

以下是一個 AngularJS MVC 大致上的流程圖

一個 MVC 關鍵實做因素在於將 Data Model 從業務邏輯以及視圖邏輯中解耦

以下依序介紹 MVC 各個部份在 AngularJS 所扮演的角色

• Model 

          模型對我來說可以分為 view models 以及 domain models，view models 顧名思義就是

          視圖上所必須呈現的資料，而 domain models 則是包含了業務資料，而這些 model 

          都會透過應用程式來進行更新、建立、刪除等等的操作，從上圖我們可以看到Model

          是也會用來與後端做資料的操作，因此 AngularJS 提供了些許的後端請求的方式，

          包括：RESTful web service 以及 Ajax。

          因此總結來說 Model 的責任在於

          1. 包含應用程式中的領域資料(Domain data)

          2. 負責資料的增刪改查等功能

          3. 提供外界所有對資料的可能操作

• Controller 

          控制器從上圖中即可看出他扮演著類似一個模型與視圖之間的黏著劑，

          主要是負責介面操作的行為，讓視圖更能專注於資料呈現上，其中最重要的是

          需要處理 AngularJS Controller 的 $scope 物件的初始化與操作

          因此其責任包括

          1. 負責初始化與處理 $scope 內的資料

          2. 負責接受視圖的請求並從 $scope 呈現資料

• View

          視圖在 AngularJS 中主要是利用那些被 AngularJS enhanced 的 HTML 標籤以及Directive 

          所組成，視圖在MVC中應該是很單純的，只負責處理DOM的控制以及呈現資料，

          其中 Directives  是 AngularJS 一個相當重要的模組，能夠讓你客制化一個視圖元件或是

          對HTML做額外的增強(Enhance)等

下一篇就先來介紹 AngularJS 的 Controller 模組