下面僅是個人對angular是MVC或者MVVM的理解。

首先在討論angular是哪種模式之前，我們得先了解什么是MVVM和MVC。

MVVM vs MVC

總體介紹

首先，兩者都是一種架構(gòu)思想。都是從后端演變而來。

具體的演變流程：傳統(tǒng)MVC ——> MVP ——> MVVM

MVC

- M - Model? 數(shù)據(jù)：數(shù)據(jù)實體,用來保存頁面要展示的數(shù)據(jù)。比如ajax獲取的數(shù)據(jù)。

- V - View 視圖，顯示數(shù)據(jù)的頁面，一般為html。

- C - Controller 控制器： 控制整個業(yè)務(wù)邏輯,負責處理數(shù)據(jù),比如數(shù)據(jù)的獲取,以及數(shù)據(jù)的過濾，進而影響數(shù)據(jù)在視圖上的展示。

MVVM

M - Model 數(shù)據(jù)：它是與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)的封裝載體

V - View 視圖：它專注于界面的顯示和渲染

VM - ViewModel 視圖-數(shù)據(jù)：它是View和Model的粘合體，負責View和Model的交互和協(xié)作

Angular是MVC還是MVVM

先下定論，準確的說可以理解為MVC形式的前端框架，但是也可以說是MVVM形式的框架。緣由慢慢道來。

一、MVC

首先：

V即視圖層是沒有任何爭議的，即代表的就是頁面展示層，即視圖層。用來顯示渲染數(shù)據(jù)，展示用戶所看到的內(nèi)容。在angular中視圖就是在@componet裝飾器中組裝的html模板。

M：即數(shù)據(jù)模型，在angular中可以認為是從服務(wù)端獲取的數(shù)據(jù)，因為angular提倡的是組件化、模塊化開發(fā)。所以不建議將與后臺交互的業(yè)務(wù)邏輯、數(shù)據(jù)請求與組件混合，而是專門放在服務(wù)即service中單獨處理，通過依賴注入（DI）的形式將獲取到的數(shù)據(jù)注入到所應(yīng)用的組件。所以可以將service服務(wù)層認為就是MVC中的M層。

C: 即控制器，控制器的作用就是提供頁面顯示的屬性、跟頁面相關(guān)的業(yè)務(wù)邏輯。那么在angular中可以理解為組件。因為在angular中組件通過裝飾器@component修飾，并組裝所需要的元數(shù)據(jù)，而模板所需要的屬性、數(shù)據(jù)都是在組件即@component所修飾的類中定義的。而組件只是負責為視圖提供屬性值數(shù)據(jù)和跟頁面相關(guān)的業(yè)務(wù)邏輯處理后的數(shù)據(jù)，不直接參與數(shù)據(jù)與后端的交互。所有，C就是angular中的組件。

綜上所述，angular完全可以認為是MVC形式的前端框架。

二、MVVM

那么angular為什么又可以理解為是MVVM形式的框架呢？

個人覺得，MVVM的劃分相對MVC來說更細一點，或者說MVVM可以認為是從VMC中抽離出來的一部分。那如何得以體現(xiàn)呢，下面闡述完MVVM之后 ，和上面一對比，則一目了然。

V： 即視圖層，這個還是不變的，都是代表了用戶能看到的內(nèi)容。在angular中它就是html模板。通過html模板來達到與用戶之間的交互。

M: 即模型，模型對應(yīng)的就是模型數(shù)據(jù)。如果要把angular理解為MVVM形式的話，那這塊就要理解為是MVC形式中M和C的結(jié)合體。為什么呢？下面從MVVM形式的角度來理解。在MVVM中M既擔任了視圖層V所需要的基本數(shù)據(jù)，也擔任了從后臺獲取的數(shù)據(jù)，即通過ajax請求后臺獲取數(shù)據(jù)的工作。只不過在angular中，建議是控制器負責與頁面交互的基本數(shù)據(jù)和業(yè)務(wù)邏輯處理，而與后臺交互的例如ajax處理放到了服務(wù)service中。我們也完全可以直接在組件控制器中執(zhí)行完所有操作，不必分層處理，所以可以認為M（MVC）+ C（MVC）= M（MVVM）。在angular中可以理解為M就是組件控制器和服務(wù)service兩者的結(jié)合。

VM: 即視圖模型，視圖模型的作用是用來連接V視圖層和M數(shù)據(jù)模型層的橋梁。所以為什么上面說可以認為MVVM是MVC的演變或者細化，其實兩者的角度不同而已。MVVM中的VM是將M中的數(shù)據(jù)提供給V用于展示，同時將V中用戶改變的數(shù)據(jù)同步到M中。同樣在angular中也是這樣實現(xiàn)的，在angular中當改變了數(shù)據(jù)之后頁面就會變化，而頁面用戶操作之后，M中的數(shù)據(jù)就會自動更新。

綜上所述，angular也可以認為是MVVM的前端框架。

作者：天使鳳凰_
鏈接：https://www.jianshu.com/p/11c89d58d5d5
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的angular是MVC模式还是MVVM架构模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。