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.

Source

amiceli

Most helpful comment

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

MarcLoupias on 17 May 2017

👍2

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.

MarcLoupias on 17 May 2017

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 ?

amiceli on 17 May 2017

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.

MarcLoupias on 17 May 2017

Ok, I note it.
Thanks.

amiceli on 17 May 2017

@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    
}