suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Module in AngularJS_AngularJS

Detaillierte Erläuterung der Module in AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 16:17:16943Durchsuche

Bevor wir über das AngularJS-Modul sprechen, stellen wir zunächst einige Wissenspunkte von Angular vor:

AngularJS ist eine reine clientseitige Technologie, die vollständig in Javascript geschrieben ist. Es nutzt herkömmliche Technologien für die Webentwicklung (HTML, CSS, Javascript), um die Entwicklung von Webanwendungen schneller und einfacher zu machen.

Eine wichtige Möglichkeit, wie AngularJS die Anwendungsentwicklung vereinfacht, besteht darin, einige gängige Low-Level-Entwicklungsvorgänge zu paketieren und sie Entwicklern zur Verfügung zu stellen. AngularJS verarbeitet diese Low-Level-Vorgänge automatisch. Dazu gehören:

1.DOM-Operation
2. Richten Sie die Ereignisüberwachung ein
3. Eingabevalidierung: Da AngularJS die meisten dieser Vorgänge übernimmt, können sich Entwickler mehr auf die Geschäftslogik der Anwendung konzentrieren und müssen sich weniger auf das Schreiben von sich wiederholendem, fehleranfälligem und Low-Level-Code konzentrieren.

Während AngularJS die Entwicklung vereinfacht, stellt es dem Kunden auch einige exquisite Technologien zur Verfügung, darunter:

1. Trennung von Daten, Geschäftslogik und Ansichten
2. Automatische Bindung von Daten und Ansichten
3. Allgemeine Dienstleistungen
4. Abhängigkeitsinjektion (hauptsächlich für Aggregationsdienste verwendet)
5. Erweiterbarer HTML-Compiler (vollständig in JavaScript geschrieben)
6. Einfach zu testen
7. Die Kundennachfrage nach diesen Technologien besteht tatsächlich schon seit langem.

Gleichzeitig können Sie AngularJS auch zum Entwickeln einseitiger oder mehrseitiger Anwendungen verwenden, es wird jedoch hauptsächlich zum Entwickeln einseitiger Anwendungen verwendet. AngularJS unterstützt Browserverlaufsvorgänge, Vorwärts- und Rückwärtsschaltflächen sowie Sammlungsvorgänge in Einzelseitenanwendungen.

Als nächstes erklären wir das AngularJS-Modul im Detail.

Die meisten Anwendungen verfügen über eine Hauptmethode, die zum Instanziieren, Organisieren und Starten der Anwendung verwendet wird. AngularJS-Anwendungen verfügen nicht über eine Hauptmethode, sondern verwenden stattdessen Module, um zu deklarieren, wie die Anwendung gestartet werden soll. Diese Methode hat folgende Vorteile:

1. Der Startvorgang ist deklarativ und daher einfacher zu verstehen.
2. Beim Unit-Test müssen nicht alle Module geladen werden, daher ist diese Methode beim Schreiben von Unit-Tests hilfreich.
3. Unter bestimmten Umständen können den Tests zusätzliche Module hinzugefügt werden. Diese Module können die Konfiguration ändern und bei End-to-End-Tests helfen.
4. Code von Drittanbietern kann in wiederverwendbare Module gepackt werden.
5. Module können in beliebiger sequentieller oder paralleler Reihenfolge geladen werden (da die Ausführung des Moduls selbst verzögert ist).

Zum Beispiel: 

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

Im obigen Beispiel verwenden wir das myApp-Modul, um die Anwendung zu starten, indem wir sie in 8f08cb147f69d67da71d45acc046f462 angeben.

Das obige Beispiel ist sehr einfach zu schreiben, eignet sich jedoch nicht zum Schreiben großer Anwendungen mit derselben Schreibmethode. Wir empfehlen Ihnen, Ihre Bewerbung in folgende Module aufzuteilen:

1. Ein Servicemodul zum Erstellen von Serviceerklärungen.
2. Ein Anweisungsmodul, das zum Deklarieren von Anweisungen verwendet wird.
3. Ein Filtermodul, das zum Erstellen von Filterdeklarationen verwendet wird.
4. Ein Modul auf Anwendungsebene, das vom oben genannten Modul abhängt und Initialisierungscode enthält.

Zum Beispiel: 

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

Der Grund für diese Aufteilung liegt darin, dass Sie den Initialisierungscode in Ihren Tests häufig ignorieren müssen, da dieser Code schwieriger zu testen ist. Indem Sie es herausbrechen, können Sie es beim Testen leicht ignorieren. Tests können auch spezifischer gestaltet werden, indem nur die für den aktuellen Test relevanten Module geladen werden. Das Obige ist nur ein Vorschlag, Sie können es gerne an Ihre spezifische Situation anpassen.

Ein Modul ist eine Sammlung von Konfigurations- und Codeblöcken, die während der Startphase an die Anwendung angehängt werden. Das einfachste Modul besteht aus zwei Arten von Codeblocksammlungen:

Konfigurationscodeblock – wird während der Injektions- und Konfigurationsphase des Injektionsanbieters ausgeführt. In Konfigurationsblöcke können nur Injektionsanbieter und Konstanten eingefügt werden. Dadurch soll verhindert werden, dass der Dienst vorzeitig initialisiert wird, bevor er konfiguriert ist.
Codeblock ausführen – wird nach der Erstellung des Injektors ausgeführt und zum Starten der Anwendung verwendet. In Laufblöcke können nur Instanzen und Konstanten eingefügt werden. Dadurch soll verhindert werden, dass nach der Ausführung eine Systemkonfiguration auftritt.

Code-Implementierung: 

angular.module('myModule', []).  
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

Module verfügen auch über einige praktische Konfigurationsmethoden, deren Verwendung der Verwendung von Codeblöcken entspricht. Zum Beispiel: 

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

Die Konfigurationsblöcke werden in der Reihenfolge der Registrierung von $provide, $compileProvider, $filterProvider angewendet. Die einzige Ausnahme bildet die Definition von Konstanten, die immer am Anfang des Konfigurationsblocks platziert werden sollten.

Run-Blöcke sind die Hauptmethoden-ähnlichen Elemente in AngularJS. Ein Ausführungsblock ist ein Codeteil, der zum Starten einer Anwendung verwendet wird. Es wird ausgeführt, nachdem alle Dienste konfiguriert und alle Injektoren erstellt wurden. Ausführungsblöcke enthalten häufig Code, der schwer zu testen ist. Daher sollten sie in separaten Modulen geschrieben werden, damit sie beim Komponententest ignoriert werden können.

Ein Modul kann andere Module als seine Abhängigkeiten auflisten. „Abhängig von einem Modul“ bedeutet, dass das abhängige Modul vor diesem Modul geladen werden muss. Mit anderen Worten: Der Konfigurationsblock des abhängigen Moduls wird vor dem Konfigurationsblock dieses Moduls ausgeführt. Das Gleiche gilt für Laufblöcke. Jedes Modul kann nur einmal geladen werden, auch wenn es von mehreren Modulen abhängig ist.

Module ist eine Methode zur Verwaltung der $injector-Konfiguration und hat nichts mit dem Laden von Skripten zu tun. Im Internet gibt es viele Bibliotheken, die das Laden von Modulen steuern und mit AngularJS verwendet werden können. Da Module beim Laden nichts tun, können sie in beliebiger Reihenfolge oder parallel geladen werden

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：Einführung in Angular und Einführung in seine Funktionen_AngularJSNächster Artikel：Einführung in Angular und Einführung in seine Funktionen_AngularJS

In Verbindung stehende Artikel

Mehr sehen