Name: Angular y Node.js Optimice el desarrollo de sus aplicaciones web con una arquitectura MEAN
Rating: 4 (2 reviews)

Presentación de Angular

Angular es un framework aplicativo JavaScript desarrollado por Google, que permite crear aplicaciones web mono página (es decir, completamente cargadas en el cliente antes de que el usuario las utilice). Estas aplicaciones solo hacen peticiones al servidor para intercambiar los datos (y no para cambiar las páginas web), a través de los servicios web. En el marco frecuente de una arquitectura MEAN, Angular está acoplado con un servidor Node.js (él mismo enriquecido con el framework Express) y en unión con un sistema de gestión básico de datos NoSQL MongoDB.

1. Una evolución radical de AngularJS

Angular se hizo público en marzo de 2017, y retoma grandes funcionalidades del framework Javascript AngularJS creado en 2009 por Google, del cual es el heredero. Añade otras para crear un framework mucho más potente. En el momento de redactar este libro, la versión actual de Angular es Angular 8. A partir de la versión 4.3, Angular garantiza una compatibilidad ascendente del código creado con Angular.

Angular retoma las siguientes grandes funcionalidades de AngularJS:

El desacoplamiento neto entre el lado cliente (por lo tanto, gestionado por Angular) y el lado servidor (por ejemplo gestionado por Node.js en el marco de una arquitectura MEAN): Angular permite crear aplicaciones mono página.
La extensión del lenguaje HTML con nuevas etiquetas y nuevos atributos, llamadas directivas: los componentes Angular se pueden manipular como etiquetas.
La inyección de dependencias que permite a los servicios ser asignados y utilizados por diferentes componentes (principalmente para dialogar con el servidor).
Un sistema de enrutado a través de un controlador llamado router.

Trae las siguientes mejoras notables:

Una modularidad perfecta de las aplicaciones que se construyen sobre una arquitectura de dos niveles: módulos que integran componentes.
Nuevas directivas.
Un sistema de enrutado mucho más sofisticado y la posibilidad de controlar de manera más fina, la activación de los componentes.
La utilización de extensiones en el lenguaje JavaScript, como TypeScript para programar utilizando clases.

El «two-way data...

Angular respecto al framework MVC (incluso VVM)

Angular (considerado aislado o de manera más natural, a través de su inmersión en una arquitectura MEAN que lo asocia a un servidor Node.js), se inscribe en el paradigma de diseño modelo vista-controlador (MVC). Este modelo garantiza el desacoplamiento de las interfaces de las operaciones, principalmente poniendo en escena un controlador. Este controlador debe, a partir de una acción realizada sobre la vista, seleccionar la operación adecuada, operación que a su vez puede actualizar los datos. Si los datos publicados se actualizan, el controlador debe alertar a la vista para que se refresque. En Angular, el controlador toma la forma de un enrutador, que vincula una acción a uno o más componentes a activar, y la parte de la implementación de los componentes a cargo de la interpolación de datos en las plantillas.

Este controlador permite también hacer evolucionar fácilmente una aplicación, que permite de una manera sencilla la adición, eliminación o sustitución de una de sus partes constituyentes. En efecto, la invocación de un componente a partir de una acción realizada en un primer componente, se gestiona por parte del controlador que centraliza de esta manera los puntos de conexión entre los componentes: esta arquitectura evita también el síndrome...

Implementación de una aplicación Angular

La implementación de una aplicación Angular se puede hacer de diferentes maneras:

Creándola de la nada, pero esto es totalmente desaconsejable debido a la complejidad de las operaciones a realizar.
Copiando el esqueleto de un proyecto existente, por ejemplo el quickstart de Google:

git clone https://github.com/angular/quickstart.git <nombreProjet>

Tampoco es aconsejable, porque las aplicaciones llamadas testigos como esta, son minimalistas y será difícil entender cómo extenderlas.

Usando una herramienta para iniciar un proyecto Angular: este es el camino que vamos a ver aquí, utilizando Angular CLI.

