understanding - mvvm angular 4

Angular2: MVC, MVVM o MV*?

Question

Angular seguía más o menos el principio de diseño MVV * debido a su funcionalidad de enlace de datos bidireccional.

Angular2 está adoptando una interfaz de usuario basada en componentes, un concepto que podría ser familiar para los desarrolladores de React. En cierto sentido, los controladores y directivas Angular 1.x se difuminan en el nuevo componente Angular 2.

Esto significa que en Angular 2 no hay controladores ni directivas. En cambio, un componente tiene un selector que corresponde a la etiqueta html que representará el componente y una @View para especificar una plantilla HTML para que el componente se complete.

Angular2 todavía implementa el enlace de datos bidireccional, pero no consta de modelos, por ejemplo, si tengo un @Component que muestra una lista de artículos y una class que define el objeto del artículo:

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;
}

Esto, en el patrón MVC se consideraría el modelo.

Entonces, considerando esto, ¿qué patrón de diseño sigue Angular más de cerca?

Answer 1

Angular 2 no es realmente MVC (pero supongo que puedes dibujar paralelos). Está basado en componentes. Dejame explicar:

Angular 1 es MVC y MVVM (MV *). Angular 1 fue innovador por varias razones, pero una de las razones principales fue porque utilizó la inyección de dependencia. Este era un concepto nuevo en comparación con otros Frameworks de JS como Backbone y Knockout.

Luego salió React y transformó por completo la arquitectura front-end. Hizo que Front End pensara más en otras opciones además de MVC y MVVM. En su lugar, creó la idea de arquitectura basada en componentes. Esto puede considerarse como una de las transformaciones más significativas de la arquitectura front-end desde HTML y JavaScript.

Angular 2 (y Angular 1.5.x) decidieron adoptar el enfoque de React y utilizar Arquitectura basada en componentes. Sin embargo, puede establecer ligeros paralelos entre MVC, MVVM y Angular 2, por lo que creo que puede ser un poco confuso.

Dicho esto, no hay Controladores o ViewModels en Angular 2 (a menos que los cree a mano). En cambio, hay componentes, que se componen de una plantilla (como una vista), clases y metadatos (decoradores).

Por ejemplo, los modelos son las clases que contienen los datos (por ejemplo, un contrato de datos para mantener los datos devueltos por el servicio http usando @ angular / http). Podemos crear una nueva clase que agregue métodos y propiedades (lógica), luego fusionar el Modelo y la Clase. Esto crea algo así como un ViewModel. Entonces podríamos usar este ViewModel dentro de nuestro Componente.

Pero llamar a la Clase o al Servicio de un Componente un Modelo de Vista o un Controlador no es realmente correcto. El componente contiene la plantilla y la clase. En mi opinión, es un poco como la Teoría de Liskov: un pato no es un pato, no intentes forzar el patrón MVC o MVVM en los Componentes, ya que son diferentes. Piense en Angular 2 como componentes. Pero puedo ver por qué la gente trazaría paralelos para ayudar a su comprensión inicial.

Angular también utiliza módulos que forman parte de una próxima versión de JavaScript (ECMAScript 6). Esto es muy poderoso porque JavaScript siempre ha tenido problemas con los espacios de nombres y la organización del código. Aquí es donde entran las importaciones y exportaciones a los componentes.

Enlaces útiles:

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

¿Es angular2 mvc?

Answer 2

En Angular (excluyendo la versión 2 y superior) estamos utilizando la función de enlace de datos. Esta función de enlace de datos aplica el patrón MVVM en la aplicación ng porque el controlador en este caso causa el enlace entre V&M (los cambios en la vista provocan cambios en el modelo y viceversa) Por lo tanto, en la terminología MVC podemos reemplazar ''C'' con ''VM'' que dan ''MVVM''

Answer 3

En mi humilde opinión, puedes desarrollar en Angular 2 usando MVVM si quieres usar algunas convenciones:

1. Un componente contiene la vista (la plantilla) y el modelo de vista (la clase).
2. Solo echa de menos el modelo y puede crearlo como una clase TypeScript normal y pasarlo al modelo de vista como un parámetro de construcción.

La tecnología es bastante similar a la disponible en PRISM y WPF y allí se desarrolla todo utilizando MVVM (si lo desea).

Answer 4

MVC y MVVM con AngularJS

Patrón de diseño MVC

Para empezar, el patrón de diseño MVC no es específico de AngularJS, debe haber visto / implementado este patrón en muchos otros lenguajes de programación.

El patrón de diseño MVC se puede ver en AngularJS, pero antes de entrar en eso veamos qué incluye el patrón de diseño MVC:

Modelo: El modelo no es más que datos. Ver: Ver representa estos datos. Controlador: el controlador media entre los dos.

En MVC si hacemos algún cambio en la vista, no se actualiza en el modelo. Pero en AngularJS, hemos escuchado que hay algo llamado enlace bidireccional y este enlace bidireccional permite el patrón de diseño MVVM.

MVVM básicamente incluye 3 cosas:

Ver modelo El controlador Ver modelo se reemplaza realmente por Ver modelo en el patrón de diseño MMVM. View Model no es más que una función de JavaScript que nuevamente es como un controlador y es responsable de mantener la relación entre la vista y el modelo, pero la diferencia aquí es que si actualizamos algo a la vista, se actualiza en el modelo, cambia cualquier cosa en el modelo, aparece a la vista, que es lo que llamamos enlace bidireccional.

Es por eso que decimos que AngularJS sigue el patrón de diseño MVVM.

Answer 5

No estoy muy interesado en usar la notación M ** (tipo de abuso y niebla). De todos modos, en mi opinión, la forma más simple y efectiva de decirlo es en Angular2:

la clase (artículo en su caso) representa el modelo

Componente combina la vista (en la Plantilla) y el controlador (la lógica de Typecript)

Espero que ayude

Answer 6

Tanto Angular 1 como Angular 2 siguen el patrón MVC (Modelo, Vista, Controlador).

En Angular 1, el marcado HTML es la Vista, el Controlador es el Controlador y el Servicio (cuando se utiliza para recuperar datos) es el modelo.

En Angular 2, la plantilla es la Vista, la clase es el Controlador y el Servicio (cuando se utilizó para recuperar datos) es el modelo.

Como Angular es un marco del lado del cliente, el patrón MVC que Angular sigue puede llamarse como MVVC (Modelo, Vista, Controlador de vista).