Utiliser AngularJS à partir de zéro pour implémenter la modularisation des applications-js tutoriel-php.cn

Utiliser AngularJS à partir de zéro pour implémenter la modularisation des applications

php中世界最好的语言

Libérer： 2018-06-11 14:33:57

original

1371 Les gens l'ont consulté

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']);

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!