Maison >interface Web >js tutoriel >Utiliser AngularJS à partir de zéro pour implémenter la modularisation des applications
Utiliser AngularJS à partir de zéro pour implémenter la modularisation des applications
- php中世界最好的语言original
- 2018-06-11 14:33:571365parcourir
Cette fois, je vais vous expliquer comment utiliser AngularJS à partir de zéro pour implémenter la modularisation des applications. Quelles sont les précautions à prendre pour utiliser AngularJS pour implémenter la modularisation des applications ?
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 les méthodes controller(), directive(), filter() de l'objet pour ajouter des contrôleurs, des instructions, des filtres et d'autres composants au module. . (3) Module de référence de page : commande ng-app<html ng-app="appMobile">
3. Utilisez des modules pour résoudre les conflits de noms .
partagé par deux pages Dans un fichier js, la définition du contrôleur est placée dans common.js Lorsque les noms des contrôleurs définis sur deux pages sont identiques, AngularJS résout le conflit de nom en utilisant. modularisation.Appelez la méthode angulaire.module() pour créer Deux instances de module appellent la méthode contrôleur() de ces deux instances de module pour créer deux contrôleurs portant le même nom, mais ces deux contrôleurs appartiennent à des modules différents bien que les noms de contrôleur soient dans le. Les pages html sont toutes des UserController, appartiennent à différents modules, é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. Bonnes pratiques pour la modularisation
En supposant un projet. nom : application, comprenant deux modules : connexion et inscription :├─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 │ │Je pense 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 aux autres articles connexes sur le. Site Web chinois PHP ! Lecture recommandée :
Comment utiliser vue+mint-ui dans le projet
Résumé JS de la suppression d'un objet DOM méthodes de nœuds
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript