Detailed explanation of modules in AngularJS

Before talking about the angularjs module, let us first introduce some knowledge points of angular:

AngularJS is a pure client-side technology written entirely in Javascript. It uses conventional technologies for web development (HTML, CSS, Javascript) to make web application development faster and easier.

An important way AngularJS simplifies application development is to package some common low-level development operations and provide them to developers. AngularJS will automatically handle these low-level operations. They include:

1.DOM operation
2. Set up event monitoring
3. Input validation, because AngularJS will handle most of these operations, developers can focus more on the business logic of the application and less on writing repetitive, error-prone, and low-level code.

While AngularJS simplifies development, it also brings some exquisite technologies to the client, including:

1. Separation of data, business logic and views
2. Automatic binding of data and views
3. General services
4. Dependency injection (mainly used for aggregation services)
5. Extensible HTML compiler (written entirely in JavaScript)
6. Easy to test
7. Client demand for these technologies has actually existed for a long time.

At the same time, you can also use AngularJS to develop single-page or multi-page applications, but it is mainly used to develop single-page applications. AngularJS supports browser history operations, forward and backward buttons, and collection operations in single-page applications.

Next, let’s explain the angularJS module in detail.

Most applications have a main method that is used to instantiate, organize, and start the application. AngularJS applications do not have a main method, but instead use modules to declare how the application should be started. This method has the following advantages:

1. The startup process is declarative, so it is easier to understand.
2. There is no need to load all modules in unit testing, so this method is helpful for writing unit tests.
3. Additional modules can be added to tests under specific circumstances. These modules can change the configuration and help with end-to-end testing.
4. Third-party code can be packaged into reusable modules.
5. Modules can be loaded in any sequential or parallel order (because the execution of the module itself is delayed).

For example:

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

Copy after login

In the above example, we use the myApp module to start the application by specifying it in .

The above example is very simple to write, but it is not suitable to use the same writing method to write large applications. We recommend splitting your application into the following modules:

1. A service module used to make service declarations.
2. An instruction module, used to declare instructions.
3. A filter module, used to make filter declarations.
4. An application-level module that depends on the above module and contains initialization code.

For example:

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

Copy after login

The reason for this split is that you often need to ignore initialization code in your tests because these codes are more difficult to test. By breaking it out you can easily ignore it during testing. Tests can also be made more specific by loading only the modules relevant to the current test. The above is just a suggestion, you can feel free to adjust it according to your specific situation.

A module is a collection of configuration and code blocks that are attached to the application during the startup phase. The simplest module consists of two types of code block collections:

Configuration code block - executed during the injection provider injection and configuration phases. Only injection providers and constants can be injected into configuration blocks. This is to prevent the service from being initialized prematurely before it is configured.
Run code block - executed after the injector is created and used to start the application. Only instances and constants can be injected into run blocks. This is to prevent system configuration from occurring after running.

Code implementation:

angular.module('myModule', []).  
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

Copy after login

Modules also have some convenient methods for configuration, using them is equivalent to using code blocks. For example:

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

Copy after login

The configuration blocks will be applied in the order of registration of $provide, $compileProvider, $filterProvider. The only exception is the definition of constants, which should always be placed at the beginning of the configuration block.

Run blocks are the most main-method-like thing in AngularJS. A run block is a piece of code used to start an application. It is executed after all services have been configured and all injectors have been created. Run blocks often contain code that is difficult to test, so they should be written in separate modules so that they can be ignored during unit testing.

A module can list other modules as its dependencies. "Depends on a module" means that the dependent module needs to be loaded before this module. In other words, the configuration block of the dependent module will be executed before the configuration block of this module. The same goes for run blocks. Any module can only be loaded once, even if it is dependent on multiple modules.

Module is a method used to manage $injector configuration and has nothing to do with the loading of scripts. There are many libraries on the Internet that control module loading, and they can be used with AngularJS. Because modules don't do anything during loading, they can be loaded in any order or in parallel

Detailed explanation of modules in AngularJS_AngularJS