maintainable way of injecting dependencies in angularjs

Question

I am wondering how can I inject dependencies in more readable way in angular. I am more interested in AMD(requirejs) way. Like following:

define(function (require) {
    var ModuleOne = require("ModuleOne"),
        ModuleTwo = require("ModuleTwo");

    var ThisModule = (function () {
          // code here
    })();

    return ThisModule;
});

Is it possible to inject dependencies above way in angularjs or is there any better way to do it then current way in angularjs?

nalinc · Accepted Answer · 2015-06-13 10:15:53Z

2

From the Angular JS official website

Angular modules solve the problem of removing global state from the application and provide a way of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfil their goals.

Hence, purpose of both the libraries(RequireJS and AngularJS) is totally different. The dependency injection system built into AngularJS deals with the objects needed in a component; while dependency management in RequireJS deals with the modules or, JavaScript files.

In requireJS, Objects of loaded modules are cached and they are served when same modules are requested again. On the other hand, AngularJS maintains an injector with a list of names and corresponding objects. In this case, Object is served whenever it is referenced using the registered name.

Generally we inject dependencies in angularJS like

someModule.controller('MyController', function($scope,greeter){

});

If you want an alternative way to inject dependencies in angularJS, you may do something like.

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

Hope it helps!

answered Jun 13, 2015 at 10:15

nalinc

7,43327 silver badges34 bronze badges

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

5 Comments

Om3ga Over a year ago

The problem with this is that if a controller requires too many dependencies then there are bunch of parameters required in controller's callback function. I want to reduce that amount somehow.

nalinc Over a year ago

Use MyController.$inject = ['$scope', 'greeter']; syntax then. It makes your code look more readable than the conventional approach.

Om3ga Over a year ago

that is possible however, that doesn't solve my problem. because I still need too many parameters for too many dependencies like

var MyController = function($scope, greeter, dep3, dep4, dep5, dep6, dep7, dep8, dep9, dep10, dep11, dep12, dep13) {   // ... }

nalinc Over a year ago

You may create a service with all these dependencies and use that service in controller. This would make your controller readable, though your service would look cumbersome. However, there's no way you can skip a dependency if its being used by your service/controller.

nalinc Over a year ago

You can move your dependencies to a different service/factory, but cannot avoid them. someModule.controller('MyController', function($scope,greeter,myService){ ... }); ... where myService is a factory containing all required dependencies. someModule.factory('myService',function(dep3, dep4, dep5, dep6, dep7, dep8, dep9, dep10, dep11, dep12, dep13){ ... }).

Collectives™ on Stack Overflow

maintainable way of injecting dependencies in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related