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-ponent', 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

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-ponent', 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

• javascript
• angularjs
• ecmascript-6

Share Improve this question Follow asked Mar 24, 2016 at 10:53 GhtayGhtay 6311 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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 pile 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;