下面僅是個人對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è)務邏輯,負責處理數(shù)據(jù),比如數(shù)據(jù)的獲取,以及數(shù)據(jù)的過濾,進而影響數(shù)據(jù)在視圖上的展示魂挂。
MVVM
M - Model 數(shù)據(jù):它是與應用程序的業(yè)務邏輯相關(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中可以認為是從服務端獲取的數(shù)據(jù)辖众,因為angular提倡的是組件化、模塊化開發(fā)和敬。所以不建議將與后臺交互的業(yè)務邏輯凹炸、數(shù)據(jù)請求與組件混合,而是專門放在服務即service中單獨處理昼弟,通過依賴注入(DI)的形式將獲取到的數(shù)據(jù)注入到所應用的組件啤它。所以可以將service服務層認為就是MVC中的M層。
C: 即控制器私杜,控制器的作用就是提供頁面顯示的屬性蚕键、跟頁面相關(guān)的業(yè)務邏輯。那么在angular中可以理解為組件衰粹。因為在angular中組件通過裝飾器@component修飾锣光,并組裝所需要的元數(shù)據(jù),而模板所需要的屬性铝耻、數(shù)據(jù)都是在組件即@component所修飾的類中定義的誊爹。而組件只是負責為視圖提供屬性值數(shù)據(jù)和跟頁面相關(guān)的業(yè)務邏輯處理后的數(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: 即模型窖张,模型對應的就是模型數(shù)據(jù)幕随。如果要把angular理解為MVVM形式的話,那這塊就要理解為是MVC形式中M和C的結(jié)合體宿接。為什么呢赘淮?下面從MVVM形式的角度來理解。在MVVM中M既擔任了視圖層V所需要的基本數(shù)據(jù)睦霎,也擔任了從后臺獲取的數(shù)據(jù)梢卸,即通過ajax請求后臺獲取數(shù)據(jù)的工作。只不過在angular中副女,建議是控制器負責與頁面交互的基本數(shù)據(jù)和業(yè)務邏輯處理蛤高,而與后臺交互的例如ajax處理放到了服務service中。我們也完全可以直接在組件控制器中執(zhí)行完所有操作碑幅,不必分層處理戴陡,所以可以認為M(MVC)+ C(MVC)= M(MVVM)。在angular中可以理解為M就是組件控制器和服務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的前端框架射沟。