AngularJS module dependencies - clarification?

Question

I've been investigating the tutorial example from AngularJs's site ( this one)

(The main html is pretty empty (except for ng-view and ng-app=phonecatApp))

The app.js file includes this :

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',...

Ok, so we have phonecatApp module with many dependencies.

But then I saw the controller.js file ( they opened a new module for the controllers)

/*1*/   var phonecatControllers = angular.module('phonecatControllers', []);
/*2*/   
/*3*/   phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
/*4*/     function($scope, $routeParams, Phone) {
/*5*/       ...
/*6*/       });
/*7*/   
/*8*/     }]);

Phone is a service. ( which is on another module , different js file)

Question

In line #3 , how does it know what is the Phone parameter ? they didnt add any dependecy module in line #1 !
Same for the $routeParams , how does it know it ? they didn't add any dependency in line #1 to the ngRoute !

Am I missing something here ?

What does the declaration of Phone look like? Is this service registered to phoncatControllers module? If not, it does seem strange. — Davin Tryon
– Davin Tryon, Commented Feb 22, 2014 at 14:56
@DavinTryon angular.github.io/angular-phonecat/step-11/app/js/services.js — Royi Namir
– Royi Namir, Commented Feb 22, 2014 at 14:58
Ok, I think the assumption made in this example is that phonecatControllers will always be registered as a dependency with phonecatServices. Not a great assumption to make when creating independent modules for reuse. Since, there is only a single $injector in the app, this works, but I wouldn't say it is a great way to split modules. — Davin Tryon
– Davin Tryon, Commented Feb 22, 2014 at 15:01
@DavinTryon So, I can use every module parameter if it is as a dependncy in the main module ? — Royi Namir
– Royi Namir, Commented Feb 22, 2014 at 15:13
I think the angular application has a single $injector service, which means all dependent modules put their dependencies in the same injector. This would mean that if A depends on B, and C, then B can use components in C using the same injector service, once A has forced the loading of all of them. — Edwin Dalorzo
– Edwin Dalorzo, Commented Feb 22, 2014 at 15:22

Ivan Chernykh · Accepted Answer · 2014-02-22 18:05:32Z

7

This citation from Pawel Kozlowski' book seems to be relevant:

A service defined in one of the application's modules is visible to all the other modules. In other words, hierarchy of modules doesn't influence services' visibility to other modules. When AngularJS bootstraps an application, it combines all the services defined across all the modules into one application, that is, global namespace.

answered Feb 22, 2014 at 18:05

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

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

3 Comments

BairDev Over a year ago

Does that mean, that a service/factory etc. must be defined in at least one module to become visible for all other modules and components on sub-module level?

Ivan Chernykh Over a year ago

@malte sorry, i'm not sure i understand you correctly, how can it be defined not in a module?

BairDev Over a year ago

Oh yeah, my fault. defined, not included e.g. including d3 just in the controller, not in the module:

angular.module("widgets.D3Widget", ['underscore'])  .controller("widgets.D3Widget.D3WidgetCtrl", [   "$scope",   "d3",   function(     $scope,     d3   ) {     console.log(d3.select('body'));     //work goes here   } ]);

So I still don't understand Angular's dependency technology ...

Ivan Guardado · Accepted Answer · 2014-02-22 15:02:18Z

1

The dependency injection works by default for every component of Angular.

This is because every component is defined inside the angular object, so it can track it all.

You can check this http://docs.angularjs.org/guide/di out to understand how it works.

answered Feb 22, 2014 at 15:02

Ivan Guardado

5274 silver badges15 bronze badges

8 Comments

Royi Namir Over a year ago

So If I add module dependency at the main ng-app , it allow me to inject it everywhere without writing the dependency ?

Ivan Guardado Over a year ago

Yes, you only need to define the component in your module (controller, service, constant...), load the module and inject what you want where you want

Royi Namir Over a year ago

If so why here they added ngResource there ant not in the app.js file under the main module (angular.github.io/angular-phonecat/step-11/app/js/app.js) ?

Royi Namir Over a year ago

Also Phone is not a member of phonecatControllers, it is a member of phonecatServices

Ivan Guardado Over a year ago

I thinks it's because the author wants to follow a module design pattern. Every piece of code it's a separate module with its own dependencies. However, in applications I've seen (and made), all depencencies are loaded in the main.js file

|

Collectives™ on Stack Overflow

AngularJS module dependencies - clarification?

2 Answers 2

3 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related