Угловой 2 HTTP GET эквивалентен угловому HTTP GET

Question

Надеюсь, что кто-то может что-то прояснить для меня. То, что я делаю сейчас, работая с угловыми 1.4.6:

создать службу

'use strict'; 
angular.module('App') 
.factory('processingService', ['$http', 
    function ($http) { 
     var settings = 'Settings/GetSettings';  
     var getSettings = function() 
     { 
      return $http.get(settings) 
       .then(function(response) 
       { 
        return response.data; 
       }); 
     }; 
     return { 
      getSettings: getSettings   
     }; 
    } 
]); 

И использование/инъекционный, что в моем контроллере.

'use strict'; 
angular.module('App') 
.controller('appController', [ 
    '$scope','appService', 
    function ($scope, appService) {  
     var onSettings = function (data) { 
      if (data.hasOwnProperty('Settings')) {  
       //Code handling Settings   
      } 
     }; 
     var onSettingsError = function() 
     { 
      //Handle Errors 
      $scope.showLoader = false; 
     };  
     appService.getSettings() 
      .then(onSettings, onSettingsError); 
}]); 

Я начал немного играть вокруг с angular2 бета и нашел следующий пример на http.get

getRandomQuote() { 
    this.http.get('http://localhost:3001/api/random-quote') 
    .map(res => res.text()) 
    .subscribe(
     data => this.randomQuote = data, 
     err => this.logError(err), 
    () => console.log('Random Quote Complete') 
    ); 
} 

logError(err) { 
    console.error('There was an error: ' + err); 
} 

Я строю некоторые другие методы и протестировали немного вокруг и гугле много, но может не найти ничего подобного при создании сервиса с angular2 beta и машинописным текстом, как я это делал до сих пор. Это даже необходимо сделать так. Или это не так, как сейчас делается с Angular2 beta?

Заранее спасибо.

Answer 1

Вы можете просто вернуть наблюдаемый объект (то, что http.get метод возвращает) из вашей вашей службы, то есть класс с Injectable аннотацию:

@Injectable() 
export class CompanyService { 
    constructor(http:Http) { 
    this.http = http; 
    } 

    getRandomQuote() { 
    return this.http.get('http://localhost:3001/api/random-quote') 
        .map(res => res.json()); 
    } 
} 

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

export class CompanyList implements OnInit { 
    public companies: Company[]; 

    constructor(private service: CompanyService) { 
    this.service = service; 
    } 

    logError(err) { 
    } 

    ngOnInit() { 
    this.service.getRandomQuote().subscribe(
     data => this.randomQuote = data, 
     err => this.logError(err), 
    () => console.log('Random Quote Complete') 
    ); 
    } 
} 

Вы можете получить более подробную информацию по этому адресу: How to Consume Http Component efficiently in a service in angular 2 beta?.

Надеюсь, он вам порекомендует, Thierry

Answer 2

Услуги в угловых 2 - это только классы TypeScript, украшенные @Injectable().

Услуга может выглядеть следующим образом:

import {Injectable, Inject, EventEmitter} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 

@Injectable() // annotated class that can be injected in other components 
export class ProcessingService { 
    // inject the http service (configured in the global injector) 
    constructor(@Inject(Http) private http :Http) { 

    } 
    // the service method returning an event emmiter (instead of promises) 
    public getSettings():EventEmitter<string> { 

     let emmiter = new EventEmitter<string>(true); 

     // call the method and subscribe to the event emmiter 
     this.http.get('Settings/GetSettings').subscribe((value: Response) => { 
     emmiter.emit('called');  
     }); 
     return emmiter; 
    } 
} 

Затем вы можете использовать инъекции зависимостей для вставки службы в компоненте, например:

import {Component, Inject } from 'angular2/core'; 
// import our service 
import {ProcessingService} from './services/processing-service/processing-service'; 

@Component({ 
    selector: 'http-search-params-app', 
    providers: [], 
    templateUrl: 'app/http-search-params.html', 
    pipes: [], 
    bindings:[ProcessingService] // tell the component injector to inject our service 
}) 
export class HttpWorkApp { 
    workDone = []; 

    constructor(private processingService: ProcessingService) {} 

    // call the sevice 
    public doWork() { 
     this.processingService.getSettings().subscribe((value :string) =>{ 
      this.workDone.push(value); 
     }); 
    } 
} 

Шаблон для этого компонента:

<div> 
    <button (click)="doWork()">Call HTTP Service</button> 
    <div *ngFor="#workItem of workDone">{{workItem}}</div>  
</div> 

Вам также необходимо для настройки глобальной инъекции, чтобы обеспечить инъекцию услуги Http.

import {bootstrap} from 'angular2/platform/browser'; 
import {HttpWorkApp} from './app/http-search-params'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 

bootstrap(HttpWorkApp, [HTTP_PROVIDERS]);