fourth fourth - 1 month ago 12
AngularJS Question

What's the dot mean in the name of angular module

I am new in this field. When I read some code like
https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview
I discover that If I don't put

'myApp.dashboard','myApp.value'
in
angular.module('myApp', ['myApp.dashboard','myApp.value']);
It won't work.

If I just write like this:

(function() {
angular.module('myApp', []);
})();

(function() {
angular.module('myApp.dashboard', ['myApp.value']);
})();

(function() {
angular.module('myApp.value', []);
})();


It also doesn't work as well.

Could you tell me what's the dot here mean and why
angular.module('myApp.dashboard', ['myApp.value']);
doesn't work?

Sorry, this code is really in a mess and I haven't done much about it, just for test.

(function() {
angular.module('myApp', ['myApp.dashboard','myApp.value']);
})();

(function() {
angular.module('myApp.dashboard', []);
})();

(function() {
angular.module('myApp.value', []);
})();

(function() {
'use strict';
angular.module('myApp.value').factory('whichToShow', function() {
alert("running2");
var logged = true;
return {
getVar: function() {
return logged;
},
setVar: function(value) {
logged = value;
}

};
});
})();

(function() {
'use strict';
angular.module('myApp.dashboard').controller('mainControl', mainControl);

mainControl.$inject = ['whichToShow'];
alert("running1");

function mainControl(whichToShow) {
this.logged = whichToShow.getVar();
alert("this.logged");
}
})();


Supplement: I shouldn't ask second question, I made one mistake other place, sorry.

Answer

It is actually a coding style that can be followed so as to eliminate the naming collisions.

Use unique naming conventions with separators for sub-modules.

Why?: Unique names help avoid module name collisions. Separators help define modules and their submodule hierarchy. For example app may be your root module while app.dashboard and app.values may be modules that are used as dependencies of app.

Refering to John Papa Angular Style Guide Style Y021

I also suggest you to have a clear understanding about the style guide for every component in angular as suggested in the above Github repo by John Papa.

Comments