Maison > Article > interface Web > Application modulaire AngularJS

Application modulaire AngularJS

php中世界最好的语言original: 2018-05-02 11:20:161025parcourir

Cette fois, je vous présente des applications AngularJS modulaires, quelles sont les précautions pour les applications modulaires AngularJS, voici des cas pratiques, jetons-y un coup d'œil. temps.

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 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">

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 :

Utilisation du plug-in swiper dans vue

Explication détaillée de l'utilisation du journal express par défaut composant morgan

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS exploite le DOM et insère des nœudsArticle suivant：JS exploite le DOM et insère des nœuds

Articles Liés

Voir plus