Angular 2 HTTP GET Equivalent to Angular HTTP GET

Question

Hope someone can clarify something for me. What I am doing right now, working with Angular 1.4.6:

I create a service

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

And use/inject that in my controller.

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

I started a little bit playing around with angular2 beta and found the following example on 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);
}

I build some other methods and tested a bit around and googled a lot, but could not find anything similar in creating a service with angular2 beta and typescript the way I was doing till now. Is it even necessary to do it that way. Or is this not the way it is done now with Angular2 beta?

Thank you in advance.

Answer 1

You can simply return an observable object (what the http.get method returns) from your your service, i.e. a class with the Injectable annotation:

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

Within your component, you can then inject this service and call the method that actually executes the HTTP request. To get the result, just use the subscribe method:

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

You could have more details at this address: How to Consume Http Component efficiently in a service in angular 2 beta?.

Hope it will help you, Thierry