Detailed explanation of the use of AngularJS application modularization

This time I will bring you AngularJSApplicationModularizationdetailed explanation, what are the precautions for using AngularJS application modularization, the following is a practical case , let’s take a look.

1. Benefits of modularization

(1) Achieve clearer logic and strong readability;
(2)Team The development division of labor is clear and easy to control;
(3) Make full use of reusable code;
(4) Abstract public modules and have strong maintainability;
(5) Modular legacy systems are easy to assemble Develop new similar systems.

2. Definition of AngularJS module

(1) How to use module() of angular objects:

  // 定义一个无依赖模块
  angular.module('appModule',[]);
  // 定义一个依赖module1、module2的模块
  angular.module('appModule',['module1','module2']);

(2)angular.module() method: receives three parameters

The first is the name of the module, and the second is an array, indicating the name of the module on which the module depends. If you do not need to rely on other modules, just pass in an empty array. The third parameter is optional and receives a method for configuring the module. Its function is the same as the config() method of the module instance.

angular The .module() method returns a module instance object. You can call the object's controller(), directive(), filter() and other methods to add controller, instructions, filters# to the module. ## and other components.

(3) Page reference module: ng-app directive

3. Use modules to resolve naming conflicts

Two pages share a js file. The definition of the controller is placed in common.js. When the controller names defined by the two pages are the same, a conflict will occur. AngularJS uses modularization to solve the naming problem. Conflict. Call the angular.module() method to create two module instances, and call the controller() method of the two module instances to create two controllers with the same name, but the two controllers belong to different modules. Although the html page The controller names in are all UserController, but they belong to different modules, thus avoiding conflicts.

var loginModule = angular.module("loginModule",[]);
loginModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "login";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("登录模块： UserController");
  }
  
})
var registerModule = angular.module("registerModule",[]);
registerModule.controller("UserController",function($scope,$log){
  
  $scope.uname = "register";
  $scope.pword = "admin";
  $scope.submit = function(){
    alert("注册模块： UserController");
  }  
})

4. Best practices for modularization

Assume the project name: app, including two modules: login and register:

├─app
│ │
│ ├──css---------------CSS样式
│ ├──img---------------图片资源
│ ├──js----------------JS代码  
│ │  common.js // 公共JS代码
│ │
│ ├──modules
│ │  │
│ │  ├─login----------------登录模块
│ │  │  │  
│ │  │  │   loginModule.js----------------登录模块定义
│ │  │  │   
│ │  │  ├─css
│ │  │  ├─js  
│ │  │  │   directives.js
│ │  │  │   filters.js
│ │  │  │   controllers.js----------------控制器定义
│ │  │  │  
│ │  │  │  
│ │  │  └─views  
│ │  │     login.html
│ │  │     
│ │  └──register----------------注册模块  
│ │     │  
│ │     │   registerModule.js----------------注册模块定义
│ │     │   
│ │     ├─css
│ │     ├─js  
│ │     │   directives.js
│ │     │   filters.js
│ │     │   controllers.js----------------控制器定义
│ │     │  
│ │     │  
│ │     └─views  
│ │       register.html
│ │

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How does JS implement DOM insertion of nodes

How does JS implement DOM deletion of nodes

The above is the detailed content of Detailed explanation of the use of AngularJS application modularization. For more information, please follow other related articles on the PHP Chinese website!