El concepto de Angular Modules es un concepto cercano al de Java Archive de Java o DLL de .NET en el cual nosotros queremos definir un grupo de funcionalidad reutilizable. Vamos a construir un ejemplo sencillo de Angular Modules. Para ello vamos a partir de un componente de Angular que utiliza un par de servicios.
Abordemos el código:
import { Component } from '@angular/core'; import {Servicio1Service} from "./servicio1.service" import {Servicio2Service} from "./servicio2.service" @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { mensaje1:string; mensaje2:string; constructor(s1:Servicio1Service,s2:Servicio2Service) { this.mensaje1=s1.mensaje1(); this.mensaje2=s2.mensaje2(); } }
Veamos lo que hace la plantilla :
{{mensaje1}} {{mensaje2}}
Veamos lo que hacen los servicios :
import { Injectable } from '@angular/core'; @Injectable() export class Servicio1Service { constructor() { } mensaje1() { return "hola1"; } }
import { Injectable } from '@angular/core'; @Injectable() export class Servicio2Service { constructor() { } mensaje2() { return "hola2" } }
Como podemos ver se trata de dos servicios sencillos . Para que Angular los pueda usar necesitaremos ir al app.module.ts y darlos de alta como providers.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HolaComponent } from './hola/hola.component'; import {Servicio1Service} from "./servicio1.service" import {Servicio2Service} from "./servicio2.service" @NgModule({ declarations: [ AppComponent, HolaComponent ], imports: [ BrowserModule, ], providers: [Servicio1Service,Servicio2Service], bootstrap: [AppComponent] }) export class AppModule { }
Si cargamos el componente podremos ver los mensajes en la pantalla:
Angular Modules
Vamos a hacer lo mismo pero construyendo varios servicios que se encuentren dentro de un módulo.
El primer paso es usar Angular Cli y ejecutar el siguiente comando:
ng generate module mimodulo
Este comando nos generará una nueva carpeta en la cual podemos comenzar a ubicar servicios para ello utilizaremos Angular Cli:
ng generate service mimodulo/servicio3
ng generate service mimodulo/servicio4:
Acabamos de generar dos servicios dentro de un módulo ,veamos cual es la estructura de carpeta:
MiModulo.module.ts
En esta carpeta tenemos lo servicios y los ficheros de spec para realización de Test . Ahora bien tenemos también el fichero mimodulo.module.ts que define la estructura del módulo, veamos su contenido.
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {Servicio3Service} from "./servicio3.service" import {Servicio4Service} from "./servicio4.service" @NgModule({ imports: [ CommonModule ], declarations: [ ], providers: [Servicio3Service,Servicio4Service] }) export class MimoduloModule { }
El módulo básicamente se define a través de del decorador @NgModule que contiene las siguientes secciones:
imports: Se encarga de importar otros módulos que sean necesarios en nuestro módulo
declarations:Define los componentes y directivas que pertenecen a este módulo
providers: Declara los servicios que otros componentes pueden usar si utilizan este módulo.
En nuestro caso nuestro módulo esta orientado a servicios así que simplemente rellenamos los providers con Servicio3 y Servicio4
Veamos el código de los proveedores:
import { Injectable } from '@angular/core'; @Injectable() export class Servicio3Service { constructor() { } mensaje3() { return "hola3"; } }
import { Injectable } from '@angular/core'; @Injectable() export class Servicio4Service { constructor() { } mensaje4() { return "hola4"; } }
En principio son iguales a los anteriores . Vamos a usar el módulo en nuestro componente. Para ello tendremos que ir al app.module.ts e importar el módulo.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HolaComponent } from './hola/hola.component'; import {Servicio1Service} from "./servicio1.service" import {Servicio2Service} from "./servicio2.service" import {MimoduloModule} from "./mimodulo/mimodulo.module" @NgModule({ declarations: [ AppComponent, HolaComponent ], imports: [ BrowserModule, MimoduloModule ], providers: [Servicio1Service,Servicio2Service], bootstrap: [AppComponent] }) export class AppModule { }
Acabamos de registrar un módulo para nuestro componente principal
Es importante observar que ya no tenemos la necesidad de inyectar como proveedores el Servicio3Service y el Servicio4Services esas inyecciones son realizadas por el módulo . Es momento de ver como queda el código que hace referencia al componente.
import { Component } from '@angular/core'; import {Servicio1Service} from "./servicio1.service" import {Servicio2Service} from "./servicio2.service" import {Servicio3Service} from "./mimodulo/servicio3.service" import {Servicio4Service} from "./mimodulo/servicio4.service" @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { mensaje1:string; mensaje2:string; mensaje3:string; mensaje4:string; constructor(s1:Servicio1Service,s2:Servicio2Service,s3:Servicio3Service,s4:Servicio4Service) { this.mensaje1=s1.mensaje1(); this.mensaje2=s2.mensaje2(); this.mensaje3=s3.mensaje3(); this.mensaje4=s4.mensaje4(); } }
Los cambios son muy sencillos , simplemente hemos añadido los dos nuevos servicios que devuelven los mensajes. Por lo tanto también cambiaremos la plantilla para tener dos mensajes más.
{{mensaje1}} {{mensaje2}} {{mensaje3}} {{mensaje4}}
Si ejecutamos ahora el programa veremos que salen 4 mensajes:
Acabamos de construir nuestro primer ejemplo con módulos:
Hola compañero,
Estoy entrando en este mundo de Angular y respecto a tu publicación logro entender que lo que nos ahorramos es el no incluir dentro de providers[ ] los servicios 3 y 4.
¿Cuál sería la diferencia de usar @Injectable({
providedIn: “root”
})
Saludos, espero puedas ver mi comentario y responder, muchas gracias de antemano.
si exactamente , queda declarado en root y todos pueden acceder a los servicios es una simplicación que llego creo que en Angular 6
Buenas Cesar, tus tutoriales de angular me esta sirviendo mucho. Estoy aprendiendolo para tener mas completo mi perfil de fullstack, si bien tiene dificultad media en aprender, pero tus explicaciones lo hacen simple. muchas gracias
saludos
de nada 🙂
Muchas gracias Cesar, en principio lo veo un poco enrevesado, podrias poner un ejemplo practico de utilizacion mas simple, …, que es mejor muchos modulos, o pocos modulos y muchos compoenentes..cual es la norma¿?
Gracias por tu gran labor.
Todo depende mucho del tamaño de la aplicación y de la necesidad de reutilizacion, cuando mas grande la aplicación sueles necesitar más modulos . Los componentes tambien pueden ir en sus módulos 🙂