Angularjs - injecting dependencies into multiple controllers

Question

I'm still quite new to angular, and have been building a simple CRM application. For a single resource (restful API resource) I have 3-4 routes and controllers defined in my angular application. Now, there are a set of services and modules that I repeatedly have to inject into each controller. I understand that each controller will have it's own instance of scope and shared instance of factory/services but is there a way to centrally define dependencies for multiple controllers?

In the example below, $modal, growl, configuration, $scope are injected into all 3 controllers, I'd like to define that only once.

Listings Controller

myApp.controller('VenueListCtrl', ['$scope', '$http', 'configuration', '$modal', 'growl',
  function ($scope, $http, configuration, $modal, growl) {
  }
]);

Create/New Controller

myApp.controller('VenueCreateCtrl', ['$scope', '$http', '$location', 'configuration',
  function ($scope, $http, $location, configuration) {
  }
]);

Details Controller

myApp.controller('VenueDetailCtrl', ['$scope', '$routeParams', '$http', '$modal', 'configuration',
  function ($scope, $routeParams, $http, $modal, configuration) {
  }
]);

Maybe you can create a service that depends on those things and exposes just the required behaviour. Then the controllers will depend on that service alone. Keep in mind that this CANNOT WORK FOR $scope, as it is local to each controller. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Dec 4, 2014 at 8:31
@NikosParaskevopoulos I thought of that, but the fact is that each controller uses the services/factories in a different way. The modularity of including them individually is really useful, but I want to be able to group modules when assembling my application :( — vvohra87
– vvohra87, Commented Dec 4, 2014 at 9:36

Nikita Fedyashev · Accepted Answer · 2022-04-07 15:10:43Z

1

Best you can do is: use not-anonymous function declaration of controllers:

var depsToInject = ['$scope', 'growl', 'configuration', '$modal'];

myApp.controller('Ctrl1' , Ctrl1);

Ctrl1.$inject = depsToInject ;

function Ctrl1($scope, growl, configuration, $modal) {
    // ...
}

myApp.controller('Ctrl2' , Ctrl2);

Ctrl2.$inject = depsToInject ;

function Ctrl1($scope, growl, configuration, $modal) {
    // ...
}

etc. But that does not fully unify declaration and I don't think there is a better way. However you can try from the other side and wrap your dependencies with another dependency, but I don't like this way either.

edited Apr 7, 2022 at 15:10

Nikita Fedyashev

19.3k15 gold badges58 silver badges110 bronze badges

answered Dec 3, 2014 at 13:17

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vvohra87 Over a year ago

This makes the code a little cleaner, but doesn't accomplish the grouped injection that i'm looking for. Is there a way to declare a custom module which depends on 4 others and inject that directly? At the same time, it needs to expose the underlying API/objects of the injected modules.

Mawg Over a year ago

Naive question, but is it possible to somehow inject them into the app, thus making them available to all controllers?

Collectives™ on Stack Overflow

Angularjs - injecting dependencies into multiple controllers

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related