Angular-styleguide: Best way for long controller $inject

Created on 17 May 2017  路  7Comments  路  Source: johnpapa/angular-styleguide

For example with this controller :

angular.module('lsi.controllers').controller('MainController', MainController);

MainController.$inject = [
    '$scope', '$q', 'Api', 'segments', 'ResourceService', 'AdminService','SweetAlertService', 'UsersCsvService', 'UsersSearchService', 'CriteriaService', '$rootScope'
];

function MainController($scope, $q, Api, segments, ResourceService, AdminService, SweetAlertService, UsersCsvService, UsersSearchService, CriteriaService, $rootScope) {
    // code here    
}

What's best way for too long $inject array and/or controller arguments ?

For controller is it a very bad idea to use arguments ?

function MainController() {
    // code here
    arguments[0].$on('', function() {});
}

Or use an alias :

function MainController($scp, $q, Api, segments, ResSce) {
    // code here
}

Thanks.

Most helpful comment

Read this discussion. IMHO, $watch should be avoided as possible. Use ngChange instead.

All 7 comments

First, $scope, $rootScope and $q have nothing to do in your controller.

I use a max size line of 120 chars in my source code.

If the controller declaration goes away 120 chars, i fold line before the limit then i fold the $inject line regarding where i have folded the controller declaration.

Example :

MainController.$inject = [
    'Api', 'segments', 'ResourceService', 'AdminService','SweetAlertService', 'UsersCsvService',
    'UsersSearchService', 'CriteriaService'
];

function MainController(Api, segments, ResourceService, AdminService, SweetAlertService, UsersCsvService,
                        UsersSearchService, CriteriaService) {
    // code here
}

In this example with a 120 chars line, i could have this :

MainController.$inject = [
    'Api', 'segments', 'ResourceService', 'AdminService','SweetAlertService', 'UsersCsvService', 'UsersSearchService', 
    'CriteriaService'
];

function MainController(Api, segments, ResourceService, AdminService, SweetAlertService, UsersCsvService, 
                        UsersSearchService, CriteriaService) {
    // code here
}

But to keep consistency between $inject and controller declaration i fold line in $inject where i fold line in controller declaration.

I am not sure your arguments use is working with AngularJs injection system and minification.

Thanks for your answer.
120 chars limit is a good solution, I adopt it !

Why $rootScope and $scope should not be in my controller ?
How do you sent events without $on and $broadcast ?

For $rootScope and $scope you should read Y031.

IMHO there is no reason to inject them except when a third party library that you must use needs them to communicate with events. You have to keep in mind that scopes does not exist anymore in Angular. So if you want to handle your technical debt you need to keep consistency in your projects between AngularJS and Angular to allow a future migration when AngularJS will become deprecated.

For events, you should read this discussion.

Ok, I note it.
Thanks.

@amiceli A nice alternative is ng-annotate which eliminates the need for lengthy $inject arrays:

/* @ngInject */
function MainController($scope, $q, Api, segments, ResourceService, AdminService, SweetAlertService, UsersCsvService, UsersSearchService, CriteriaService, $rootScope) {
    // code here    
}

@bampakoa thanks

@MarcLoupias An another question, without $scope, how to watch a property change event ? Like $watch

Read this discussion. IMHO, $watch should be avoided as possible. Use ngChange instead.

Was this page helpful?
0 / 5 - 0 ratings