Explicar los pasos para crear un servicio en Angular 2

Si alguna vez ha construido un componente, sabe que el componente contiene un código ejecutable, lo que le permite incluir cualquier funcionalidad que desee. La tarea del componente es habilitar la experiencia del usuario, que interactuará con el usuario. El componente actuará como un intermediario entre la lógica empresarial y la vista de la aplicación. Sin embargo, la guía de estilo oficial de Angular indica limitar la lógica de un componente a lo que se necesita para la vista. Los servicios deben manejar toda la otra lógica. El código del código del componente se usa principalmente para controlar y manipular la interfaz de usuario. Debe llamar a los servicios para proporcionar una funcionalidad que no esté directamente relacionada con la interfaz de usuario. Por lo tanto, si la vista no requiere la funcionalidad requerida, debe considerar la creación de un servicio.

Los servicios se usan para crear variables/datos que se pueden compartir y se pueden usar fuera del componente en el que están definidos. Un servicio es esencialmente una clase que tiene un objetivo específico. Un servicio puede ser una variable, función o característica que necesita una aplicación. A menudo usamos servicios para proporcionar una funcionalidad independiente de los componentes, para transferir datos o lógica entre componentes, o para encapsular interacciones externas como el acceso a datos. El código se vuelve más fácil de probar, depurar y reutilizar al transferir estas actividades del componente al servicio. Un servicio es una pieza reutilizable de funcionalidad que puede ser utilizada por una variedad de componentes. Los servicios se pueden usar para evitar volver a escribir el mismo código, se puede escribir una vez e inyectar en todos los componentes que usan ese servicio específico.

Es necesario tener una sola responsabilidad de servicio. No debe simplemente poner toda su funcionalidad compartida en un solo servicio en su aplicación. Los servicios son bits adicionales de funcionalidad que se pueden entregar cuando y donde se requieran en la aplicación. Logramos esto con Angular integrando nuestros servicios con el sistema de inyección de dependencia. Para generar el servicio, podemos seguir 2 formas:

• Al crearlo manualmente para realizar las tareas específicas, necesitamos instalar y configurar el servicio.
• Al usar Angular CLI, establecerá todas las configuraciones necesarias para el servicio automáticamente.

Entenderemos ambos enfoques a través de ejemplos en una secuencia.

Método 1: usando una forma manual de generar el servicio:

Crearemos la clase de servicio, usaremos un decorador para describir los metadatos y luego importaremos lo que necesitamos. Estas son las mismas técnicas fundamentales que usamos para construir manualmente nuestros componentes y tuberías personalizadas.

Sintaxis:  

import { Injectable } from '@angular/core';  

@Injectable()  

export class ServiceName {  

}

Veamos el código para construir un servicio básico cuya función es devolver la lista de cursos que ofrece un determinado instituto.

Paso 1: Cree una clase CoursesService y guarde el archivo como Courses.Service.ts. No olvide exportar la clase para que cualquier componente pueda hacer uso del servicio. Agreguemos nuestro método getdata a esta clase.

export class CoursesService {    // SERVICE CLASS

    constructor() { }
    
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

Paso 2: Luego, los metadatos del servicio se decoran con un decorador. Usamos el decorador inyectable mientras creamos servicios. Debido a que el decorador es una función, debe estar rodeado por un paréntesis de apertura y cierre.  

@Injectable()      // DECORATOR

export class CoursesService {

 constructor() { }
 
 getdata(): string[] {
   return ['C','C++', 'JAVA', 'Python'];
 }
}

Paso 3: asegúrese de que se hayan definido las importaciones correctas. Ahora nuestra clase de servicio está lista.

// IMPORT STATEMENT
import { Injectable } from '@angular/core';
  
@Injectable()
  
export class CoursesService {
  
    constructor() { }
  
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

Paso 4: Ahora, necesitamos inyectar nuestro servicio. El servicio se puede inyectar de dos maneras.

• Inyectar como un servicio global: Inyecte el servicio en el módulo raíz para convertirlo en un servicio global. Cualquier componente dentro de este módulo puede hacer uso de este servicio ahora.

  aplicación.módulo.ts

  import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { CoursesService } from "src/services/courses.service";    @NgModule({   declarations: [AppComponent],   imports: [BrowserModule],   providers: [CoursesService], // FOR GLOBAL SERVICE   bootstrap: [AppComponent], }) export class AppModule {}

• Inyectar como un servicio local: inyecte el servicio directamente en el componente para inyectarlo como un servicio local.

  aplicación.componente.ts

  import { Component } from "@angular/core"; import { CoursesService } from "src/services/courses.service";    @Component({   selector: "app-root",   templateUrl: "./app.component.html",   styleUrls: ["./app.component.css"],   providers: [CoursesService], // FOR LOCAL SERVICE }) export class AppComponent {}

Paso 5: en este paso, debemos importar el servicio al componente y usar el método.

import { Component } from "@angular/core";
import { CoursesService } from "src/services/courses.service";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  courses: string[];
  
  constructor(private _coursesService: CoursesService) {}
  
  ngOnInit() {
    this.courses = this._coursesService.getdata();
  }
}

Paso 6: actualice el componente HTML para representarlo.

<h2>Course List</h2>
<p *ngFor="let c of courses">{{ c }}</p>

Paso 7: Ejecute ‘ ng serve ‘ para iniciar la aplicación. Veremos la salida de la siguiente manera:

Método 2: uso de Angular CLI para generar el servicio. Usaremos el mismo ejemplo aquí para generar el servicio en Angular CLI.

Paso 1: Usaremos Angular CLI para crear un servicio. Se recomienda este enfoque ya que hay menos posibilidades de cometer errores. Solo se necesita un comando para hacer la tarea. Seguiremos la siguiente sintaxis para crear un servicio.

Sintaxis:

ng g service courses

Generará el esqueleto del código de servicio de la siguiente manera:

import { Injectable } from '@angular/core';  

@Injectable()
  
export class ServiceName {   
    constructor() { }
}

Paso 2: después de crear el servicio, debemos incluirlo en los proveedores de app.module.ts

providers: [CoursesService],

Aquí, la primera letra del nombre del servicio debe ser mayúscula seguida de Servicio escrito sin ningún espacio.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoursesService } from './courses.service';
  
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [CoursesService], //FOR GLOBAL SERVICE
  bootstrap: [AppComponent]
})
export class AppModule {}

Paso 3: en app.component.ts, realice los siguientes cambios:

importar el servicio entre el resto de importaciones requeridas.

import { CoursesService } from './courses.service';

Crea una variable de cualquier tipo: cursos sin mencionar ningún tipo.

En el constructor, defina una propiedad del tipo Servicio

constructor(private _coursesService: CoursesService) {}

Además, cree un método ngOnInit :

ngOnInit() {
   this.courses = this._coursesService.getdata();
 }

Después de completar las tareas anteriores, el archivo app.component.ts será como el siguiente:

import { Component } from '@angular/core';
import { CoursesService } from './courses.service';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses: string[];
  
  constructor(private _coursesService: CoursesService) {}
  
  ngOnInit() {
    this.courses = this._coursesService.getdata();
  }
}

Paso 4: En este paso, agregaremos nuestro método al servicio.

import { Injectable } from '@angular/core';  
  
@Injectable()  
  
export class CoursesService {  
      
    constructor() { }
      
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

Paso 5: En app.component.html imprimiremos los datos almacenados en los cursos.

<h2>Course List</h2>
<p *ngFor="let c of courses">{{ c }}</p>

Paso 6: Ejecute ‘ ng serve ‘, se mostrará el siguiente resultado.