Este Angular 2+ MVVM?
Decembrie 06, 2016
Am citit despre asta în diverse locuri acum: „Angular este MVVM” sau „Angular este MVC”. Huh, chiar așa este? Nu cred că da.
De fapt, la această întrebare nu se poate răspunde cu un simplu da sau nu. În primul rând, angular 2+ nu este MVC! Sincer, nu știu, cum de oamenii vin cu chestiile astea, uneori.
Acesta este un link afiliat. Este posibil să primim un comision pentru achizițiile făcute prin acest link.
În schimb, urmează o arhitectură orientată pe componente. Așadar, nu este nici MVVM. Cu toate acestea, angular implementează o mulțime de concepte ale MVVM. Deci, dacă este nevoie, puteți spune că angular urmează principiul MVVM. Pentru a vedea asemănările, vom examina mai îndeaproape principiul în contextul componentelor angular.
„Foarte frumos… dar ce este MVVM?”
MVVM înseamnă Model, View, ViewModel. Este un model de proiectare software și se presupune că mărește lizibilitatea și mentenabilitatea codului sursă, prin împărțirea codului în cele 3 secțiuni menționate anterior. Deci, cum arată în angular?
Model
Un model este un container care definește structura unei entități, urmând principiul orientat pe obiecte. Acesta este definit de conținutul dumneavoastră. Deci, dacă doriți să utilizați un Model pentru un utilizator, acesta ar putea arăta astfel.
undefined
class User { name:string; email:string; address:string;}
În angular, folosim de obicei clase sau interfețe Typescript pentru a defini modelul. Cu toate acestea, modelele sunt pur și simplu obiecte Javascript obișnuite.
Rețineți că Modelele nu trebuie să conțină nicio logică. Toată logica dvs. ar trebui să fie definită în ViewModel.
View
Visualizarea este stratul vizual al aplicației, incluzând toate elementele vizuale afișate pe ecranul utilizatorului. În cazul Angular 2, view-ul este definit într-un șablon. Aceste șabloane sunt scrise în HTML și CSS, dar conțin și elemente specifice angular. Aceste șabloane o conectate la ViewModel prin data-binding. Șabloanele fac întotdeauna parte dintr-o componentă.
ViewModel
ViewModelul este o parte abstractă a vizualizării, gestionând modelele și proprietățile care trebuie afișate pe ecran. Acesta conține toată logica pentru pagină. View și ViewModel sunt adesea conectate prin legături de date. Aceasta înseamnă că modificările aduse în ViewModel, de exemplu la o proprietate, sunt aplicate instantaneu în View, modificând, de exemplu, textul afișat pe ecran. În angular, ViewModel este reprezentat de partea Typescript a unei componente.
Am aflat astfel că o componentă angular este formată din două părți. Un șablon (View) și o clasă (ViewModel). Iată o prezentare generală a componentelor angular.
Componente angulare
O componentă de bază în angular constă din două părți. Prima parte este definiția componentei. Aceasta este înconjurată de @Component({}). În interiorul acestei definiții puteți specifica proprietățile acelei componente, cum ar fi un selector, care ne va permite să plasăm componenta noastră prin HTML.
În acel bloc definim, de asemenea, vizualizarea. Puteți face acest lucru adăugând html inline sau folosind un fișier suplimentar. De obicei, prefer a doua opțiune pentru o mai bună lizibilitate și o separare clară a acestor două elemente. Deci, iată cum ar putea arăta această parte:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
A doua parte este clasa corespunzătoare pentru a implementa logica. Această clasă este plasată în același fișier chiar sub definiție. Este practic o clasă normală de tip typescript, așa că puteți face orice doriți acolo.
undefined
export class NavBar{}
Pentru a afișa componenta noastră pe ecran, trebuie să o atașăm la o vizualizare html, care este deja afișată. Punctul de plecare este fișierul app.component.html. Astfel, scriind
undefined
<nav-bar></nav-bar>
componenta noastră este adăugată la vizualizare. În Angular, componentele nu pot exista de sine stătător, ci trebuie să fie adăugate întotdeauna la un modul. Pentru a face acest lucru, trebuie doar să adăugăm componenta noastră la secțiunea de declarații a modulului părinte. Modulul rădăcină se află în interiorul app.module.ts
undefined
@NgModule({ declarations: })
Tot ce este definit în fișierul html al componentelor va fi plasat în interiorul selector-tag-ului componentei și, prin urmare, va fi afișat pe ecran.
Acesta este un link afiliat. Este posibil să primim un comision pentru achizițiile efectuate prin intermediul acestui link.
Pentru a afla mai multe despre componente, consultați ghidul meu aprofundat despre componente în angular.