Las ventajas de esta solución son múltiples:

Todos los módulos «básicos» de Node.js a instalar, lo son automáticamente durante la creación de un nuevo proyecto.
El esqueleto de sus diferentes programas se crea a partir de numerosos comandos.
Las pruebas unitarias o de integración se pueden especificar y ejecutar.
Pasar de la versión de desarrollo a una versión de producción, es muy fácil de realizar.

Por lo tanto, todas las operaciones estructurales sobre las aplicaciones Angular descritas en este libro, se realizarán a través de Angular CLI, que se puede considerar como un verdadero administrador de proyectos Angular.

1. Presentación de Angular CLI

Angular CLI es una herramienta que permite:

Instalar los módulos imprescindibles de Node.js (módulos adicionales deberán ser instalados según sus necesidades).
Crear la estructura de un proyecto Angular (especificando las dependencias relacionadas con este, creando las carpetas necesarias, etc.).
Crear los esqueletos de las diferentes entidades que componen una aplicación Angular y que necesitará: módulos, componentes, servicios, directivas, pipes, guardián y enums.
Especificar y ejecutar las pruebas unitarias o de integración.
Crear la versión de producción de su aplicación.
Etc.

Una vez que se instala Angular CLI, ejecute sus acciones a través del comando ng, en la línea de comandos.

2. Instalación de Angular CLI

La instalación Angular CLI se realiza por medio de los siguientes comandos:

Globalmente:

npm install -g @angular/cli@latest

Localmente:

npm install --save-dev @angular/cli@latest...

Generación del código JavaScript a partir de TypeScript

Como hemos visto, el código de una aplicación Angular se escribe en TypeScript (y en HTML) y utiliza módulos. Un transpiler (o transcompilador, pero este término es muy poco utilizado, también nombrado de manera poco adecuada con el nombre de compilador), es necesario para traducir este código en código JavaScript (y HTML), que posteriormente se agruparán después de ser minimizados (es decir empaquetados o «bundlelizados»), y finalmente enviados al navegador.

A partir de la versión 8 de Angular, hay disponible una nueva cadena de producción (que incluye varios transpilers) llamada Ivy, sustituyendo principalmente el transpiler original llamado tsc.

En efecto, Ivy es mucho más eficaz que antes, ya que si su objetivo siempre es traducir en código JavaScript y HTML las clases TypeScript inherentes a los componentes, así como las plantillas asociadas, genera huellas de memoria más bajas (principalmente para mejorar la eficiencia de las aplicaciones Angular sobre los aparatos móviles). También debe tenerse en cuenta que el código generado por Ivy, va a crear un DOM que incrementa mucho más la eficacia, ya que vuelve a instanciar menos objetos en memoria del navegador. Por extensión del término, el DOM (Document Object Model) es la jerarquía...

Los decoradores

Un componente o un módulo se implementa a través de una clase TypeScript. En el mundo de Angular, hay otras piezas de software implementadas por una clase: por ejemplo, los servicios, las directivas o los pipes. Todas estas clases son codificadas con decoradores. Los decoradores son funciones que utilizan la arroba (@) como prefijo, que admiten como argumentos los metadatos que se agrupan en un objeto y que definen el comportamiento de la clase. Estas funciones son muy particulares: son las factorías las que producen «de segunda mano», las clases específicas de la naturaleza que le confiere el decorador.

TypeScript es una extensión de JavaScript, antes de cualquier implementación efectiva de la lógica de negocios de un componente (o de un módulo, un servicio, etc.), la clase correspondiente será consumida por el transpiler tsc para producir código JavaScript «puro» (esta fase se cachea durante la utilización de Angular CLI).

Entre todos los decoradores propuestos por Angular, a continuación se muestran los siete más normales (veremos otros en este libro).

Tres decoradores estructuran las operaciones de negocio:

El decorador @NgModule() crea un módulo.
El decorador @Component() crea un componente.
El decorador @Injectable() crea una clase inyectable, es decir, que se podrá inyectar al constructor de un componente. Veremos...

