Angular 1.5 & ES6 -Dependency injection

Question

I'm new to angular and i'm trying to use ES6.

I have a problem with dependencies inject, i can't get it to work.

My 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);

My index-state.controller.js is :

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

    }

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

    export default [
        IndexStateController
    ];

I'm getting 'undefined' on the console.log(this.$timeout).

Can someone help me through this ?

Thanks

Answer 1

I think your problem is that you are exporting an array containing the controller instead of exporting the controller class itself at that means you have overriden the $inject attribute with an empty set of dependencies:

export default [
    IndexStateController
];

should be:

export default IndexStateController;

Alternatively you could include the injection values in the export:

export default [
    '$timeout',
    IndexStateController
];

Another solution if you use something like gulp to build your code is to compile es6 with something like babel and then use ngAnnotate to do the injection automatically. In that case you would want to mark the class as requiring injection:

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

}
export default IndexStateController;