Servicios e Inyección de Dependencia

En este ejercicio vamos a aprender a como crear un servicio en angular y llamar a ese servicio usando la inyección de dependencias

1) Para crear el servicio vamos a ejecutar el siguiente comando en nuestro proyecto angular

ng g s service1

2) Despues de eso tendremos la siguiente estructura

3) En nuestro archivo del servicio vamos a pegar el siguiente codigo

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

//esta interfaz define el tipo de datos a devolver
export interface Country {
  name: string;
  code: string;
}

//colocamos el valor de 'providedIn' en 'root' para que este disponible en toda la aplicacion
@Injectable({
  providedIn: 'root'
})
export class Service1Service {

  constructor() { }

// creamos un método que devuelve una lista de paises
getCountries() : Country[] {
    let countries: Country[] = [
      { name: 'India', code: 'IN' },
      { name: 'United States', code: 'US' },
      { name: 'United Kingdom', code: 'UK' },
      { name: 'Australia', code: 'AU' },
      { name: 'Canada', code: 'CA' },
      { name: 'South Africa', code: 'ZA' },
      { name: 'Brazil', code: 'BR' }
    ]; 
    return countries;
  }
}

4) Ahora en nuestro componente haremos la inyección de dependencia, declarando el servicio como parámetro en el constructor

  constructor(private service1: Service1Service) {
    this.countries = this.service1.getCountries();
  }

5) en nuestro componente principal declaramos una variable countries para mostrarla por pantalla

import { Component } from '@angular/core';
import { Country, Service1Service } from './services/service1.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example1';
  countries: Country[];

  constructor(private service1: Service1Service) {
    this.countries = this.service1.getCountries();
  } 
}

6) En nuestro template insertaremos nuestro codigo que muestra los valores traidos desde el servicio

<h1>Services and Dependcy Injection</h1>

<div class="container">
  <h1>List of Countries</h1>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Code</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let country of countries">
        <td>{{country.name}}</td>
        <td>{{country.code}}</td>
      </tr>
    </tbody>
  </table>
</div>

<router-outlet></router-outlet>

7) Ejecutamos el proyecto y vemos los valores obtenidos