Creación de un nuevo componente que muestra un mensaje

Quiere crear un nuevo componente que se integrará en la plantilla del componente de más alto nivel, ya creada por Angular CLI (por lo tanto, la plantilla del componente AppComponent se modificará en consecuencia).

1. Creación del componente

Quiere crear un componente que muestre un mensaje, cuyo texto esté contenido en una variable declarada en la clase que la implementa.

Para crear el componente, utilice el comando ng con la opción generate y el argumento component:

ng generate componente Mycomponent

A continuación se muestra el mismo comando en modo escritura abreviada:

ng g c Mycomponent

El efecto de este comando es crear una subcarpeta con el nombre del componente, en la carpeta app.

A continuación se muestra lo que Angular CLI muestra:

create src/app/Mycomponent/Mycomponent.component.css  
create src/app/Mycomponent/Mycomponent.component.html  
create src/app/Mycomponent/Mycomponent.component.spec.ts  
create src/app/Mycomponent/Mycomponent.component.ts  
update src/app/app.module.ts

Como ya ha comprobado, un componente tiene una triple faceta: la clase TypeScript que la implementa, su plantilla y la hoja de estilos asociada a esta (el archivo con extensión .spec.ts es un archivo de especificación de pruebas unitarias, para el framework JavaScript Jasmine a ejecutar con la herramienta Karma).

A continuación se muestra el código del archivo Mycomponent.component.ts, que se ha creado:

import { Component, OnInit }...

El ciclo de vida de un componente

Un componente pasa por diferentes etapas, desde su nacimiento a su muerte. Es posible interceptar estas etapas y asociar código a través de los métodos predefinidos (y se declaran en las interfaces de programación). Estos métodos se llaman hooks.

A continuación se muestra la lista de los cuatro hooks más importantes:

ngOnChanges(): este método se llamada durante la creación del componente, y después de cada cambio de valor de un atributo escalar decorado por @Input().
ngOnInit(): este método se llama durante la creación del componente (justo después de la primera llamada de ngOnChanges()).
ngDoCheck(): este método se implementa para conocer los cambios de los valores internos de objetos o listas, cambios de valores no identificables por el hook ngOnChanges().
ngOnDestroy(): este método se llama justo antes de que el componente sea designado.

Para utilizar uno de estos hooks, es necesario importar la interfaz que implementa el método correspondiente.

Por ejemplo, si quiere interceptar la inicialización del componente para ejecutar código durante su creación, debe:

importar la interfaz de programación: import { OnInit } from ’@angular/core’;
implementar el método ngOnInit().

Existen otros cuatro hooks, pero dadas sus implementaciones raras, no se detallarán en...

Conocimientos adquiridos en este capítulo

En este capítulo, después de haber explicado la filiación de Angular, hemos examinado los dos principales puntos fuertes del framework Angular.

El primer punto fuerte, se centra en el hecho de que la parte cliente (la aplicación mono página realizada con Angular) y la parte servidora, están totalmente desacopladas, el cliente y el servidor solo intercambian los datos (por lo tanto, en el marco de una arquitectura MEAN, el servidor asociado a Angular es un servidor Node.js, que gestiona las bases de datos MongoDB).

El segundo punto fuerte es la modularidad que este framework organiza a dos niveles: en el nivel de los módulos (que representan la aplicación - el root module -o la implementación de grandes funcionalidades - los feature modules), y en el nivel de los componentes (que son las piezas de software). Cualquier feature module, se puede (¿debe?) diseñar para volver a importarse en otro módulo de otra aplicación.

Angular (y su inmersión en el seno de una arquitectura MEAN), se ha situado respecto al prisma del modelo MVC. Al acercarnos a este modelo, entendemos que Angular permite una muy buena evolución estructural de una aplicación web, desacoplando las interfaces de las operaciones, y que permite desacoplar las conexiones entre componentes.

A continuación hemos mostrado cómo crear un proyecto...

Introducción al framework aplicativo Angular