Angular 1.5 & ES6 -Dependency-Injektion

Question

Ich bin neu in eckigen und ich versuche ES6 zu verwenden.

Ich habe ein Problem mit Abhängigkeiten injizieren, ich kann es nicht zum Laufen bringen.

Mein index.js:

 

    import './index-state.css!'; 
    import angular from 'angular'; 
    import 'angular-ui-router'; 
    import IndexStateController from './index-state-controller'; 
    import indexRouteConfig from './index-route'; 

    const dependencies = [ 
     'ui.router' 
    ]; 

    export default angular 
     .module('index-state-component', dependencies) 
     .controller('IndexStateController', IndexStateController) 
     .config(indexRouteConfig); 

Mein Index-state.controller.js ist:

 

    class IndexStateController { 
     constructor($timeout) { 
      this.$timeout = $timeout; 
      this.controllerName = 'Example Controller'; 
      console.log(this.$timeout); 
     } 

    } 

    IndexStateController.$inject =['$timeout']; 

    export default [ 
     IndexStateController 
    ]; 

Ich bin auf der console.log 'undefined' bekommen (das Timeout $.).

Kann mir jemand dabei helfen?

Dank

Answer 1

Ich denke, Ihr Problem ist, dass Sie ein Array exportieren den Controller statt Export der Controller-Klasse enthält, an sich selbst, dass bedeutet, dass Sie das $inject Attribut mit einem leeren Satz von Abhängigkeiten außer Kraft gesetzt haben:

export default [ 
    IndexStateController 
]; 

sollte sein:

export default IndexStateController; 

Alternativ Sie die Injektionswerte im Export enthalten könnte:

export default [ 
    '$timeout', 
    IndexStateController 
]; 

Eine andere Lösung, wenn Sie so etwas wie gulp verwenden Sie den Code zu bauen, ist es6 mit so etwas wie babel zu kompilieren und dann ngAnnotate verwenden, um die Injektion automatisch zu tun. In diesem Fall würden Sie die Klasse als Injektion erfordern:

class IndexStateController { 
    constructor($timeout) { 
     "ngInject" 
     this.$timeout = $timeout; 
     this.controllerName = 'Example Controller'; 
     console.log(this.$timeout); 
    } 

} 
export default IndexStateController;