Angular 2
रेस्टफुल एपीआई के साथ Angular2 में CRUD

वाक्य - विन्यास

• @ विशेषण () // इस सेवा का उदाहरण बनाते समय निर्भरता को इंजेक्ट करने के लिए निर्भरता इंजेक्टर बताता है।

• request.subscribe () // यह वह जगह है जहां आप वास्तव में अनुरोध करते हैं। इसके बिना आपका अनुरोध नहीं भेजा जाएगा। इसके अलावा आप कॉलबैक फ़ंक्शन में प्रतिक्रिया पढ़ना चाहते हैं।

• कंस्ट्रक्टर (निजी विकी सर्विस: विकिपीडिया सेवा) {} // चूँकि हमारी सेवा और यह निर्भरताएँ निर्भरता इंजेक्टर द्वारा इंजेक्ट की जाती हैं, इसलिए ऐप को यूनिट टेस्टिंग के लिए कंपोनेंट में सर्विस को इंजेक्ट करना एक अच्छा अभ्यास है।

Angular2 में एक आराम एपीआई से पढ़ें

घटक से एपीआई तर्क को अलग करने के लिए, हम एपीआई ग्राहक को एक अलग वर्ग के रूप में बना रहे हैं। यह उदाहरण वर्ग विकिपीडिया एपीआई से यादृच्छिक विकी लेख प्राप्त करने का अनुरोध करता है।

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

और हमारे नए एपीआई क्लाइंट का उपभोग करने के लिए एक घटक है।

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