Angular 2
CRUD dans Angular2 avec API Restful

Syntaxe

• @Injectable () // Indique à l'injecteur de dépendance d'injecter des dépendances lors de la création de l'instance de ce service.

• request.subscribe () // C'est là que vous faites en fait la demande. Sans cela, votre demande ne sera pas envoyée. Vous souhaitez également lire la réponse dans la fonction de rappel.

• constructeur (wikiService privé: WikipediaService) {} // Étant donné que notre service et ses dépendances peuvent être injectés par l'injecteur de dépendance, il est conseillé d'injecter le service dans le composant pour que l'unité teste l'application.

Lecture d'une API Restful dans Angular2

Pour séparer la logique API du composant, nous créons le client API en tant que classe distincte. Cet exemple de classe demande à l'API Wikipedia d'obtenir des articles wiki aléatoires.

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

Et avoir un composant pour consommer notre nouveau 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;
        });
    }
}