Servicios

Los servicios nos permiten mantener comunicadas diferentes partes del código: Componentes, Directivas,  Clases, otros Servicios, etc.

Angular nos permite crear una clase que la usaremos como un servicio. Llamemos a esa clase "LogService" y al archivo "log.service.ts".

<!-- consola.service.ts -->

export enum Estado {
    BIEN,
    ERROR,
    INFO
}


export class ConsolaService {
    EscribirEnConsola(accion: Estado, mensaje: string) {
        let estilos: string
        if(accion===Estado.BIEN) {
            estilos = "color: green; font-weight: bold;"
        } else if (accion===Estado.ERROR) {
            estilos = "color: red; font-weight: bold;"
        } else {
            estilos = "color: yellow; font-weight: bold;"
        }
        console.log(`%c ${mensaje}`, estilos)
    }
}

Y usarlo dentro de un componente por ejemplo, instanciando la clase.

<!-- micomponente.component.ts -->
...
import { Estado, ConsolaService } from "./servicios/consola.service"

...
export class MiComponente {

    ...
    private consola: ConsolaService

    constructor(){
        this.consola = new ConsolaService()
    }

    grabar() {
        ...
        this.consola.EscribirEnConsola(Estado.BIEN, "Registro guardado")
    }
}

Inyectando un servicio

El servicio se puede instanciar desde el constructor sin usar "new".

...
    constructor(private consola: ConsolaService) {}
...
@Component({
    selector: "app-micomponente",
    templateUrl: "./app-micomponente.html",
    styleUrls: ["./app-micomponente.css"],
    providers: [ConsolaService]
})

Pero para que funcione dentro de un componente hay que modificar los parámetros del decorador @Component para agregar la propiedad "providers".

Alcance de un servicio

Módulo

El servicio estará disponible para todos los componentes, directivas y servicios vinculados al módulo.

Componente

El servicio estará disponible para el componente y todos sus componentes hijos.

Componente hijo

El servicio estará disponible para el componente hijo y todos sus componentes hijos.

Para inyectar un servicio dentro de otro servicio se necesita usar el decorador @Injectable.

import { Injectable } from "@angular/core"
import { Injectable } from "@angular/core"

@Injectable()
export class miServicio {
    ...
}

La clase de servicio se define de la siguiente forma:

Comunicación entre componentes

Para comunicar un componente con otro (u otros) se usa clase EventEmitter.

 

Se define el emisor dentro de la clase del servicio

onCambio = new EventEmitter<string>()

Para emitir:

this.onCambio.emit("prueba")

Para recibir:

this.onCambio.subscribe(
    data => console.log(data)
)

Servicios en Angular6

En Angular6 se ha agregado una nueva forma de declarar un servicio

Hasta Angular5 se declaraba de la siguiente manera:

<!-- mi-servicio.service.ts -->

@Injectable()
export class MiServicio {}


<!-- app.module.ts -->
import { MiServicio } from "./mi-servicio.service.ts"

@NgModule({
    ...
    providers: [MiServicio]
    ...
})
export class AppModule {}

Desde Angular6 se puede declarar también de la siguiente manera:

<!-- mi-servicio.service.ts -->

@Injectable({providedIn: "root"})
export class MiServicio {}


<!-- app.module.ts -->
@NgModule({
    ...
})
export class AppModule {}

Tarea 1

Creen dos listas. La primera tendrá los nombres de usuarios activos y la segunda tendrá los nombres de usuarios inactivos.

Creen dos componentes: Activos (mostrará los usuarios activos) e Inactivos (mostrará los usuarios inactivos)

Cuando se le clic a un usuario activo, debe pasar a la lista de usuarios inactivos, y viceversa.

Tarea 2

Creen una lista de nombres y apellidos de usuarios.

Creen dos componentes: listado y edición.

El componente "listado" mostrará la lista de usuarios.

El componente "edición" permitirá editar el nombre y apellido de un usuario.

El componente "edición" tendrá un botón "Grabar". Mientras no se presione ese botón, el nombre y apellido del usuario no cambiará permanentemente.

Tarea 3

Creen una app para ingresar recetas. 

Creen cuatro componentes: 

- "Listado de recetas"

- "Formulario" para ingresar una receta

- "Ingrediente" para agregar por separado cada ingrediente

- "Detalle" para mostrar la receta cuando se selecciona una del componente "Listado de recetas"

Cada receta tendrá los siguientes campos: nombre (string), departamento (string), preparación (string) e ingredientes (Array de string).

Usen un modelo para la receta (clase o interface).

Usen un servicio para comunicar los componentes.

Creen una directiva para el select de departamentos.

Tarea 4

Creen una app para consultar y/o modificar la información de alumnos de una universidad. 

Creen tres componentes: 

- "Listado" de alumnos.

- "Edición" de alumno.

- "Detalle" de alumno

Usen un modelo y un servicio.

Los datos del alumno son: nombre, apellido, carrera.

6 Angular: Servicios

By Sergio Hidalgo

Made with Slides.com

6 Angular: Servicios

Servicios: ¿para qué los necesitamos? ¿cómo los usamos?

  • 552

More from Sergio Hidalgo