angularjs學習筆記三——AngularJS與MVC模式
本文主要解決一下幾個問題：
- 什麼是MVC
- MVC優點缺點
- AngularJS的MVC是怎樣的
- 來個簡單的示例
一、什麼是MVC
MVC模式非常重要，無論你是B/S還是C/S的開發者(實際上個人認為B/S也是C/S的一種特殊形式)，甚至你是純Client或Browser的前端開發者，你都必須瞭解什麼是MVC。
MVC是單詞縮寫，拆開的話是Model(模型)、View(檢視)、Controller(控制器)，其中，Model模型即為要儲存的資料和資料訪問介面。
在MVC模式下，你可以簡單的理解為一個專案從總體上可以分為三個層次，資料層、控制層、檢視層：
|
檢視 |
|
控制 |
|
資料 |
(上表圖為原創)
將所有的資料儲存在資料層，控制層負責邏輯業務處理以及資料在資料層與檢視層之間的傳遞。檢視層僅僅單純的負責顯示控制層給出的資料或向控制層傳輸獲得的資料，因此，檢視層也可以理解為互動層。
從專案邏輯結構上是這麼分，但同時，從專案檔案上也可以這麼分。同一模組下的控制器、檢視、模型各自單獨成原始檔或目錄，在需要的時候通過控制器連接獲取檢視或資料的原始檔，然後進行處理。
以上內容對於習慣了基於JAVA的JSP+Servlet的WEB後端開發人員而言可能比較好理解。如果你認為難以理解我的表述，沒關係。
實際上，如果你通過網上查詢資料，你會發現，MVC模式中三者之間的關係有很多版本，因此你只需要知道——MVC模式就是希望將檢視、資料和資料訪問介面、邏輯業務處理高度分離。至於三者間具體關係，應該發揮主觀能動性，視不同專案、不同需求、不同環境而具體分析
需要注意的是，MVC只是其中一種較為常見的開發模式，當然還有其他的，有興趣的可以自己探究——完全清楚MVC的前提下。
二、MVC優點缺點
MVC模式的優點是顯而易見的，它能讓專案原始碼變得更好看，增強可讀性。這不僅僅是為了美觀，這在大專案中，對於不同人員的分工、崗位任務的交接、後期運維、程式碼管理等多個方面都非常重要。如果你的程式碼管理一團糟，那麼可能僅僅一個月過去，你再看你一個月前的程式碼你只會有一個想法——這是什麼鬼？
MVC的缺點就是專案會比較大。為了分離各個模組，你將不得不增加一倍甚至幾倍的程式碼量，模組之間通過介面訪問，也降低了訪問效率。但是我認為這個缺點可以忽略，因為如果沒有這些多出來的程式碼量，你或你的團隊將來可能連維護它的慾望都沒有，很難正確閱讀和理解專案，更別說Debug了。
三、AngularJS的MVC是怎樣的
AngularJS的MVC中，三者關係與上述的不太一樣，在AngularJS的MVC中，Model作為控制器與檢視之間傳遞資料的載體；View根據Model的設計而設計，用於顯示Model，Controller用於根據Model進行不同的邏輯業務處理。
四、來個簡單的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!-- 定義該div為一個ng的應用，該應用為其指派一個應用名為appName -->
<!-- 同時為該應用指派一個控制器，併為該控制器指派一個名稱為ctrlName -->
<div ng-app="appName" ng-controller="ctrlName">
disStr1 - <span>{{disStr1}}</span><br /> <!-- 顯示disStr1，它就相當於Model -->
</div>
<script>
//獲取ng應用名appName獲取其物件
//通過這個物件我們能對應用做一些邏輯處理
var appObj = angular.module("appName",[]);
//這些邏輯處理通過自定義函式，並將該函式與appName的控制器ctrlName繫結實現。這個繫結的過程可以通過應用物件的controller函式實現
appObj.controller("ctrlName",function($scope){
$scope.disStr1 = "Hello, World!"; //scope是作用域物件，也是MVC中的Model部分
// 其成員屬性disStr1與上方appName中的表示式內的disStr1指向同一個物件
});
</script>
</body>
</html>
通過上方，我們能瞭解到
View就是使用者可見的部分，包括HTML標籤和angularjs表示式。
控制器就是自定義函式中的邏輯處理部分
Model就是$scope物件的成員。
通過上方的程式碼我們也能體會到，為什麼說AngularJS中的Model是作為控制器與View的介面