Dieses Mal präsentiere ich Ihnen AngularJS modulare Anwendungen. Was sind die Vorsichtsmaßnahmen für modulare AngularJS-Anwendungen? Im Folgenden finden Sie praktische Fälle. Werfen wir einen Blick darauf Zeit.
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 wiederverwendbaren Code ähnliche Systeme.
2. Definition des AngularJS-Moduls(1) So verwenden Sie module() von Winkelobjekten:
// 定义一个无依赖模块
angular.module('appModule',[]);
// 定义一个依赖module1、module2的模块
angular.module('appModule',['module1','module2']);(2) Methode „angular.module()“: empfängt drei Parameter
Der erste ist der Name des Moduls und der zweite ist ein Array, das den Namen des Moduls angibt, von dem das Modul abhängt. Wenn Sie nicht auf andere Module angewiesen sind, übergeben Sie einfach ein leeres Array. Der dritte Parameter ist optional und erhält eine Methode zum Konfigurieren des Moduls. Seine Funktion ist dieselbe wie die config()-Methode der Modulinstanz >
angular Die .module()-Methode gibt ein Modulinstanzobjekt zurück. Sie können die Methoden „controller()“, „directive()“ und „filter()“ des Objekts aufrufen, umcontroller
, Anweisungen und Filter(3) Seitenreferenzmodul: ng-app-Direktive<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 identisch sind, tritt ein Konflikt auf .AngularJS verwendet Modularisierung, um das Namensproblem zu lösen. Rufen Sie die Methode „angular.module()“ auf, um zwei Modulinstanzen zu erstellen, und rufen Sie die Methode „controller()“ der beiden Modulinstanzen auf, um zwei Controller mit demselben Namen zu erstellen Die Controller-Namen in der HTML-Seite sind zwar alle UserController, aber sie gehören zu verschiedenen Modulen, wodurch Konflikte vermieden werden.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");
}
})
Übernehmen Sie den Projektnamen: App, einschließlich zweier Module: Anmelden und Registrieren: ├─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
│ │
Verwendung des Swiper-Plug-Ins in Vue
Detaillierte Erläuterung der Verwendung des Express-Standardprotokolls Komponente Morgan
Das obige ist der detaillierte Inhalt vonModulare AngularJS-Anwendungen. 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)
