HTTP PROVIDERS in @Injectable Service

Question

Angular2, now in beta, my company decide to work on it a little bit. I tried to set a request from my service. I browse all the internet, but nothing working. (Maybe posts was written before Beta release).

So, I have my boot.ts like this :

import {bootstrap} from 'angular2/platform/browser';
import {Component, provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

import {BrandsComponent} from './brands/brands.component';
import {BrandsService} from './brands/brands.service';

@Component({
 selector: 'my-app',
 template: `
  <brands></brands>
 `,
 directives: [BrandsComponent]
})

export class AppComponent {
}


bootstrap(AppComponent, [HTTP_PROVIDERS, BrandsService]);

My BrandsComponent inject my BrandsService. Here my service code :

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

@Injectable()
export class BrandsService{
 constructor(public http: Http) {
  console.log('Task Service created.', http);
  http.get('http://google.fr');
 }

 getBrands(){
  //return this.http.get('./brands.json');
  return [];
 }
}

In my console, I have the 'Task service created' log, but any ajax request is going.

I can't tell you what I've tried, cause I change my code about a billion times.

Thank for your help !

@Edit :

Here my BrandsComponent code :

import {Component} from 'angular2/core';

import {Brand} from './brand.interface';
import {BrandsService} from './brands.service';

import {ModelsComponent} from './../models/models.component';

@Component({
 selector: 'brands',
 templateUrl: 'templates/brands/list.html',
 providers: [BrandsService],
 directives: [ModelsComponent]
})

export class BrandsComponent implements OnInit{
 public brands;
 public selectedBrand : Brand;

 constructor(private _brandsService: BrandsService) { }

 /*
 * Get all brands from brands service
 */
 getBrands(){
  this.brands = this._brandsService.getBrands();
 }

 /*
 * On component init, get all brands from service
 */
 ngOnInit(){
  this.getBrands();
 }

 /*
 * Called when li of brand list was clicked
 */
 onSelect(brand : Brand){
  this.selectedBrand = brand;
 }
}

what is the error. Coz if you are getting "Task service created" log, then first you have to save the value of http.get somewhere to use if I am not wrong. — binariedMe, Dec 30 '15 at 10:10
Romain : I had my BrandsComponent, thanks. @binariedMe : Sure, but any request are visible in developer console. I assign result to var, and console log it, but I had Observer object response. I search the reason, and explication. — PallMallShow, Dec 30 '15 at 10:14

score 1 · Accepted Answer · answered Dec 30 '15 at 10:42

1

In fact observables are lazy. This means that corresponding HTTP requests aren't sent before attaching some response listeners on them using the subscribe method.

Adding a subscribe method in the constructor of your BrandsService should trigger your HTTP request:

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

@Injectable()
export class BrandsService{
  constructor(public http: Http) {
    console.log('Task Service created.', http);
    http.get('http://google.fr').subscribe();
  }
  (...)
}

Hope it helps you, Thierry

answered Dec 30 '15 at 10:42

Thierry Templier

198,364
44
396
360

Thank Thierry. In fact, with subscribe method, request has been correctly launched. After research of subscribe method, we can in params, set data from response like : `.subscribe(data => this.brands = data.json());`. If I console.log(data.json()), it's good, I had a object. But if I return this.brands, it return undefined. Maybe the return is set before the ajax response ? – PallMallShow Dec 30 '15 at 10:57
Yes, in fact, you can't return `this.brands` since you're within an arrow function (i.e. a callback). You should return instead the observable: `return http.get('http://google.fr');` and call the `subscribe` method on it within the component that calls the service. This answer should help you: http://stackoverflow.com/questions/34450131/how-to-consume-http-component-efficiently-in-angular-2-beta/34450948#34450948 ;-) – Thierry Templier Dec 30 '15 at 11:16
Awesome guy. Thank for your proposes ! I return from my service the http method, I in ma component where service was called, I set subscribe here and all works. I Hope this post can help many people ;) – PallMallShow Dec 30 '15 at 11:22

HTTP PROVIDERS in @Injectable Service

1 Answers1