Was ist ein AngularJS-Modul?
Ein Modul definiert die Anwendungsfunktionalität, die mithilfe der ng-app-Direktive auf die gesamte HTML-Seite angewendet wird. Es definiert Funktionen wie Dienste, Anweisungen und Filter so, dass es einfach ist, sie in verschiedenen Anwendungen wiederzuverwenden.
In all unseren früheren Tutorials hätten Sie die ng-app-Direktive bemerkt, mit der Sie Ihre Angular-Hauptanwendung definiert haben. Dies ist eines der Schlüsselkonzepte von Modulen in Angular.JS.
In diesem Tutorial lernen Sie:
- So erstellen Sie ein Modul in AngularJS
- Module und Controller
So erstellen Sie ein Modul in AngularJS
Bevor wir mit einem Modul beginnen, schauen wir uns ein Beispiel für eine AngularJS-Anwendung ohne Modul an und verstehen dann, wie wichtig es ist, Module in Ihrer Anwendung zu haben.
Lassen Sie uns eine Datei mit dem Namen "DemoController.js" erstellen und der Datei den folgenden Code hinzufügen
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Im obigen Code haben wir eine Funktion namens "DemoController" erstellt, die als Controller in unserer Anwendung fungieren wird.
In diesem Controller führen wir lediglich die Addition von 2 Variablen a und b durch und weisen die Addition dieser Variablen einer neuen Variablen c zu und weisen sie dem Bereichsobjekt wieder zu.
Jetzt erstellen wir unsere Hauptprobe.html, die unsere Hauptanwendung sein wird. Fügen wir das folgende Code-Snippet in unsere HTML-Seite ein.
Guru99 Global Event {{c}}
Im obigen Code schließen wir unseren DemoController ein und rufen dann den Wert der Variablen $ scope.c über einen Ausdruck auf.
Beachten Sie jedoch unsere ng-app-Direktive, sie hat einen leeren Wert.
- Dies bedeutet grundsätzlich, dass auf alle Controller, die im Rahmen der ng-app-Direktive aufgerufen werden, global zugegriffen werden kann. Es gibt keine Grenze, die mehrere Controller voneinander trennt.
- In der heutigen Programmierung ist es eine schlechte Praxis, Controller an keine Module anzuschließen und sie global zugänglich zu machen. Für Controller muss eine logische Grenze definiert sein.
Und hier kommen Module ins Spiel. Module werden verwendet, um diese Trennung von Grenzen zu schaffen und um die Trennung von Controllern basierend auf der Funktionalität zu unterstützen.
Lassen Sie uns den obigen Code ändern, um Module zu implementieren und unseren Controller an dieses Modul anzuschließen
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Beachten wir die wichtigsten Unterschiede im oben beschriebenen Code
var sampleApp = angular.module('sampleApp',[]);Wir erstellen speziell ein AngularJS-Modul namens 'sampleApp'. Dies bildet eine logische Grenze für die Funktionalität, die dieses Modul enthalten wird. In unserem obigen Beispiel haben wir also ein Modul, das einen Controller enthält, der die Rolle des Hinzufügens von 2 Bereichsobjekten übernimmt. Daher können wir ein Modul mit einer logischen Grenze haben, die besagt, dass dieses Modul nur die Funktionalität mathematischer Berechnungen für die Anwendung ausführt.
sampleApp.controller('DemoController', function($scope)Wir schließen den Controller jetzt an unser AngularJS-Modul "SampleApp" an. Dies bedeutet, dass wir nicht auf die Funktionalität unseres Controllers verweisen können, wenn wir in unserem Haupt-HTML-Code nicht auf das Modul 'sampleApp' verweisen.
Unser Haupt-HTML-Code sieht nicht wie unten gezeigt aus
Guru99 Global Event
{{c}}Beachten wir die Hauptunterschiede zwischen dem oben beschriebenen Code und unserem vorherigen Code
In unserem Body Tag,
- Anstatt eine leere ng-app-Direktive zu haben, rufen wir jetzt das Modul sampleApp auf.
- Durch Aufrufen dieses Anwendungsmoduls können wir nun auf den Controller 'DemoController' und die im Demo-Controller vorhandenen Funktionen zugreifen.
Module und Controller
In Angular.JS besteht das Muster für die Entwicklung moderner Webanwendungen darin, mehrere Module und Controller zu erstellen, um mehrere Funktionalitätsebenen logisch zu trennen.
Normalerweise werden Module in separaten Javascript-Dateien gespeichert, die sich von der Hauptanwendungsdatei unterscheiden.
Schauen wir uns ein Beispiel an, wie dies erreicht werden kann.
Im folgenden Beispiel
- Wir werden eine Datei mit dem Namen Utilities.js erstellen, die zwei Module enthält, eines zum Ausführen der Additionsfunktionalität und das andere zum Ausführen der Subtraktionsfunktionalität.
- Anschließend erstellen wir zwei separate Anwendungsdateien und greifen von jeder Anwendungsdatei auf die Dienstprogrammdatei zu.
- In einer Anwendungsdatei greifen wir zur Addition auf das Modul zu und in der anderen zur Subtraktion auf das Modul.
Schritt 1) Definieren Sie den Code für die mehreren Module und Steuerungen.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Beachten wir die wichtigsten Punkte im oben beschriebenen Code
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Es werden zwei separate Winkelmodule erstellt, von denen eines den Namen 'AdditionApp' und das zweite den Namen 'SubtractionApp' erhält.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Für jedes Modul sind zwei separate Controller definiert, einer heißt DemoAddController und der andere ist DemoSubtractController. Jeder Controller verfügt über eine separate Logik zum Addieren und Subtrahieren von Zahlen.
Schritt 2) Erstellen Sie Ihre Hauptanwendungsdateien. Erstellen wir eine Datei mit dem Namen ApplicationAddition.html und fügen den folgenden Code hinzu
Addition Addition :{{c}}Beachten wir die wichtigsten Punkte im oben beschriebenen Code
Wir verweisen auf unsere Datei Utilities.js in unserer Hauptanwendungsdatei. Auf diese Weise können wir auf alle in dieser Datei definierten AngularJS-Module verweisen.
Wir greifen auf das 'AdditionApp'-Modul und den DemoAddController zu, indem wir die ng-app-Direktive bzw. den ng-controller verwenden.
{{c}}Da wir auf das oben erwähnte Modul und den Controller verweisen, können wir über einen Ausdruck auf die Variable $ scope.c verweisen. Der Ausdruck ist das Ergebnis der Addition der beiden Bereichsvariablen a und b, die im 'DemoAddController'-Controller ausgeführt wurden
Genauso werden wir es für die Subtraktionsfunktion tun.
Schritt 3) Erstellen Sie Ihre Hauptanwendungsdateien. Erstellen wir eine Datei mit dem Namen "ApplicationSubtraction.html" und fügen den folgenden Code hinzu
Addition Subtraction :{{d}}Beachten wir die wichtigsten Punkte im oben beschriebenen Code
Wir verweisen auf unsere Datei Utilities.js in unserer Hauptanwendungsdatei. Auf diese Weise können wir auf alle in dieser Datei definierten Module verweisen.
Wir greifen auf das SubtractionApp-Modul und den DemoSubtractController zu, indem wir die ng-app-Direktive bzw. den ng-controller verwenden.
{{d}}Da wir auf das oben erwähnte Modul und den Controller verweisen, können wir über einen Ausdruck auf die Variable $ scope.d verweisen. Der Ausdruck ist das Ergebnis der Subtraktion der beiden Bereichsvariablen a und b, die im Controller 'DemoSubtractController' ausgeführt wurde
Zusammenfassung
- Ohne die Verwendung von AngularJS-Modulen haben Controller einen globalen Geltungsbereich, was zu schlechten Programmierpraktiken führt.
- Module werden verwendet, um Geschäftslogik zu trennen. Es können mehrere Module erstellt werden, die innerhalb dieser verschiedenen Module logisch getrennt sind.
- Für jedes AngularJS-Modul können eigene Controller definiert und zugewiesen werden.
- Beim Definieren von Modulen und Controllern werden diese normalerweise in separaten JavaScript-Dateien definiert. Diese JavaScript-Dateien werden dann in der Hauptanwendungsdatei referenziert.