CODEWITHSUNDEEP
angular
uglycode
uglycode

Reputation: 3082

Angular 2 - Http provider error

I'm just starting with Angular 2 and I'm trying to get a http request.

The code is as follows

import { Component, View, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';

@Component({
  selector: 'my-app'
})
@ View({
  directives: [TodoInput, TodoList]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
    https.getHttpData();
  }

}
bootstrap(AppComponent, [TodoService, HttpService]);

and the http service is as follows:

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

@Injectable()
export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=walking';

    data: array[string] = [];   

    logError(error):void {
        console.log(error);
    }

    constructor(public http: Http) {

    }


    public getHttpData() {
        this.http.get(this.url)
            .map(res => res.json())
            .subscribe(
                data => this.data = data,
                err => this.logError(err), 
                () => console.log('Random Quote Complete')
            );
    }
}

When I ran the app, I get the following error: EXCEPTION: No provider for e! (AppComponent -> HttpService -> e) and angular2.dev.js:21835 Error: DI Exception

Any ideas? What am I missing?

Thanks in advance for your help.

UPDATE I managed to make it work. I hope it's correct, but it works:

import { Component, View, NgFor, FORM_DIRECTIVES, bootstrap } from 'angular2/angular2';
import { TodoInput } from './todoInput.ts';
import { TodoList } from './todoList.ts';
import { TodoService } from './todoService.ts';
import { HttpService } from './httpService.ts';
import { HTTP_PROVIDERS } from 'angular2/http';

@Component({
  selector: 'my-app'
})
@View({
  directives: [TodoInput, TodoList, NgFor, FORM_DIRECTIVES]
  templateUrl: 'templates/app.html'
})
class AppComponent {
  color: string;
  numbr: number;
  hidden: boolean;
  shows: [string] = [];

  constructor(public myservice: TodoService, public https: HttpService) {
    this.color = 'blue';
    this.numbr = 5;
    this.hidden = false;
  }


  searchShows():void {
    this.https.getHttpData(this.keyword).subscribe(
      data => this.shows = data.Search,
      err => console.log(err),
      () => console.log('done!')
    );
  }
}

bootstrap(AppComponent, [HTTP_PROVIDERS, TodoService, HttpService]);

And my service class:

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

export class HttpService {

    private url: string = 'http://www.omdbapi.com/?s=';

    data: [string] = [];    

    logError(error):void {
        console.log(error);
    }

    constructor(@Inject(Http) public http: Http) {
    }


    public getHttpData(keyword) {

        return this.http.get(this.url + keyword)
            .map(res => res.json());
    }
}

I can't, however, make it work so that the service is the only class that uses all the http needed dependencies. It seems like the main class has to bootstrap http_providers. Not sure why.

Upvotes: 2

Views: 3963

Answers (1)

mat3e
mat3e

Reputation: 791

I don't use Angular 2, but

  • Are you sure with HTTP_PROVIDERS inside import? Http isn't enough?
  • In provided code you have a whitespace between "@" and "View" :)

Upvotes: 2

Related Questions