CODEWITHSUNDEEP
angularjs
user11081980
user11081980

Reputation: 3289

AngularJS: injecting a dependency to the main module or to a controller?

I'm confused about something. Some dependencies have to be injected to the main module. For example:

angular.module("app", ["ui.router", "ui.bootstrap", "toaster"]);

Whereas some other dependencies can just be injected into the controllers, but don't need to be injected into the main module. For example:

angular.module("app").controller("newCtrl", ["$q", newCtrl);

I'm having difficulties understanding why. Any help will be much appreciated.

Upvotes: 2

Views: 1283

Answers (3)

Prashant
Prashant

Reputation: 8040

In Angular, you define a module like so:

angular.module('MyModule1', []);

Notice how module function takes two arguments. Second argument being the array of other modules this module is dependent on. This construct is for setting a module.

Once the module is defined, you can attach controller, services etc. to the module. 

angular
    .module('MyModule1')
    .service('MyService1');

Notice, how this time only one argument was give to the module function. That means you are getting an already registered module.

Lets say you create another module MyModule2, but MyModule2 needs to use the services defined by the MyModule1.

You just set the module MyModule2 with MyModule1 as its dependency.

angular.module('MyModule2', ['MyModule1']);

Now, you want to create a controller (or a directive, or a service, whatever) in MyModule2 that actually makes use of the service MyService1 defined in MyModule1.

That's where the Dependency Injection (DI) of Angular comes in. You define your controller with the service name as function parameter and when Angular instantiates your controller, it makes sure the service instance is found and provided to your controller.

angular
    .module('MyModule2')
    .controller('MyController2', function (myService1) {
        // Hey I can use myService1
        // Dependency Injection FTW!
    });

Upvotes: 1

David L
David L

Reputation: 33833

$q a service within the core ng module, per the documentation.

All services within the ng module are bootstrapped and registered when the angular.js file is loaded and parsed. This allows you to inject them anywhere in your app.

However, the three examples you have listed above are all external, modular dependencies. They need to be explicitly registered into your application so that the components within are available when the $injector service attempts to resolve them.

Upvotes: 2

Pascal Winter
Pascal Winter

Reputation: 114

You inject modules into other modules.

You inject providers, services, and factories that are included in those modules into the specific controllers.

Upvotes: 2

Related Questions