AngularJS: directive/dependency injection

Question

To add dependency to Angular, this is what docs tells to do :

//inject directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {...

But can we inject directive directly into controller like this:

var app = angular.module('fileUpload', []);
app.controller('MyCtrl', ['ngFileUpload','$scope', 'Upload', function (ngFileUpload,$scope, Upload) {...

If not, what is the reason for not providing this capability to controller?
Is there a way to inject dependency when a particular controller loads?

modules cannot be injected directly in to controllers. they have to injected in the module first and then services/factories/providers inside those modules are added as dependency to that controller. — Abdul Mannan - Data Engineer
– Abdul Mannan - Data Engineer, Commented Mar 30, 2016 at 6:41
Correct. But why? Wont be more convenient for us to able to inject modules through controller too. — Aman Gupta
– Aman Gupta, Commented Mar 30, 2016 at 6:45
Modularity and clean code. If you keep injecting everything in controllers, whats the point of creating modules ? — Abdul Mannan - Data Engineer
– Abdul Mannan - Data Engineer, Commented Mar 30, 2016 at 6:47
What if I want to load the dependency for one controller and not others. Is there a way to inject a dependency for a particular controller? — Aman Gupta
– Aman Gupta, Commented Mar 30, 2016 at 6:50

Justin Ober · Accepted Answer · 2016-03-30 07:42:53Z

1

No modules are the essentially the base or a "toolbox" if you will. You need to inject one module into another so that the it can have access to its "tools" (filters/directives/services etc). The reason is that the module is responsible for dependency loading and order of operations. This is so that when you request a "tool" from a module into a controller you can be sure it is there (or an error will be thrown).

Modules can list other modules as their dependencies. Depending on a module implies that the required module needs to be loaded before the requiring module is loaded. In other words the configuration blocks of the required modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.

When you inject one module into another you are saying "Module A requires things from Module B". Now when you when you require a specific tool that is when you inject it into the controller so that you have access to that specific tool.

So consider:

var app = angular.module('myApp', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {

  .....

  Upload.upload(uploadData).then(function (resp) {
       //success
  }, null, function (evt) {
       //upload progress
  });
  .....

}]);

So because you inject ngFileUpload your controller in the myApp module can now inject the Upload service from the ngFileUpload module and the controller does not need to worry if the service is present (if it is not you will get an injection error from angular).

edited Mar 30, 2016 at 7:42

answered Mar 30, 2016 at 6:53

Justin Ober

8496 silver badges14 bronze badges

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

2 Comments

Justin Ober Over a year ago

I mean this is an simplistic and general idea of modules. If you really want to know about them check out the Angular Docs on modules:docs.angularjs.org/guide/module

Justin Ober Over a year ago

And to your other point in the comments above you are only requiring that a module tool in the controller when you inject the service. Injecting the one module into another is just essentially saying " I need something in this module, make sure its loaded before I am" your not saying "every controller needs everything"

Collectives™ on Stack Overflow

AngularJS: directive/dependency injection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related