Angular2: Организация кода веб-сервиса/http-запросов

Question

В угловом 1x я смог отделить мои вызовы веб-сервисов в сервисе, как показано ниже.

angular.module('app.APIServices', []) 

.factory('API', ['serviceBase', 'clientConfig', '$http', 'cacheService', 
    function(serviceBase, clientConfig, $http, cacheService) { 

     return { 
      getSystemStats: function(params) { 
       var params = _.merge(params, serviceBase.baseParams); 
       return $http({ 
        url: serviceBase.serviceBaseUri + '/GetSystemStats', 
        method: 'POST', 
        data: params, 
        cache: false 
       }).then(function(response) { 
        return response.data; 
       }) 
      } 
       // more methods in a similar way can be added. 
     } 
    } 
); 

, а затем использовать вышеуказанное обслуживание в контроллере:

API.getSystemStats(paramsObject).then(function(result){ 
    // run success logic here 
},function(reason){ 
    // run failure 
}); 

Я хотел бы осуществить такое же разделение в Angular2. Я хотел бы избежать определения URL-адресов webservice во всех компонентах.

Что было бы лучшим способом достичь этого?

Answer 1

Вы также можете обернуть http-сервис в свой сервис в Angular 2.0.

Вот пример:

import {Http, Response} from '@angular/http' 
import {Injectable} from '@angular/core' 

@Injectable() 
export class AddressBookService { 

    http:Http; 
    constructor(http:Http){ 
     this.http = http; 
    } 

    getEntries(){ 
     return this.http.get('./people.json').map((res: Response) => res.json()); 
    } 

} 

Услуга определено выше, затем могут быть импортированы в компонент, как так:

@Component({ 
    selector: 'address-book', 
    templateUrl: './components/dependency-injection/address-book.html', 
    providers:[AddressBookService] 
}) 

export class AddressBook { 

    result:Object; 

    constructor(addressBookService:AddressBookService){ 
     this.result = {people:[]}; 
     addressBookService.getEntries().subscribe(res => this.result = res); 


    } 
} 

@injectable необходимо на службу, чтобы разрешить полный DI как для компонента, так и для службы.

В этом случае служба зарегистрирована как поставщик на уровне компонента. Вы также можете зарегистрировать его на уровне приложения, указав его в методе начальной загрузки приложения.

Некоторые подробнее здесь: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0

Вот полный источник для примера: https://github.com/thelgevold/angular-2-samples/tree/master/components/dependency-injection