Dieses Mal erkläre ich Ihnen ausführlich die Verwendung der AngularJSAnwendungsmodularisierung und welche Vorsichtsmaßnahmen bei der Verwendung der AngularJS-Anwendungsmodularisierung gelten Werfen wir einen Blick auf praktische Fälle.
1. Vorteile der Modularisierung
(1) Erzielen einer klareren Logik und einer besseren Lesbarkeit;(2) Team Die Entwicklungsabteilung von Der Arbeitsaufwand ist klar und leicht zu kontrollieren.
(3) Nutzen Sie den wiederverwendbaren Code vollständig aus ähnliche Systeme.
(1) So verwenden Sie module() von Winkelobjekten:
(2) Methode angle.module(): empfängt drei Parameter
// 定义一个无依赖模块
angular.module('appModule',[]);
// 定义一个依赖module1、module2的模块
angular.module('appModule',['module1','module2']);angular Die .module()-Methode gibt ein Modulinstanzobjekt zurück. Sie können die Methoden „controller()“, „directive()“ und „filter()“ des Objekts aufrufen, um
controller, Anweisungen und Filter
(3) Seitenreferenzmodul: ng-app-Direktive
3 um Namenskonfliktprobleme zu lösen<html ng-app="appMobile">
Zwei Seiten teilen sich eine js-Datei. Die Definition des Controllers wird in common.js platziert. Wenn die von den beiden Seiten definierten Controllernamen gleich sind, a Es kommt zu einem Konflikt. Um den Namenskonflikt aufzulösen, rufen Sie die Methode „angular.module()“ auf, und rufen Sie die Methode „controller()“ der beiden Modulinstanzen auf, um zwei Controller mit demselben Namen zu erstellen Obwohl die Controller-Namen auf der HTML-Seite alle zu unterschiedlichen Modulen gehören, werden Konflikte vermieden.
4. Best Practices für Modularisierungvar 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");
}
})Nehmen Sie den Projektnamen an: App, einschließlich zweier Module: Anmelden und Registrieren: Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!
Empfohlene Lektüre:├─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 │ │
Wie implementiert JS das DOM-Löschen von Knoten
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der AngularJS-Anwendungsmodularisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
