Explication détaillée de l'utilisation de la modularisation des applications AngularJS-js tutoriel-php.cn

Explication détaillée de l'utilisation de la modularisation des applications AngularJS

php中世界最好的语言

Libérer： 2018-04-08 10:56:54

original

1483 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée de l'utilisation de AngularJSapplicationmodularisation, et quelles sont les précautions lors de l'utilisation de la modularisation d'application AngularJS. cas pratiques, jetons un oeil.

1. Avantages de la modularisation

(1) Obtenir une logique plus claire et une forte lisibilité ;
(2) Équipe La division de développement de le travail est clair et facile à contrôler ;
(3) Utiliser pleinement le code réutilisable
(4) Les modules publics abstraits et ont une forte maintenabilité
(5) Les systèmes existants modulaires sont faciles à assembler ; systèmes similaires.

2. Définition du module AngularJS

(1) Comment utiliser le module() des objets angulaires :

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

Copier après la connexion

(2) Méthode angulaire.module() : reçoit trois paramètres

Le premier est le nom du module, et le second est un tableau, indiquant le nom du module sur lequel le module ça dépend. Si vous n'avez pas besoin de vous appuyer sur d'autres modules, transmettez simplement un tableau vide. Le troisième paramètre est facultatif et reçoit une méthode de configuration du module. Sa fonction est la même que la méthode config() de l'instance du module. >

angular La méthode .module() renvoie un objet d'instance de module. Vous pouvez appeler le contrôleur(), la directive(), le filtre() et d'autres méthodes pour ajouter un

contrôleur, des instructions et filtre et d'autres composants.(3) Module de référence de page : directive ng-app

<html ng-app="appMobile">

Copier après la connexion

3. pour résoudre les problèmes de conflits de nomsDeux pages partagent un fichier js La définition du contrôleur est placée dans common.js. Lorsque les noms de contrôleur définis par les deux pages sont les mêmes, un. un conflit se produira. AngularJS utilise la modularisation pour résoudre le conflit de nom. Appelez la méthode angulaire.module() pour créer deux instances de module et appelez la méthode contrôleur() des deux instances de module pour créer deux contrôleurs avec le même nom, mais le même nom. deux contrôleurs appartiennent à des modules différents. Bien que les noms de contrôleurs dans la page html soient tous UserController, mais ils appartiennent à des modules différents, évitant ainsi les conflits

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");
  }  
})

Copier après la connexion

4. Meilleures pratiques pour. modularisation Assumez le nom du projet : app, comprenant deux modules : connexion et inscription :

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce Article Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

├─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
│ │

Copier après la connexion

Lecture recommandée :

Comment JS implémente-t-il l'insertion de nœuds DOM

Comment JS implémente-t-il la suppression de nœuds DOM

🎜>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!