An in-depth analysis of modules in AngularJS_AngularJS

What are AngularJS modules

The module we are talking about is an integral part of your AngularJS application. It can be a Controller, a Service, a Filter, or a directive. ) etc... they all belong to one module!

Most applications have their own function entry method Main, which is used to initialize, load and assemble various modules, and then the combination of these modules constitutes your application, right?

But, but, AngularJS application is not like this. It has no main method and no function entry. Instead, it is specified in the module to declare how this module should be loaded and started in the AngularJS application.

This method has the following advantages:

1) Use declarations to make it easier for people to understand.

2) You can reuse your code more easily.

3) The loading order of modules is easier to control. Because these modules are executed lazily.

4) It becomes more convenient to conduct unit testing. More reliable, you only need to load this module to test.

5) In end-to-end testing, you can use modules to rewrite configurations.

Module is a core existence in AngularJS, including many aspects, such as controller, config, service, factory, directive, constant, etc.

How to implement module-like functions in Javascript?

In other words, if we define a function, how do we open the functions within the function to the outside world?

I think that the function in the function can be used as the key value of an object to open it to the outside world.

It’s very general to say this, but it’s actually like this:

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 

Give an example of depositing and withdrawing money from a bank.

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为： " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为： " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

Coming to AngularJS, we are used to writing like this:

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

That is, get the module and then call the method provided by the module to us.

View the angular.js source code and find:

angular = window.angular || (window.angular = {} )

This is why we can use the angular 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 writing method is exactly how module is written.

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

angular.module('MyApp',[...]) will create a new Angular module and load the dependency list in square brackets ([...]); while angular.module('MyApp ') will use the existing module defined by the first call.

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

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

If you don’t plan to store the module reference in a variable and then reference the module through this variable throughout the application, then using angular.module(MyApp) in other files can ensure that you get the correct AngularJS Module reference. Everything on the module must be defined by accessing this module reference, or by adding the necessary content where the module is defined.