Módulos en Angular+

Los módulos de Angular representan un concepto central y juegan un papel fundamental en la

estructuración de las aplicaciones Angular.

Un Módulo Angular agrupa un conjunto de artefactos Angular, como son componentes, directivas,
pipes y servicios que forman parte de ese mismo módulo. Dicho esto, representa una agrupación
lógica en lo que podríamos llamar área funcional de nuestra aplicación (ej. módulo de contactos,
módulo de administración). Es más, un Módulo Angular también define las dependencias con otros
módulos, esto es, que otros módulos necesita importar y a su vez qué componentes, directivas o
pipes exporta.

“En Angular los módulos de declaran como clases de TypeScript. Estas clases, habitualmente vacías, son
decoradas con una función especial. Es la función @NgModule() que recibe un objeto como único argumento. En
las propiedades de ese objeto es donde se configura el módulo.”
El ejemplo más notable es el AppModule original que genera el CLI en el fichero app.module.ts:

Componentes en Angular+

Los componentes son los bloques básicos de construcción de las páginas web en Angular.
Contienen una parte visual en html (la Vista) y una funcional en Typescript (el Controlador).

“La aplicación original que crea el CLI nos regala un primer componente de ejemplo en el
fichero app.component.ts. Según la configuración del CLI este componente puede haber sido
creado en un sólo fichero o hasta cuatro: (el controlador, con la vista y los estilos en ficheros
propios y fichero extra para pruebas unitarias).
”
Anatomía de un componente
Los componentes, como el resto de artefactos en Angular, serán clases TypeScript
decoradas con funciones específicas. En este caso la función es @Component() que recibe un
objeto de definición de componente. Igual que en el caso de los módulos contiene las propiedades
en las que configurar el componente.
Los componentes definen nuevas etiquetas HTML para ser usados dentro de otros
componentes. Excepcionalmente en este caso por ser el componente raíz se consume en la
página index.html. El nombre de la nueva etiqueta se conoce como selector. En este caso la
propiedad selector: "ab-root" permite el uso de este componente dentro de otro con esta
invocación <ab-root></ab-root>. En este caso el componente raíz.

“Particularidades del componente raíz. Su nombre oficial es AppComponent, y su selector debería

llamarse ab-app. Está formado a partir del prefijo de la aplicación ab y su nombre oficioso root.
Si no se dice lo contrario el prefijo app se usará en todos los componentes propios, pue es
asignado por defecto durante la generación de la aplicación. Yo prefiero personalizarlo usando el
modificador --prefix o -p durante el inicio ng new.

Volviendo al componente raíz; está destinado a ser usado en la página principal, en el index.html.
Eso obliga a registrarlo de una manera especial en el módulo raíz. Hay que incluirlo en el
array bootstrap: [AppComponent], es ahí donde se incluyen los componentes con la capacidad de
lanzar bootstrap la aplicación.
”
Y en el index.html

La plantilla representa la parte visual del componente. De forma simplificada, o cuando tiene poco
contenido, puede escribirse directamente en la propiedad template del objeto decorador. Pero es
más frecuente encontrar la plantilla en su propio fichero html y referenciarlo como una ruta relativa
en la propiedad templateUrl.
La propiedad styles y su gemela stylesUrl permiten asignar estilos CSS, SASS o LESS al
componente. Estos estilos se incrustan durante la compilación en los nodos del DOM generado. Son
exclusivos del componente y facilitan el diseño y maquetación granular de las aplicaciones.

Los estilos, ausentes en este ejemplo, podrían incluirse como un array de cadenas, o llevarse a un
fichero propio como en el caso de la vista.

Generación de componentes

Para crear nuevos componentes vamos a usar de nuevo el comando generate del CLI . Pero
ahora con los planos para construir un componente. La sintaxis completa del comando ng
generate component o abreviadamente ng g c permite crear componentes en diversas formas.
Directivas en Angular+

Las directivas de Angular son básicamente funciones que son invocadas cuando el DOM
(Document Object Model) es compilado por el framework de Angular. Se podría decir que las
directivas están ligadas a sus correspondientes elementos del DOM cuando el documento es
cargado. La finalidad de una directiva es modificar o crear un comportamiento totalmente nuevo.

Angular posee directivas muy útiles a la hora de realizar ciertos procesos, a continuación
definiremos algunas :

La directiva ngFor, o *ngFor:

