Angular 2
CRUD en Angular2 con API Restful

Sintaxis

• @Injectable () // Indica al inyector de dependencia que inyecte dependencias al crear una instancia de este servicio.

• request.subscribe () // Aquí es donde realmente realiza la solicitud. Sin esto su solicitud no será enviada. También desea leer respuesta en la función de devolución de llamada.

• constructor (wikiService privado: WikipediaService) {} // Dado que tanto nuestro servicio como sus dependencias son inyectables por el inyector de dependencias, es una buena práctica inyectar el servicio al componente para probar la aplicación de la unidad.

Leer de una API Restful en Angular2

Para separar la lógica de la API del componente, estamos creando el cliente de la API como una clase separada. Esta clase de ejemplo realiza una solicitud a la API de Wikipedia para obtener artículos de wiki aleatorios.

    import { Http, Response } from '@angular/http';
    import { Injectable } from '@angular/core';
    import { Observable }     from 'rxjs/Observable';
    import 'rxjs/Rx';
    
    @Injectable()
    export class WikipediaService{
        constructor(private http: Http) {}
    
        getRandomArticles(numberOfArticles: number)
        {
            var request = this.http.get("https://en.wikipedia.org/w/api.php?action=query&list=random&format=json&rnlimit=" + numberOfArticles);
            return request.map((response: Response) => {
                return response.json();
            },(error) => {
                console.log(error);
                //your want to implement your own error handling here.
            });
        }
    }

Y tener un componente para consumir nuestro nuevo cliente API.

import { Component, OnInit } from '@angular/core';
import { WikipediaService } from './wikipedia.Service';

@Component({
    selector: 'wikipedia',
    templateUrl: 'wikipedia.component.html'
})
export class WikipediaComponent implements OnInit {
    constructor(private wikiService: WikipediaService) { }

    private articles: any[] = null;
    ngOnInit() { 
        var request = this.wikiService.getRandomArticles(5);
        request.subscribe((res) => {
            this.articles = res.query.random;
        });
    }
}