title: How to Inject Angular2 Http service into es6/7 Class?
body: <p>If I use es6/7 (babel - stage 1) instead of TypeScript, how are services, and specifically Http, injected?</p>
  
  <p>Here's my component JS:</p>
  
  
  
  <pre><code>import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
  import {Http} from 'angular2/http';
  
  @Component({
    selector: 'login'
  })
  @View({
    templateUrl: './components/login/login.html',
    styleUrls: ['components/login/login.css'],
    directives: [CORE_DIRECTIVES],
    encapsulation: ViewEncapsulation.Emulated
  })
  export class Login {
    constructor(@Inject(Http) http) {
      console.log('http', http);
    }
  
    authenticate(username, password) {
      // this.http.get('/login');
    }
  }
  </code></pre>
  
  <p>I have tried:</p>
  
  
  
  <pre><code>export class Login {
    constructor(@Inject(Http) http) {
      console.log('http', http);
    }
  }
  /********************/
  @Inject(Http)
  export class Login {
    constructor(http) {
      console.log('http', http);
    }
  }
  /********************/
  export class Login {
    constructor(Http: http) {
      console.log('http', http);
    }
  }
  /********************/
  export class Login {
    constructor(http = Http) {
      console.log('http', http);
    }
  }
  /********************/
  export class Login {
    constructor(Http) {
      this.http = new Http()
      console.log('http', this.http);
    }
  }
  /********************/
  export class Login {
    constructor(http = new Http()) {
      console.log('http', http);
    }
  }
  </code></pre>
  
  <p>All but the first compiles. Others give me access to either the Http class or an http instance. But none works.</p>
  
  <p>I tried to following the discussion referenced by Eric Martinez in his comment. Login.js now:</p>
  
  
  
  <pre><code>import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
  import {HTTP_BINDINGS, Http, BaseRequestOptions, RequestOptions, RequestMethods} from 'angular2/http';
  
  @Component({
    selector: 'login'
  })
  @View({
    templateUrl: './components/login/login.html',
    styleUrls: ['components/login/login.css'],
    directives: [CORE_DIRECTIVES],
    encapsulation: ViewEncapsulation.Emulated,
    bindings: [Http]
  })
  export class Login {
  
    constructor(http) {
      this.http = http;
      console.log('http', http);
    }
  
    authenticate(usernameEl, passwordEl) {
      var username = usernameEl.value;
      var password = passwordEl.value;
      console.log('username', username, password);
  
      // this.http.get('/login');
    }
  }
  
  Login.parameters = [Http];
  </code></pre>
  
  <p>It compiles now but generates the following error:</p>
  
  <blockquote>
    <p>Uncaught (in promise) NoBindingError {message: "No provider for Http!
    (Login -> Http)", stack: "Error: DI Exception↵    at
    NoBindingError.BaseExce…or._new
    (<a href="http://localhost:3000/bundle.js:7319:22" rel="nofollow">http://localhost:3000/bundle.js:7319:22</a>)", keys: Array[2], injectors:
    Array[2]}constructResolvingMessage: (keys)arguments: (...)caller:
    (...)length: 1name: ""prototype: Object__proto__: ()context: (...)injectors: Array[2]0: Injector1: Injectorlength:
    2__proto__: Array[0]keys: Array[2]message: "No provider for Http!
    (Login -> Http)"stack: "Error: DI Exception↵    at
    NoBindingError.BaseException [as constructor]
    (<a href="http://localhost:3000/bundle.js:8400:24" rel="nofollow">http://localhost:3000/bundle.js:8400:24</a>)↵    at
    NoBindingError.AbstractBindingError [as constructor]
    (<a href="http://localhost:3000/bundle.js:9066:17" rel="nofollow">http://localhost:3000/bundle.js:9066:17</a>)↵    at new NoBindingError
    (<a href="http://localhost:3000/bundle.js:9102:17" rel="nofollow">http://localhost:3000/bundle.js:9102:17</a>)↵    at Injector._throwOrNull
    (<a href="http://localhost:3000/bundle.js:7469:20" rel="nofollow">http://localhost:3000/bundle.js:7469:20</a>)↵    at
    Injector._getByKeyDefault (<a href="http://localhost:3000/bundle.js:7516:22" rel="nofollow">http://localhost:3000/bundle.js:7516:22</a>)↵<br>
    at Injector._getByKey (<a href="http://localhost:3000/bundle.js:7461:26" rel="nofollow">http://localhost:3000/bundle.js:7461:26</a>)↵    at
    Injector._getByDependency (<a href="http://localhost:3000/bundle.js:7447:26" rel="nofollow">http://localhost:3000/bundle.js:7447:26</a>)↵<br>
    at Injector._instantiate (<a href="http://localhost:3000/bundle.js:7339:37" rel="nofollow">http://localhost:3000/bundle.js:7339:37</a>)↵<br>
    at Injector._instantiateBinding
    (<a href="http://localhost:3000/bundle.js:7330:26" rel="nofollow">http://localhost:3000/bundle.js:7330:26</a>)↵    at Injector._new
    (<a href="http://localhost:3000/bundle.js:7319:22" rel="nofollow">http://localhost:3000/bundle.js:7319:22</a>)"<strong>proto</strong>: __</p>
  </blockquote>