An in-depth analysis of module (modular) _angularjs in Angularjs

What is the Angularjs module

The module we are talking about is an integral part of your ANGULARJS application, it can be a controller, it can be a service, it can be a filter (filter), it can be a directive (instruction), etc. ... Are all part of a module!

Most applications have a function entry method main, use it to initialize, and load assembly modules, and then the combination of these modules makes up your application, right?

However, but, the ANGULARJS application is not so oh, it does not have a main method, there is no function entry. Instead, specify in the module how the module should be loaded and started in the Angularjs application.

This approach has several advantages:

1 Use the declarative way to make people easier to understand.

2 You can make it easier to reuse your code.

3 The loading sequence of the module is more easily controlled. Because these modules are deferred execution.

4 it becomes more convenient for unit testing. More reliable, you only need to load this module to be able to test.

5 End-to-end testing, you can use the module to rewrite the configuration.

In Angularjs, module is a core existence that includes many aspects, such as Controller, Config, service, factory, Directive, constant, and so on.

How do you implement a module-like function in JavaScript?

Or, we define a function, how to open the function inside the function to the outside world?

I think that you can open the function as a key value of an object to the outside world.

This is very general, in fact, is this:

var mymodule = function outerfuction () {
  var method1 = new function () {}
  var method2 = new function () {}
  return{< C4/>method1:method1,
    method2, Method2
  }
}
var o = outerfucntion ();
O.method1 ();

Example of holding a bank to save money.

var account = function () {
 //balance
 var balance = 0;
 Save up
 var deposit = function (Money) {
  Balance+=money;
  Console.log ("The balance on the card is:" + balance);
  Notifyuser ();
 }
 Take Money
 var withdraw = function (Cash) {
  balance =;
  Console.log ("The balance on the card is:" + balance)
  notifyuser ();
 }
 Notifies the user that
 var notifyuser = function () {
  Console.log ("Changes on card balance");
 }
 return {
  deposit:deposit,
  withdraw:withdraw
 }
}
var a1 = account ();
A1.deposit (100);

Come to Angularjs again, we have been accustomed to write this:

var app = Angular.module (' app ', []);
App.config ();
App.controller ();
App.factory ();

That is, get to module, and then invoke the method that module provides to us.

View Angular.js source code, found:

Angular = Window.angular | | (Window.angular = {})

This is the reason why we can use angular this variable.

...
var moduleinstace = {
    provider:invokelater (' $provide ', ' provider '),
    factory:invokelater (' $provider ', ' Factory '),
    service:invokelater (' $provider ', ' service '),
    value:invokelater (' $provide ', ' value ')
    , Constant:invokelater (' $provider ', ' constant ' ...),
    animation:invokelater (' $animateProvider ',...),
    Filter:invokelater (' $filterProvider ',...),
    controller:invokelater (' $controllerProvider ',...),
    Directive:invokelater (' $compileProvider ',...),
    config:config,
} return
moduleinstance;

The above wording is precisely the writing of module.

PS:angular.module (' MyApp ', [...]) There is a small but important difference between the Angular.module (' MyApp ').

Angular.module (' MyApp ', [...]) Creates a new angular module and then puts the square brackets ([...] , and Angular.module (' MyApp ') uses the existing module defined by the first call.

Therefore, for the following code, you need to ensure that the entire application will only be used once:

Angular.module (' MyApp ', [...])//If your application is modular, this may be mymodule

If you are not going to save the reference of a module to a variable and then refer to the module through the variable throughout the application, then the use of Angular.module (MYAPP) in the other file will ensure that the correct ANGULARJS module reference is obtained. Everything on the module must be defined by accessing the module reference, or by adding the necessary content to the place where the module is defined.