What is the point of declaring angular module dependency if one module can access the values and services from another module anyway

Question

See this plunker code (Notice console.log messages) to understand what I am trying to say/ask.

I have defined 3 modules, namely, myApp, myApp.view1, myApp.view2. Only myApp module has dependency declared on the other 2.

myApp Module

angular.module('myApp', ['ngRoute','myApp.view1','myApp.view2'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({redirectTo: '/view1'});
 }])

.value('author', 'Suman Barick')

myApp.view1 Module

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    template: 'Welcome to view ONE',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['author', function(author) {
    console.log('*******************************************');
    console.log('I am on view1 module');
    console.log('Printing author value from myApp module ' + author);
    console.log('*******************************************');
}])

.value('view1_var', 'Hi, I am defined as value in myApp.view1 module')

.service('serviceV1', function(){
    this.getData = function(){return 'abcdef';}
    console.log('This is a service from myApp.view1 module');
})

myApp.view2 Module

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    template: 'Welcome to view TWO',
    controller: 'View2Ctrl'
  });
}])

.controller('View2Ctrl', ['view1_var','serviceV1', function(view1_var, serviceV1) {
    console.log('*******************************************');
    console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module');
    console.log(view1_var);
    console.log(serviceV1.getData());
    console.log('*******************************************');
}]);

My Doubts / Questions:

Why can "myApp.view1" module access the "author" value defined on "myApp" module. "myApp" has a dependency on "myApp.view1", but not vice versa.
More interestingly, "myApp.view1" and "myApp.view2" are 2 entirely separate module. Then how come "myApp.view2" is accessing the view1_var and serviceV1 from "myApp.view1" without even declaring any dependency on it?
Is this the intended design / behavior ? Then what are other things that I can define in one module but use it in any other module irrespective of their dependency among themselves?

Can someone please explain?

If you take a test driven approach, including all dependancies to a module helps testing that module in isolation. — dewd
– dewd, Commented May 16, 2016 at 19:53
I see your other 3 questions now. I was just answering the question in the title — dewd
– dewd, Commented May 16, 2016 at 20:00
Actually, I tried but couldn't fit this huge body into that tiny title ;) :D — Suman Barick
– Suman Barick, Commented May 16, 2016 at 20:07
I think this answers your questions: stackoverflow.com/questions/30729386/… — dewd
– dewd, Commented May 16, 2016 at 22:38

Community · Accepted Answer · 2020-06-20 09:12:55Z

After researching a bit and thanks to @dewd for pointing me to the accepted answer of this question, I came to the following conclusion,

So, here goes My Theorem [See Illustration image below]

If

There exists n modules naming A1, A2, A3, ..., An such that A1 depends on A2, A2 depends on A3 and so on...

Also, m modules naming B1, B2, B3, .... Bm such that B1 depends on B2, B2 depends on B3 and so on...

Also there exists, a top(est) level dependent module, say 'AB', which is dependent on both module 'A1' and 'B1'

Then, module 'An' will be able to access any service declared on module 'Bm'

Illustration Image

The Experiment and Proof

See this plunkr for demo.

Here I have declared total 7 modules,

modules A1, A2, A3 where, A1 is dependent on A2 and A2 is dependent on A3
modules B1, B2, B3 where, B1 is dependent on B2 and B2 is dependent on B3
module 'AB' which is dependent on both 'A1' and 'B1'

Now,

I have defined a service b3service on B3 module
I have bootstrapped AB module with body
Now I can access b3service from the module A3 (See console message)

But, A3 and B3 has no direct connection or dependency.

Here is my HTML

  <body id="body" ng-app="AB">
    <h1>Hello Plunker!</h1>

    <script src="app.js"></script>
  </body>

And here is my JS

angular.module('AB', ['A1', 'B1']);

angular.module('A1', ['A2']);
angular.module('A2', ['A3']);
var a3 = angular.module('A3', []);

angular.module('B1', ['B2']);
angular.module('B2', ['B3']);
var b3 = angular.module('B3', []);
  
  
b3.service('b3service', function(){
  this.getSecretMessage = function(){
    return 'Cows are Flying...';
  };
})
  
a3.run(function(b3service){
  console.log(b3service.getSecretMessage());
});

My Conclusion

I think the magic is in Nested Modules. That's why in the code shown in the question view1 module and view2 module could access each other. Because views are already nested inside body with which the parent of all modules, myApp was bootstrapped.

Confusing Fact...

And my head is still spinning... :P

jwal · Accepted Answer · 2016-05-16 19:14:59Z

In your controllers you declare the dependencies, if you add author, view1_var and serviceV1 to both controllers, then both controllers can see them.

Presenting view1_var in both shows that view1_var is indeed 'value'd as a global. As to why this is the case, I've no idea. However the second value declaration most certainly clobbers the first.

'use strict';

var myApp = angular.module('myApp', ['ngRoute', 'myApp.view1', 'myApp.view2']);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

myApp.value('author', 'Suman Barick');

var myApp1 = angular.module('myApp.view1', ['ngRoute']);
var myApp2 = angular.module('myApp.view2', ['ngRoute']);

myApp1.value('view1_var', 'Hi, view 1');
myApp2.value('view1_var', 'Hi, VIEW 2');

myApp1.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    template: 'Welcome to view ONE',
    controller: 'View1Ctrl'
  });
}]);

myApp2.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    template: 'Welcome to view TWO',
    controller: 'View2Ctrl'
  });
}]);

myApp1.service('serviceV1', function(){
    this.getData = function(){return 'abcdef';}
    console.log('This is a service from myApp.view1 module');
});

myApp1.controller('View1Ctrl', ['author','view1_var','serviceV1', function(author, view1_var, serviceV1) {
    console.log('*******************************************');
    console.log('I am on view1 module');
    console.log('Printing author value from myApp module ' + author);
    console.log(view1_var);
    console.log(serviceV1.getData());
    console.log('*******************************************');
}]);

myApp2.controller('View2Ctrl', ['author', 'view1_var','serviceV1', function(author, view1_var, serviceV1) {
    console.log('*******************************************');
    console.log('Look I am accessing view1_var and serviceV1 of view1 module... from view2 module');
    console.log('Printing author value from myApp module ' + author);
    console.log(view1_var);
    console.log(serviceV1.getData());
    console.log('*******************************************');
}]);

In fact, I don't think either of you read my answer, you just read my reputation count. nvm

Collectives™ on Stack Overflow

What is the point of declaring angular module dependency if one module can access the values and services from another module anyway

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related