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

Question

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 1

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.

Answer 2

The ['myApp.dashboard','myApp.value'] tells about the dependencies. It means that myApp need to use those dependencies to work.

As for the dot, it's just a good naming convention. You can use without the dot also. The name myApp.dashboard could help to show that the dashboard module is part or submodule of the myApp module. But technically, the dot is not necessary. You can also name it as dashboard only. The dependency is expressed explicitely in the [ ] array, not in the name itself.