Az Angular 2+ MVVM?
December 06, 2016
Azóta több helyen is olvastam erről: “Angular is MVVM” vagy “Angular is MVC”. Huh, ez tényleg így van? Szerintem nem.
A kérdésre valójában nem lehet sima igennel vagy nemmel válaszolni. Először is az angular 2+ nem MVC! Őszintén szólva nem tudom, hogy az emberek hogy jönnek néha ilyenekkel elő.
Ez egy affiliate link. Ezen a linken keresztül történő vásárlásokért jutalékot kaphatunk.
Ehelyett komponensorientált architektúrát követ. Tehát nem MVVM sem. Az angular azonban az MVVM sok koncepcióját megvalósítja. Tehát ha kell, akkor mondhatjuk, hogy az angular az MVVM elvet követi. Hogy lássuk a hasonlóságokat, nézzük meg közelebbről az elvet az angular komponensek kontextusában.
“Nagyon szép… de mi az az MVVM?”
A MVVM a Model, View, ViewModel rövidítése. Ez egy szoftvertervezési minta, és a forráskód olvashatóságának és karbantarthatóságának növelésére szolgál, a kódnak az előbb említett 3 szakaszra való felosztásával. Hogyan néz ki ez az angularban?
Model
A Model egy tároló, amely egy entitás szerkezetét határozza meg, az objektumorientált elvet követve. Ezt határozza meg a tartalma. Tehát ha egy Model-t szeretnénk használni egy User számára, akkor ez így nézhet ki.
undefined
class User { name:string; email:string; address:string;}
Az angularban jellemzően Typescript osztályokat vagy interfészeket használunk a modell definiálására. A modellek azonban csak egyszerű, régi Javascript objektumok.
Megjegyezzük, hogy a modellek nem tartalmazhatnak semmilyen logikát. Minden logikát a ViewModelben kell definiálni.
View
A View az alkalmazás vizuális rétege, beleértve a felhasználó képernyőjén megjelenő összes vizuális elemet. Az Angular 2 esetében a nézet egy sablonban van definiálva. Ezek a sablonok HTML és CSS nyelven íródnak, de tartalmaznak angular specifikus elemeket is. Ezek a sablonok adatkötésen keresztül kapcsolódnak a ViewModelhez. A sablonok mindig egy komponens részei.
ViewModel
A ViewModel a View absztrakt része, amely a képernyőn megjelenítendő modelleket és tulajdonságokat kezeli. Ez tartalmazza az oldal összes logikáját. A View és a ViewModel gyakran adatkötéssel kapcsolódik egymáshoz. Ez azt jelenti, hogy a ViewModelben, például egy tulajdonságon végzett változtatások azonnal alkalmazásra kerülnek a Viewban, megváltoztatva például a képernyőn megjelenő szöveget. Az angularban a ViewModellt egy komponens Typescript része reprezentálja.
Megállapítottuk tehát, hogy egy angular komponens két részből áll. Sablonból (View) és egy osztályból (ViewModel). Íme egy áttekintés az angular komponensekről.
Angular komponensek
Egy alapvető komponens az angularban két részből áll. Az első rész a komponens definíciója. Ezt veszi körül a @Component({}). Ezen a definíción belül megadhatjuk a komponens tulajdonságait, mint például egy szelektor, ami lehetővé teszi, hogy a HTML-en keresztül elhelyezzük a komponensünket.
Ebben a blokkban definiáljuk a nézetet is. Ezt megtehetjük html inline hozzáadásával vagy egy extra fájl használatával. Én általában a második lehetőséget részesítem előnyben a jobb olvashatóság és a két elem egyértelmű elkülönítése miatt. Így nézhetne ki ez a rész:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
A második rész a megfelelő osztály a logika megvalósításához. Ez az osztály ugyanabban a fájlban van elhelyezve közvetlenül a definíció alatt. Ez alapvetően egy normál typescript osztály, tehát bármit tehetünk benne, amit csak akarunk.
undefined
export class NavBar{}
A komponensünk képernyőn való megjelenítéséhez egy már megjelenített html nézethez kell csatolnunk. A kiindulási pont az app.component.html. Tehát a
undefined
<nav-bar></nav-bar>
leírásával a komponensünket hozzáadjuk a nézethez. Angularban a komponensek nem lehetnek ott önmagukban, hanem mindig hozzá kell adni egy modulhoz. Ehhez csak hozzá kell adnunk a komponensünket a szülő modul deklarációs részéhez. A gyökérmodul az app.module.ts
undefined
@NgModule({ declarations: })
Minden, ami a komponens html fájljában definiálva van, a komponens selector-tagjébe kerül, és így megjelenik a képernyőn.
Ez egy affiliate link. Az ezen a linken keresztül történő vásárlásokért jutalékot kaphatunk.
Ha többet szeretne megtudni a komponensekről, olvassa el a komponensekről szóló részletes útmutatómat az angularban.