È Angular 2+ MVVM?
Dicembre 06, 2016
Ho letto di questo in vari posti ora: “Angular è MVVM” o “Angular è MVC”. Huh, lo è? Non credo.
In realtà alla domanda non si può rispondere con un semplice sì o no. Prima di tutto, angular 2+ non è MVC! Onestamente, non so come la gente si inventi queste cose, a volte.
Questo è un link di affiliazione. Potremmo ricevere una commissione per gli acquisti effettuati attraverso questo link.
Invece, segue un’architettura orientata ai componenti. Quindi non è nemmeno MVVM. Tuttavia, angolare implementa molti dei concetti di MVVM. Quindi, se è necessario, si può dire che angolare segue il principio MVVM. Per vedere le somiglianze, daremo un’occhiata più da vicino al principio nel contesto dei componenti angolari.
“Molto bello… ma cos’è MVVM?”
MVVM sta per Model, View, ViewModel. È un pattern di progettazione del software e si propone di aumentare la leggibilità e la manutenibilità del codice sorgente, suddividendo il codice nelle 3 sezioni menzionate prima. Quindi come appare in Angular?
Modello
Un modello è un contenitore che definisce la struttura di un’entità, seguendo il principio orientato agli oggetti. È definito dal vostro contenuto. Quindi, se volete usare un modello per un utente, potrebbe apparire così.
undefined
class User { name:string; email:string; address:string;}
In Angular, usiamo tipicamente classi o interfacce Typescript per definire il modello. Tuttavia, i modelli sono solo vecchi oggetti Javascript.
Nota che i modelli non dovrebbero contenere alcuna logica. Tutta la tua logica dovrebbe essere definita nel ViewModel.
View
La View è il livello visivo dell’applicazione, inclusi tutti gli elementi visivi mostrati sullo schermo dell’utente. Nel caso di Angular 2 la vista è definita in un template. Questi template sono scritti in HTML e CSS ma contengono anche elementi specifici di Angular. Questi template sono collegati al ViewModel tramite data-binding. I template sono sempre parte di un componente.
ViewModel
Il ViewModel è una parte astratta della View, che gestisce i modelli e le proprietà da mostrare sullo schermo. Contiene tutta la logica della pagina. View e ViewModel sono spesso collegati tramite il data binding. Questo significa che i cambiamenti nel ViewModel, per esempio su una proprietà, sono istantaneamente applicati alla vista, cambiando per esempio il testo mostrato sullo schermo. In angular, il ViewModel è rappresentato dalla parte Typescript di un componente.
Allora abbiamo scoperto che un componente angolare consiste di due parti. Template (View) e una classe (ViewModel). Ecco una panoramica dei componenti angolari.
Componenti angolari
Un componente di base in angolare consiste di due parti. La prima parte è la definizione del componente. È circondato da @Component({}). All’interno di questa definizione è possibile specificare le proprietà di quel componente come un selettore, che ci permetterà di posizionare il nostro componente tramite HTML.
In quel blocco si definisce anche la vista. Puoi farlo aggiungendo l’html in linea o usando un file extra. Di solito preferisco la seconda opzione per una migliore leggibilità e una chiara separazione di questi due elementi. Ecco come potrebbe apparire questa parte:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
La seconda parte è la classe corrispondente per implementare la logica. Questa classe è posta nello stesso file proprio sotto la definizione. È fondamentalmente una normale classe typescript, quindi potete fare quello che volete lì dentro.
undefined
export class NavBar{}
Per mostrare il nostro componente sullo schermo dobbiamo attaccarlo a una vista html, che è già mostrata. Il punto di partenza è l’app.component.html. Quindi scrivendo
undefined
<nav-bar></nav-bar>
il nostro componente viene aggiunto alla vista. In Angular, i componenti non possono essere presenti da soli, ma devono sempre essere aggiunti ad un modulo. Per farlo, basta aggiungere il nostro componente alla sezione delle dichiarazioni del modulo padre. Il modulo radice è all’interno di app.module.ts
undefined
@NgModule({ declarations: })
Tutto ciò che è definito nel file html dei componenti sarà inserito all’interno del selector-tag del componente e quindi mostrato sullo schermo.
Questo è un link affiliato. Potremmo ricevere una commissione per gli acquisti effettuati attraverso questo link.
Per saperne di più sui componenti, controlla la mia guida approfondita sui componenti in angular.