AngularJS-Module

By: James Hartmann James Hartmann
Hours Aktualisiert

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 auf eine Weise, die eine einfache Wiederverwendung in verschiedenen Anwendungen ermöglicht.

In all unseren früheren Tutorials ist Ihnen sicherlich die Direktive ng-app aufgefallen, die zum Definieren Ihrer Haupt-Angular-Anwendung verwendet wird. Dies ist eines der Schlüsselkonzepte von Modulen in Angular.JS.

So erstellen Sie ein Modul in AngularJS

Bevor wir uns damit befassen, was ein Modul ist, schauen wir uns ein Beispiel einer AngularJS-Anwendung ohne Modul an und verstehen dann die Notwendigkeit, Module in Ihrer Anwendung zu haben.

Betrachten wir die Erstellung einer Datei mit dem Namen „DemoController.js“ und den folgenden Code zur Datei 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 zwei Variablen a und b durch, weisen die Addition dieser Variablen einer neuen Variablen c zu und weisen sie wieder dem Bereichsobjekt zu.

Jetzt erstellen wir unsere Hauptdatei Sample.html, die unsere Hauptanwendung sein wird. Fügen wir den folgenden Codeausschnitt in unsere HTML-Seite ein.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

Im obigen Code fügen wir unseren DemoController ein und rufen dann den Wert der Variablen $scope.c über einen Ausdruck auf.

Aber beachten Sie, dass unsere ng-app-Direktive einen leeren Wert hat.

  • Das bedeutet grundsätzlich, dass global auf alle Controller zugegriffen werden kann, die im Kontext der ng-app-Direktive aufgerufen werden. Es gibt keine Grenze, die mehrere Controller voneinander trennt.
  • In der modernen Programmierung ist es eine schlechte Praxis, Controller nicht an Module anzuschließen und sie global zugänglich zu machen. Für Controller muss eine logische Grenze definiert werden.

Und hier kommen Module ins Spiel. Module werden verwendet, um diese Trennung von Grenzen zu schaffen und dabei zu helfen, Controller basierend auf der Funktionalität zu trennen.

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

  1. 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 zwei 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.

  2. sampleApp.controller('DemoController', function($scope)

    Wir hängen den Controller nun an unser AngularJS-Modul „SampleApp“ an. Das heißt, wenn wir in unserem Haupt-HTML-Code nicht auf das Modul „sampleApp“ verweisen, können wir nicht auf die Funktionalität unseres Controllers verweisen.

Unser Haupt-HTML-Code sieht nicht wie unten gezeigt aus

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Beachten wir die wichtigsten Unterschiede zwischen dem oben geschriebenen Code und unserem vorherigen Code

<body ng-app="'sampleApp'">

In unserem Body-Tag,

  • Anstelle einer leeren ng-app-Direktive rufen wir jetzt das Modul „sampleApp“ auf.
  • Durch den Aufruf dieses Anwendungsmoduls können wir nun auf den Controller „DemoController“ und die im Demo-Controller vorhandene Funktionalität zugreifen.

Module und Controller in AngularJS

In Winkel.JSDas für die Entwicklung moderner Webanwendungen verwendete Muster besteht darin, mehrere Module und Controller zu erstellen, um mehrere Funktionsebenen logisch zu trennen.

Normalerweise werden Module in separaten Javascript Dateien, die sich von der Hauptanwendungsdatei unterscheiden würden.

Schauen wir uns ein Beispiel an, wie dies erreicht werden kann.

Im folgenden Beispiel

  • Wir erstellen eine Datei mit dem Namen Utilities.js, die zwei Module enthält, eines zum Ausführen der Additionsfunktion und das andere zum Ausführen der Subtraktionsfunktion.
  • Anschließend erstellen wir zwei separate Anwendungsdateien und greifen von jeder Anwendungsdatei auf die Dienstprogrammdatei zu.
  • In einer Anwendungsdatei greifen wir auf das Modul zur Addition und in der anderen auf das Modul zur Subtraktion zu.

Schritt 1) Definieren Sie den Code für die mehreren Module und Controller.

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 geschriebenen Code

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Es werden zwei separate Angular-Module erstellt, eines mit dem Namen „AdditionApp“ und das zweite mit dem Namen „SubtractionApp“.

  2. 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 DemoSubtractController. Jeder Controller verfügt über eine separate Logik für die Addition und Subtraktion von Zahlen.

Schritt 2) Erstellen Sie Ihre Hauptanwendungsdateien. Lassen Sie uns eine Datei namens ApplicationAddition.html erstellen und den folgenden Code hinzufügen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Beachten wir die wichtigsten Punkte im oben geschriebenen Code

  1. <script src="/lib/Utilities.js"></script>

    Wir verweisen auf unsere Utilities.js-Datei in unserer Hauptanwendungsdatei. Dadurch können wir auf alle in dieser Datei definierten AngularJS-Module verweisen.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Wir greifen auf das Modul „AdditionApp“ und DemoAddController zu, indem wir die Direktive „ng-app“ und die verwenden ng-Controller beziehungsweise.

  3. {{c}}

    Da wir auf das oben genannte Modul und den oben genannten 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 Controller „DemoAddController“ durchgeführt wurde

    Das Gleiche werden wir für die Subtraktionsfunktion tun.

Schritt 3) Erstellen Sie Ihre Hauptanwendungsdateien. Lassen Sie uns eine Datei namens „ApplicationSubtraction.html“ erstellen und den folgenden Code hinzufügen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Beachten wir die wichtigsten Punkte im oben geschriebenen Code

  1. <script src="/lib/Utilities.js"></script>

    Wir verweisen auf unsere Utilities.js-Datei in unserer Hauptanwendungsdatei. Dadurch können wir auf alle in dieser Datei definierten Module verweisen.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Wir greifen auf das SubtractionApp-Modul und den DemoSubtractController zu, indem wir die ng-app-Direktive bzw. den ng-controller verwenden.

  3. {{d}}

    Da wir auf das oben genannte Modul und den oben genannten 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 in durchgeführt wurde 'DemoSubtractController' Controller

Zusammenfassung

  • Ohne die Verwendung von AngularJS-Modulen haben Controller einen globalen Geltungsbereich, was zu schlechten Programmierpraktiken führt.
  • Module werden zur Trennung der Geschäftslogik verwendet. Es können mehrere Module erstellt werden, um diese verschiedenen Module logisch zu trennen.
  • Für jedes AngularJS-Modul kann ein eigener Satz von Controllern definiert und zugewiesen werden.
  • Bei der Definition von Modulen und Controllern werden diese normalerweise separat definiert JavaSkript Dateien. Diese JavaAuf Skriptdateien wird dann in der Hauptanwendungsdatei verwiesen.

Du magst vielleicht: