Since you have @Decorators
enabled in Babel
…I’ll fine-tune this answer to work with your specific setup.
1. You’re missing HTTP_PROVIDERS
The HTTP_PROVIDERS constant includes a number of functions required to handle HTTP requests/responses.
import {Http, HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'login',
providers: [ HTTP_PROVIDERS ]
})
2. You need to desugar the DI (Dependency Injection) syntax
As mentioned in @alexpods’ answer.
Remove the static typing
constructor(http) {
@Inject handles DI implicitly but is only supported in Angular2+Typescript. Since you’re using Angular2+ES6 you need to attach a static getter parameter to your class to provide the ES6-specific equivalent.
static get parameters() {
return [[Http]];
}
3. You need to bind the Http instance to your class in the constructor
By doing this, it will become accessible in your authenticate()
method.
constructor(http) {
this.http = http;
console.log('http', this.http);
}
…and the full implementation:
import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'login',
// required for Http
providers: [ HTTP_PROVIDERS ]
})
@View({
templateUrl: './components/login/login.html',
styleUrls: ['components/login/login.css'],
directives: [CORE_DIRECTIVES],
encapsulation: ViewEncapsulation.Emulated
})
export class Login {
constructor(http) {
// bind http to your class during construction
// so it's available to authenticate()
this.http = http;
}
// Angular2 DI desugar'd
static get parameters() {
return [[Http]];
}
authenticate(username, password) {
this.http.get('/login');
}
}
Aside: I know for a fact this works because I’m using it for the <ng2-markdown>
component on EvanPlaice.com.