Betreiben Sie AngularJS von Grund auf, um die Anwendungsmodularisierung zu implementieren-js-Tutorial-php.cn

Betreiben Sie AngularJS von Grund auf, um die Anwendungsmodularisierung zu implementieren

php中世界最好的语言

Freigeben： 2018-06-11 14:33:57

Original

1323 Leute haben es durchsucht

Dieses Mal werde ich Ihnen zeigen, wie Sie AngularJS von Grund auf bedienen, um die Anwendungsmodularisierung zu implementieren. Was sind die Vorsichtsmaßnahmen für den Betrieb von AngularJS, um die Anwendungsmodularisierung zu implementieren?

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:

  // 定义一个无依赖模块
  angular.module('appModule',[]);
  // 定义一个依赖module1、module2的模块
  angular.module('appModule',['module1','module2']);

Nach dem Login kopieren

(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 Controller(), Directive(), Filter() und andere Methoden des Objekts aufrufen, um Controller, Anweisungen, Filter und andere andere Komponenten zum Modul hinzuzufügen .

(3) Seitenreferenzmodul: ng-app-Befehl

<html ng-app="appMobile">

Nach dem Login kopieren

3. Verwenden Sie Module, um Namenskonflikte zu lösen

Zwei Seiten teilen sich eine js-Datei, die Definition des Controllers wird in common.js platziert. Wenn die Namen der auf zwei Seiten definierten Controller identisch sind, löst AngularJS den Namenskonflikt Mit der Methode „angular.module()“ können Sie zwei Modulinstanzen erstellen. Rufen Sie die Methode „controller()“ dieser beiden Modulinstanzen auf, um zwei Controller mit demselben Namen zu erstellen. Diese beiden Controller gehören jedoch zu unterschiedlichen Modulen HTML-Seiten sind alle UserController, 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");
  }  
})

Nach dem Login kopieren

Best Practices für die Modularisierung

Übernehmen Sie das Projekt Name: App, einschließlich Anmelden und Registrieren von zwei Modulen:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So verwenden Sie vue+mint-ui im Projekt

JS-Zusammenfassung zum Löschen eines DOM-Objekts Knotenmethoden

Das obige ist der detaillierte Inhalt vonBetreiben Sie AngularJS von Grund auf, um die Anwendungsmodularisierung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!