2016-04-30 31 views
30

Uno angolare seguiva più o meno il principio di progettazione MVV * a causa della sua funzionalità di associazione dati bidirezionale.Angular2: MVC, MVVM o MV *?

Angular2 sta adottando un'interfaccia utente basata su componenti, un concetto che potrebbe essere familiare agli sviluppatori di React. In un certo senso, i controller Angular 1.x e le direttive sfocano nel nuovo componente Angular 2.

Ciò significa che in Angular 2 non ci sono controller e nessuna direttiva. Invece, un componente ha un selettore che corrisponde al tag html che il componente rappresenterà e un @View per specificare un modello HTML per il componente da popolare.

Angular2 implementa ancora due vie di associazione di dati, ma non consistere modelli per esempio se ho un @Component che visualizza un elenco di articoli e un class che definisce l'oggetto articolo:

class Article { 
title: string; 
link: string; 
votes: number; 

constructor(title: string, link: string, votes?: number){ 
    this.title = title; 
    this.link = link; 
    this.votes = votes || 0; 
} 

questo, nel modello MVC sarebbe considerato il modello.

Quindi, considerando questo, quale modello di progettazione fa Angular il più vicino?

risposta

6

Non sono troppo interessato all'utilizzo della notazione M ** (tipo di abuso e nebbia). ogni modo a mio parere il modo più semplice ed efficace per metterla è che in Angular2:

classe (articolo nel tuo caso) rappresenta il modello

il componente si fonde vista (nel modello) e il controller (la logica tipografico)

Spero che aiuta

16

Sia angolare 1 & angolare 2 sono seguendo MVC (Model, View, controller) modello.

In Angular 1, il markup HTML è la vista, il controller è il controller & il servizio (quando utilizzato per recuperare i dati) è il modello.

In Angular 2, il modello è la vista, la classe è il controller & il servizio (quando utilizzato per recuperare i dati) è il modello.

Poiché Angular è un framework lato client, il pattern MVC Angular follows può essere chiamato come MVVC (Model, View, View Controller).

+0

Può spiegare un po 'di più perché 'MVVC'? Grazie. – Anatoly

+4

Il servizio non è il modello. Il modello è il modello. Normalmente nei framework relativi a MVC hai effettivamente 2 tipi di modello (1) Il modello di dominio (2) Il modello che adatta il modello di dominio alla vista (a volte chiamato ViewModel). – gusgorman

+2

Non capisco perché questo ha così tanti upvotes. È semplicemente sbagliato su molti livelli ed è direttamente in contraddizione con la risposta sopra la quale è molto più esatta. –

24

Angular 2 non è realmente MVC (ma suppongo che sia possibile tracciare paralleli). È basato su componenti. Lasciatemi spiegare:

Angolare 1 è MVC e MVVM (MV *). Angular 1 era rivoluzionario per diversi motivi, ma uno dei motivi principali era perché utilizzava la dipendenza da iniezione. Questo era un nuovo concetto rispetto ad altri framework JS come Backbone e Knockout.

Poi React è uscito e ha completamente trasformato l'architettura front-end. Ha fatto pensare a Front End di altre opzioni oltre a MVC e MVVM. Invece ha creato l'idea dell'architettura basata sui componenti. Questa può essere considerata una delle più significative trasformazioni dell'architettura front-end dal codice HTML & JavaScript.

Angular 2 (e Angular 1.5.x) hanno deciso di adottare l'approccio di React e di utilizzare l'architettura basata sui componenti.Tuttavia, è possibile tracciare alcuni paralleli tra MVC, MVVM e Angular 2, motivo per cui penso che possa essere un po 'di confusione.

Detto questo, non ci sono Controller o ViewModels in Angular 2 (a meno che non li costruisca a mano). Invece, ci sono componenti, che sono costituiti da un modello (come una vista), classi e MetaData (decoratori).

Ad esempio, i Modelli sono le classi che contengono i dati (ad esempio un contratto di dati per conservare i dati restituiti dal servizio http utilizzando @ angular/http). Possiamo creare una nuova classe che aggiunge metodi e proprietà (logica), quindi unire il modello e la classe. Questo crea qualcosa come un ViewModel. Potremmo quindi utilizzare questo ViewModel all'interno del nostro componente.

Ma per chiamare una Component's Class o un servizio ViewModel o un controller non è proprio corretto. Il componente contiene il modello e la classe. IMO è un po 'come la teoria di Liskov - un'anatra non è un'anatra - non provare a forzare il pattern MVC o MVVM in componenti così come sono diversi. Pensa a Angular 2 come componenti. Ma posso capire perché le persone disegnerebbero paralleli per aiutare la loro comprensione iniziale.

Angular utilizza anche moduli che fanno parte di una versione imminente di JavaScript (ECMAScript 6). Questo è molto potente perché JavaScript ha sempre avuto problemi con Namespace e Code Organization. È qui che le importazioni e le esportazioni arrivano ai componenti.

Link utili:

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

Is angular2 mvc?

http://malcoded.com/angular-2-components-and-mvvm

0

In angolare (esclusa versione 2 e superiori) stiamo utilizzando i dati caratteristica vincolante. Questa funzione di associazione dei dati applica il pattern MVVM nell'applicazione ng perché il controller in questo caso causa il binding tra V & M (le modifiche alla visualizzazione causano il cambiamento nel modello e viceversa) Quindi nella terminologia MVC possiamo sostituire "C" con "VM" che restituiscono " MVVM'

0

a mio modesto parere si può sviluppare in angolare 2 utilizzando MVVM se si desidera utilizzare alcune convenzioni:

  1. Un componente contiene la vista (il modello) e il ViewModel (la classe).
  2. Manca solo il modello ed è possibile crearlo come una normale classe TypeScript e passarlo a viewmodel come parametro costruttore.

La tecnologia è molto simile a quella disponibile in PRISM e WPF e lì si sviluppa tutto utilizzando MVVM (se si desidera).