Angular 2
안정적인 API로 각도 2의 CRUD

통사론

• @Injectable () //이 서비스의 인스턴스를 생성 할 때 종속성 인젝터에 종속성을 주입하도록 지시합니다.

• request.subscribe () // 실제로 요청을하는 곳입니다. 이 정보가 없으면 요청이 전송되지 않습니다. 또한 콜백 함수에서 응답을 읽으려고합니다.

• constructor (private wikiService : WikipediaService) {} // 우리의 서비스와 의존성 모두가 의존성 인젝터에 의해 주입 가능하기 때문에 애플리케이션 테스트를 위해 컴포넌트에 서비스를 주입하는 것이 좋습니다.

Angular2로 편안한 API에서 읽기

API 로직을 구성 요소와 분리하기 위해 별도의 클래스로 API 클라이언트를 작성합니다. 이 예제 클래스는 Wikipedia API에 임의의 Wiki 기사를 요청합니다.

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

새로운 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;
        });
    }
}