suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Schritte zur AngularJS-Anwendungsmodularisierung

Detaillierte Schritte zur AngularJS-Anwendungsmodularisierung

php中世界最好的语言
php中世界最好的语言Original
2018-04-20 10:29:531237Durchsuche

Dieses Mal werde ich Ihnen die detaillierten Schritte der AngularJSAnwendungs-Modularisierung, die Vorsichtsmaßnahmen für die AngularJS-Anwendungsmodularisierung und die folgenden praktischen Beispiele vorstellen , lass uns einen Blick darauf werfen.

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.

2. Definition des AngularJS-Moduls(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']);

Der erste ist der Name des Moduls und der zweite ist ein Array, das den Namen des Moduls angibt, auf dem sich das Modul befindet kommt darauf an. 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, 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 Die beiden Controller gehören zwar zu unterschiedlichen Modulen, die Controllernamen auf der HTML-Seite sind zwar alle UserController, sie gehören jedoch zu unterschiedlichen Modulen, wodurch Konflikte vermieden werden.

4. Best Practices zur Modularisierung 

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

Nehmen Sie den Projektnamen an: app, einschließlich zweier Module: Anmelden und Registrieren: Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Andere 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
│ │

Mint-UI in Vue verwenden

Mint-UI implementiert die dreistufige Verknüpfungs-Case-Sharing

Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zur AngularJS-Anwendungsmodularisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html angular Filter register JS 对象 ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS fügt DOM-Knoten ein (mit Code)Nächster Artikel：JS fügt DOM-Knoten ein (mit Code)

In Verbindung stehende Artikel

Mehr sehen