Operate AngularJS from scratch to implement application modularization

This time I will bring you how to operate AngularJS from scratch to implement application modularization. What are the precautions for operating AngularJS to implement 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 controllers, instructions, filters and other components to the module.

(3) Page reference module: ng-app command

3. Use modules to solve naming conflicts

Two pages share one js file, the definition of the controller is placed in common.js. When the names of the controllers defined on two pages are the same, a conflict will occur. AngularJS solves the naming conflict by using modularity. Call the angular.module() method to create two Module instance, call the controller() method of these two module instances respectively to create two controllers with the same name, but these two controllers belong to different modules. Although the names of the controllers in the html page are all UserController, 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 login and register two modules:

├─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 to use vue mint-ui in the project

Summary of JS deletion of DOM object node methods

The above is the detailed content of Operate AngularJS from scratch to implement application modularization. For more information, please follow other related articles on the PHP Chinese website!