Esta directiva nos permite repetir una serie de veces un bloque de HTML en aplicaciones
Angular+. Esta repetición nos permite recorrer una estructura de array y para cada uno de sus
elementos replicar una cantidad de elementos en el DOM.
La directiva ngIf

Imaginemos que no queremos mostrar el mensaje que dice "No counter was created yet" cuando
se inicia nuestra app. En su lugar, si el usuario no ha creado ningún contador, no mostramos nada.
Pero si ha hecho click sobre el botón "Add Counter", mostraremos un mensaje que diga que un
contador ha sido creado.

Es decir, queremos crear una condición. ¿Y cómo se crean condiciones en JavaScript? Exacto,
con if statements. Angular nos ofrece una herramienta basada en los if statements: la
directiva ngIf.
La directiva ngClass

Esta directiva nos permite añadir o quitar clases de CSS dinámicamente.

Directiva ngSwitch

La directiva en un contenedor especifica una expresión con la que hacer coincidir. Las
expresiones para coincidir son proporcionadas por directivas sobre vistas dentro del
contenedor.[ngSwitch]ngSwitchCase

 Se representa cada vista que coincide.

 Si no hay coincidencias, se representa una vista con la ngSwitchDefaultdirectiva.
 Los elementos dentro de la declaración pero fuera de cualquiera o directiva se
conservan en la ubicación.[NgSwitch]NgSwitchCasengSwitchDefault
Lifecycle Method (Metodo de Ciclo de Vida)

En Angular, cada componente tiene un ciclo de vida, una cantidad de etapas diferentes que
atraviesa. Hay 8 etapas diferentes en el ciclo de vida de los componentes. Cada etapa se
denomina lifecycle hook event o en ‘evento de enlace de ciclo de vida’. Podemos utilizar estos
eventos en diferentes fases de nuestra aplicación para obtener el control de los componentes.
Como un componente es una clase de TypeScript, cada componente debe tener un método
constructor.

El constructor de la clase de componente se ejecuta primero, antes de la ejecución de cualquier

otro lifecycle hook. Si necesitamos inyectar dependencias en el componente, el constructor es el
mejor lugar para hacerlo. Después de ejecutar el constructor, Angular ejecuta sus métodos de
enganche de ciclo de vida en un orden específico.
Esquema del ciclo de vida en angular
Revisemos cada uno de los eventos:

 ngOnChanges: Este evento se ejecuta cada vez que se cambia un valor de un input
control dentro de un componente. Se activa primero cuando se cambia el valor de

una propiedad vinculada. Siempre recibe un change data map o mapa de datos de
cambio, que contiene el valor actual y anterior de la propiedad vinculada envuelta
en un SimpleChange

 ngOnInit: Se ejecuta una vez que Angular ha desplegado los data-bound

properties(variables vinculadas a datos) o cuando el componente ha sido
inicializado, una vez que ngOnChanges se haya ejecutado. Este evento es utilizado
principalmente para inicializar la data en el componente.

 ngDoCheck: Se activa cada vez que se verifican las propiedades de entrada de

un componente. Este método nos permite implementar nuestra propia lógica o
algoritmo de detección de cambios personalizado para cualquier componente.

 ngAfterContentInit: Se ejecuta cuando Angular realiza cualquier muestra de

contenido dentro de las vistas de componentes y justo después de ngDoCheck.
Actuando una vez que todas las vinculaciones del componente deban verificarse
por primera vez. Está vinculado con las inicializaciones del componente hijo.

 ngAfterContentChecked: Se ejecuta cada vez que el contenido del componente

ha sido verificado por el mecanismo de detección de cambios de Angular; se llama
después del método ngAfterContentInit. Este también se invoca en cada ejecución
posterior de ngDoCheck y está relacionado principalmente con las inicializaciones
del componente hijo.

 ngAfterViewInit: Se ejecuta cuando la vista del componente se ha inicializado por

completo. Este método se inicializa después de que Angular ha inicializado la vista
 del componente y las vistas secundarias. Se llama después de ngAfterContentChecked.
Solo se aplica a los componentes.

 ngAfterViewChecked: Se ejecuta después del método ngAfterViewInit y cada vez que

la vista del componente verifique cambios. También se ejecuta cuando se ha
modificado cualquier enlace de las directivas secundarias. Por lo tanto, es muy
útil cuando el componente espera algún valor que proviene de sus componentes
secundarios.

 ngOnDestroy: Este método se ejecutará justo antes de que Angular destruya los
componentes. Es muy útil para darse de baja de los observables y desconectar
los event handlers para evitar memory leaks o fugas de memoria.