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.
1 个答案:
答案 0 :(得分：2)
我不使用Angular 2，但
- 你确定在导入里面有HTTP_PROVIDERS吗？ Http还不够吗？
- 在提供的代码中，您在＆＃34; @＆＃34;之间有一个空格。和＆＃34;查看＆＃34; ：）