Cette fois, je vais vous apporter les étapes détaillées de l'application AngularJSmodularisation, quelles sont les précautions pour la modularisation des applications AngularJS, et voici des cas pratiques , jetons un coup d'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']);(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 uncontrôleur, des instructions et filtre et d'autres composants.(3) Module de référence de page : directive ng-app
<html ng-app="appMobile">
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 respectivement la méthode contrôleur() des deux instances de module pour créer deux contrôleurs avec le même nom, mais les 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");
}
})4. Meilleures pratiques. pour la modularisation Supposons 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 cet 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 │ │
Lecture recommandée :
Utiliser mint-ui dans vuemint-ui implémente le partage de cas de liaison à trois niveauxCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
