Angular 2
CRUD in Angular2 met Restful API

Syntaxis

• @Injectable () // Vertelt de afhankelijkheidsinjector om afhankelijkheden te injecteren bij het maken van een exemplaar van deze service.

• request.subscribe () // Dit is waar je eigenlijk het verzoek. Zonder dit wordt uw aanvraag niet verzonden. Ook wilt u antwoord lezen in de callback-functie.

• constructor (private wikiService: WikipediaService) {} // Omdat zowel onze service als de afhankelijkheden injecteerbaar zijn door de afhankelijkheidsinjector, is het een goede gewoonte om de service naar component te injecteren voor het testen van de app.

Lezen van een Restful API in Angular2

Om API-logica van de component te scheiden, maken we de API-client als een afzonderlijke klasse. Deze voorbeeldklasse doet een verzoek aan Wikipedia API om willekeurige wiki-artikelen te krijgen.

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

En hebben een component om onze nieuwe API-client te consumeren.

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