En Angular tenemos varios elementos que son imprescindibles para el desarrollo de una aplicación: módulos, componentes y servicios.

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Para poder trabajar con este framework es necesario utilizar la CLI o consola de Angular, así muchos de los elementos que desarrollemos los haremos con la CLI.

Empezaremos con el primero de los elementos de este framework.

Modulos

Los módulos en Angular son la manera básica de organizar una aplicación en este framework.

En un modulo creamos una serie de archivos que están relacionados entre sí y recogidas en una misma carpeta o directorio. Esto nos permite una estupenda organización de nuestro código y sobre todo nos permite trabajar con muchos otros elementos externos que brindarán una estupenda funcionalidad a nuestra aplicación

Ng-module

Según la documentación oficial este elemento de los módulos supone «NgModules configura el inyector y el compilador y ayuda a organizar cosas relacionadas en conjunto.»

Para crear nuestro primer modulo debemos utilizar los siguientes comandos:

$ ng generate module nombre_modulo

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Puedes ampliar información sobre este elemento en al documentación oficial aquí.

modulos-componentes-servicios Módulos, componentes y servicios en Angular

En realidad Ngmodule tiene varios propósitos, el primer de ello es declarar cada cosa que creas en Angular. Para ello se basa en dos estructuras básicas: declaraciones y prestadores. Este es el nombre de la traducción pero su nombre original son declarativos y providers.

El primero de ellos, declaraciones, se suele usar para aquellos elementos que se encuentran en nuestras plantillas, normalmente relacionados con los componentes, aunque también se usan para las directivas y «pipes».

Por otro lado, los prestadores o providers se usan para los servicios, es decir , para obtener y manejar datos.

Veamos en la siguiente imagen la estructura de nuestro modulo en Code:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Cómo podemos ver se pueden observar todos los elementos de los cuales está formado nuestro modulo.

Funcionalidad de NgModule

Cuando hablamos de la funcionalidad de NGModuel hacemos referencia a un concepto de compilación anticipada. Es una funcionalidad que nos permite obtener un mayor rendimiento en nuestras aplicaciones y permite con muy pocas lineas de código un gran rendimiento.

Puedes encontrar más información en Ahead of Time (AoT) compilation.

Ambitos y visibilidad

Cuando hablamos de declarations y providers hay que dejar constancia de una diferencia notable entre los dos. No tiene el mismo ámbito y tampoco la misma visibilidad.

En el caso de declarations los componentes están en el ámbito local y en el caso de providers están en el componente global tratándose de servicios.

Esto nos lleva a una conclusión rápida y que los componentes son necesarios a nivel local, en el caso de tener que usarlos en otros lugar de manera global es necesario exportarlos.

Para ello tenemos la expresión: $ export class nombre

la diferencia con los providers es que no es necesario exportarla, estos están disponibles en cualquier lugar de nuestra aplicación.

Algunas cosas más de Ngmodule …

Los módulos se pueden cargar con entusiasmo cuando la aplicación se inicia o se pueden cargar de forma asincrónica por parte del enrutador.

Los metadatos de NgModule hacen lo siguiente:

  • Declara qué componentes, directivas y tuberías pertenecen al módulo.
  • Hace públicos algunos de esos componentes, directivas y canalizaciones para que las plantillas de componentes de otros módulos puedan usarlos.
  • Importa otros módulos con los componentes, directivas y tuberías que necesitan los componentes en el módulo actual.
  • Proporciona servicios que los otros componentes de la aplicación pueden usar.

¿Cuándo importar un modulo?

A parte de los módulos que podemos crear como en nuestro primer_modulo.js. Podemos usar módulos de Angular que pueden servirnos para nuestra aplicación.

Algunos ejemplos de modulo pueden ser los siguientes:

  • CommonModule (todo lo básico del sistema de plantillas de Angular: bindings, *nfIf, *ngFor…), excepto en el primer módulo de aplicación, debido a que ya forma parte de BrowserModule.
  • FormsModule / ReactiveFormsModule.
  • BrowserAnimationsModule.
  • FlexLayoutModule.
  • MaterialModule y módulos UI (como PrimeNg).
  • cualquier otro módulo que te de componentes, directivas o pipes.
  • HttpClientModule / HttpModule

Cada uno de estos módulos puede que los tengas que importar cada vez que los vayas a usar o solo en una ocasión, como en el caso de HttpClientModule / HttpModule.

Common Module

Cuando creamos nuestro primer modulo se produce una importación de manera automática:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Este elemento nos permite trabajar con los módulos, pero en el caso de aplicaciones muy grandes puede que sea una buena práctica crear un SharedModule.

Esto nos permite tener disponibles los componentes en el propio sharedModule. Algo que le da mayor versatilidad a nuestra aplicación.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule } from '@angular/material';

@NgModule({
imports: [CommonModule, FlexLayoutModule, MatCardModule]
})
export class SharedModule {}

Otros tipos de Ngmodules

RouterModule nos da un componente $ (<router-outlet>) y una directiva (routerLink), pero también te da servicios (ActivatedRoute para obtener parámetros de la URL, Router para navegar…).

Lazy Load

Lazy Load o carga perezosa. Hace referencia a un patrón de diseño, este patrón consiste en retrasar la carga del objeto hasta que no es llamado para su uso.

const routes: Routes = [
{ path: ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’ }
];

Ahora pasaremos a ver un ejemplo con este elemento del modulo.

Realizando un ejemplo práctico

Como ya tenemos realizado un modulo en nuestro proyecto, nos vamos a centrar en él para seguir desarrollándolo.

Dentro de nuestro archivo tenemos los siguientes elementos que vemos en la imagen:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

En tenemos los imports que necesita este modulo y los declarations que al igual que el anterior necesitamos para poder usar nuestro modulo.

Vamos a generar un componente dentro de nuestro modulo

ng generate component prueba/miComponente

Esto nos va a generar un componente que podemos ver en la imagen

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Si quisiéramos crear el componente dentro de nuestro elemento primer modulo deberíamos generar el siguiente código:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Cómo puedes observar cada uno de estos módulos y componentes han sido incluidos en nuestro archivo app.module.ts para que puedan usarse de manera global en nuestra aplicación.

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Si queremos que sea visible en nuestra aplicación deberemos usar la misma forma que con <router-outlet></router-outlet> y colocar en este archivo: app.component.html la referencia a nuestro componente <app-micomponente></app-micomponente>. Lo podemos ver en las siguientes imágenes:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

En el código:

modulos-componentes-servicios Módulos, componentes y servicios en Angular

Algo un poco más serio

Ahora vamos a crear un elemento para nuestra aplicación en donde podamos meter en una base de datos unos clientes e interactuar con este elemento.

Para ellos vamos a realizar los siguientes pasos:

  1. Generar un modulo de clientes
  2. Definir el modelo de datos que vamos a usar
  3. Crear un servicio para los clientes
  4. Crear componente que de de alta los clientes
  5. Usar el componente Alta del cliente
  6. Crear el componente listar clientes
  7. Usar el componente del listado

Continuar con esto https://desarrolloweb.com/articulos/practica-angular-modulos-componentes-servicios.html

 

Interacciones con los lectores

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Acerca de David Moya

Apasionado de la Seguridad Informática, aprendiendo en todo momento y profundizando en el mundo web y en el posicionamiento en buscadores.

Share This