AngularJS | Servicios – Barcelona Geeks

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.

PASO #1: Creando un servicio:-
```
ng g s service-name
```

s es una forma abreviada de servicio. Esto crea dos archivos nombre-servicio.servicio.spec.ts que no se debe cambiar y un nombre-servicio.servicio.ts.

PASO #2: Después de crear el servicio, tenemos que incluirlo en los proveedores de app.module.ts

proveedores: [Service-nameService],

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

PASO #3: Ahora tenemos que hacer cambios en service-name.service.ts crear una variable json que se supone que debe estar disponible para varios componentes

PASO #4: En app.component.ts haga los siguientes cambios:

import { Service-nameService } from './service-name.service';

tal como lo hicimos en proveedores.

tipo: newData

En el constructor, defina una propiedad del tipo Servicio

constructor(private demoService: ServiceService) {}

También cree un método ngOnInit:

    ngOnInit(): void {
    this.newData=this.demoService.Sailors;

PASO #5: En app.component.html imprimiremos los datos almacenados en newData :

{{newData}}

Nota: como hemos agregado ngFor en app.component.html, tendremos que importar FormsModule en app.module.ts

Sintaxis (Ejemplo #1):
serice.service.ts

import { Injectable } from '@angular/core';
  
@Injectable({
  providedIn: 'root'
})
export class ServiceService {
  
  Sailors = [
    {
      id: 22, name: 'Dustin', rating: 7
    },
    { 
      id: 29, name: 'Brutus', rating: 1
    },
    {
      id: 31, name: 'Lubber', rating: 8
    },
    {
      id: 32, name: 'Andy', rating: 8
    },
    {
      id: 58, name: 'Rusty', rating: 10
    },
    {
      id: 64, name: 'Horatio', rating: 7
    },
    {
      id: 71, name: 'Zorba', rating: 10
    },
    {
      id: 74, name: 'Horatio', rating: 9
    }
  ];
  
  constructor() { }
  getData() {
    return 'This is the list of sailors and their corresponding ratings';
  }
}

En app.component.ts

import { Component } from '@angular/core';
import { ServiceService } from './service.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newData;
  message:string='';
  constructor(private demoService: ServiceService) {}
  ngOnInit(): void {
    this.newData=this.demoService.Sailors;
    this.message=this.demoService.getData();
  }
}

aplicación.componente.html

<b>Service Example</b>
<h5>{{ message }}</h5>
<p> ID Name Rating</p>
<div *ngFor="let m of newData;">
    <p>{{m.id}} {{m.name}} {{m.rating}}</p>
</div>

Producción:
service

Referencias:
https://coursetro.com/posts/code/61/Angular-4-Services-Tutorial

Publicación traducida automáticamente

Artículo escrito por janice_shah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta