Angular module dependencies - Clarification?

Question

I have an application which I declare as :

var app = angular.module('mg.app', ['mg.auth' , 'ui.router'  ,'mg.calc'  ]);

mg.auth and mg.calc are modules (my modules) which I inject as dependencies.

Code for mg.auth :

angular.module('mg.auth', ['ui.router']);
angular.module('mg.auth').config(function ($stateProvider)
    {
        $stateProvider.state('signin', {
          ...
        });
    });

Code for mg.calc:

angular.module('mg.calc', ['ui.router','ui.bootstrap']); 
angular.module('mg.calc').config(function ($stateProvider)
        {
            $stateProvider.state('calc', {
             ...
            });
        }

In the HTML I have :

 <a href ui-sref="calc">

When I click that link , it changes the state to calc and I do see the desired result.

So where is the problem ?

Looking at my main module (ng.app) , If I remove mg.calc as a dependecy there is an error :

But I don't understand why do I need 'mg.calc' as a depency of mg.app ?

I mean , When JS engine sees the code for mg.calc :

    angular.module('mg.calc', ['ui.router','ui.bootstrap']); 
    angular.module('mg.calc').config(function ($stateProvider)
            {
                $stateProvider.state('calc', {
                 ...
                });
            }

It knows that there is a new calc state and should be able to transit to calc.

Question

Functionallity , why do mg.app must set mg.calc as a dependency ?

It is not that I use some code from mg.calc in mg.app

Beacuse In the section of ng-app you have called mg.app so it will render only that module and its dependent module data. — Kunal Kakkad
– Kunal Kakkad, Commented Dec 29, 2015 at 8:06
render means 'will be effective'. I mean that the module which you have passed in ng-app will be effective and alongwith that its injected/dependent modules will be effective. — Kunal Kakkad
– Kunal Kakkad, Commented Dec 29, 2015 at 8:09

sdfacre · Accepted Answer · 2015-12-29 08:02:56Z

1

it is because your angular app was bootstrapped with mg.app module, not mg.calc module, that's why you need to tell angular that you need mg.calc as well.

answered Dec 29, 2015 at 8:02

sdfacre

1,2737 silver badges7 bronze badges

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

4 Comments

Royi Namir Over a year ago

So even if mg.app doesn't use a code from mg.calc - I still need to reference the module because mg.app is the entry point ?

sdfacre Over a year ago

you clicked on the link 'calc', that's when you used it. what happened was that ui-router was trying to find state configuration for 'calc' but couldn't find anything. that's why the error was thrown.

Royi Namir Over a year ago

But the code for registration the route state - was executed !

sdfacre Over a year ago

yes, it was executed but the route state was registered in mg.calc module. If you don't inject mg.calc module into your main app module, how does your main module know about it?

Collectives™ on Stack Overflow

Angular module dependencies - Clarification?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related