¿Es Angular 2+ MVVM?
Diciembre 06, 2016
Ya he leído sobre eso en varios sitios: «Angular es MVVM» o «Angular es MVC». ¿Eh, es así? Yo creo que no.
En realidad la pregunta no se puede responder con un simple sí o no. ¡En primer lugar, angular 2+ no es MVC! Honestamente, no sé, cómo la gente viene con esas cosas, a veces.
Este es un enlace de afiliado. Podemos recibir una comisión por las compras realizadas a través de este enlace.
En cambio, sigue una arquitectura orientada a componentes. Por tanto, tampoco es MVVM. Sin embargo, angular implementa muchos de los conceptos de MVVM. Así que si es necesario, se puede decir que angular sigue el principio MVVM. Para ver las similitudes, vamos a echar un vistazo más de cerca al principio en el contexto de los componentes de angular.
«Muy bonito… ¿pero qué es MVVM?»
MVVM significa Model, View, ViewModel. Es un patrón de diseño de software y se supone que aumenta la legibilidad y la capacidad de mantenimiento del código fuente, al dividir el código en las 3 secciones mencionadas anteriormente. ¿Cómo se ve en Angular?
Modelo
Un Modelo es un contenedor que define la estructura de una entidad, siguiendo el principio de orientación a objetos. Está definido por su contenido. Así que si quieres usar un Modelo para un Usuario, podría tener este aspecto.
undefined
class User { name:string; email:string; address:string;}
En Angular, normalmente usamos clases o interfaces Typescript para definir el modelo. Sin embargo, los modelos son simplemente objetos de Javascript.
Nótese que los modelos no deben contener ninguna lógica. Toda su lógica debe ser definida en el ViewModel.
View
La View es la capa visual de la aplicación, incluyendo todos los elementos visuales que se muestran en la pantalla del usuario. En el caso de Angular 2 la vista se define en una plantilla. Estas plantillas están escritas en HTML y CSS pero también contienen elementos específicos de Angular. Estas plantillas están conectadas al ViewModel a través de data-binding. Las plantillas son siempre parte de un componente.
ViewModel
El ViewModel es una parte abstracta de la Vista, gestionando los modelos y propiedades a mostrar en la pantalla. Contiene toda la lógica de la página. La Vista y el ViewModel suelen estar conectados a través de la vinculación de datos. Esto significa que los cambios en el ViewModel, por ejemplo en una propiedad, se aplican instantáneamente a la vista, cambiando, por ejemplo, el texto que se muestra en la pantalla. En angular, el ViewModel está representado por la parte Typescript de un componente.
Así que descubrimos, que un componente angular consta de dos partes. La plantilla (View) y una clase (ViewModel). Aquí está una visión general de los componentes angulares.
Componentes angulares
Un componente básico en angular consiste en dos partes. La primera parte es la definición del componente. Está rodeada por @Component({}). Dentro de esa definición se pueden especificar propiedades de ese componente como un selector, que nos permitirá colocar nuestro componente mediante HTML.
En ese bloque también definimos la vista. Se puede hacer añadiendo html inline o utilizar un archivo extra. Yo suelo preferir la segunda opción para una mejor legibilidad y una clara separación de estos dos elementos. Así que este es el aspecto que podría tener esta parte:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
La segunda parte es la clase correspondiente para implementar la lógica. Esta clase se coloca en el mismo archivo justo debajo de la definición. Es básicamente una clase typescript normal, así que puedes hacer lo que quieras ahí dentro.
undefined
export class NavBar{}
Para mostrar nuestro componente en la pantalla necesitamos adjuntarlo a una vista html, que ya se muestra. El punto de partida es el app.component.html. Así que escribiendo
undefined
<nav-bar></nav-bar>
nuestro componente se añade a la vista. En Angular, los componentes no pueden estar ahí por sí mismos, sino que siempre tienen que ser añadidos a un módulo. Para ello, basta con añadir nuestro componente a la sección de declaraciones del módulo padre. El módulo raíz está dentro del app.module.ts
undefined
@NgModule({ declarations: })
Todo lo que se defina en el archivo html de los componentes se colocará dentro del selector-tag del componente y por lo tanto se mostrará en la pantalla.
Este es un enlace de afiliado. Podemos recibir una comisión por las compras realizadas a través de este enlace.
Para aprender más sobre los componentes, echa un vistazo a mi guía en profundidad sobre los componentes en angular.