Angular 2
CRUD in Angular2 con Restful API

Sintassi

• @Injectable () // Indica all'iniettore di dipendenza di iniettare dipendenze durante la creazione dell'istanza di questo servizio.

• request.subscribe () // Questo è dove effettivamente fare la richiesta. Senza questo la tua richiesta non verrà inviata. Inoltre, si desidera leggere la risposta nella funzione di callback.

• costruttore (wikiService privato: WikipediaService) {} // Dato che sia il nostro servizio che le sue dipendenze sono iniettabili dall'iniettore di dipendenze, è buona pratica iniettare il servizio sul componente per il test dell'unità dell'app.

Leggi da un'API riposante in Angular2

Per separare la logica dell'API dal componente, stiamo creando il client API come classe separata. Questa classe di esempio effettua una richiesta all'API di Wikipedia per ottenere articoli di wiki casuali.

    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.
            });
        }
    }

E avere un componente per consumare il nostro nuovo client 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;
        });
    }
}