AngularJS-Module

By: James Hartmann James Hartmann
Hours Aktualisiert

⚡ Intelligente Zusammenfassung

Module in AngularJS fungieren als Container, die Controller, Services, Direktiven und Filter hinter einer logischen Grenze gruppieren, sodass die ng-app-Direktive zur Laufzeit nur die Funktionalität lädt, die eine einzelne Seite tatsächlich benötigt.

  • 🔘 Definition: angular.module registriert und ruft alle Komponenten ab, die eine Anwendung verwendet.
  • ☑️ Schaffung: Ein Abhängigkeitsarray erzeugt ein Modul; wird es weggelassen, wird ein vorhandenes Modul abgerufen.
  • ✅ Bootstrapping: ng-app benennt das Modul, das Angular für diese Region lädt.
  • 🧪 Trennung: Modulbezogene Controller vermeiden globale Namen und Konflikte zwischen Controllern.
  • 📊 Versionshinweis: Die Unterstützung für AngularJS wurde im Januar 2022 eingestellt; Angular bevorzugt eigenständige Komponenten.
MEHR LESEN

AngularJS-Modulgruppeping Controller, Services, Direktiven und Filter unter einer ng-app-Grenze

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 beispielsweise Dienste, Richtlinienund Filter, und zwar so, dass sie leicht in verschiedenen Anwendungen wiederverwendet werden können.

Die obige Abbildung fasst diese Grenze zusammen.

In all unseren früheren TutorialsSie hätten sicherlich die ng-app-Direktive bemerkt, mit der Ihre Angular-Hauptanwendung definiert wird. Dies ist eines der Schlüsselkonzepte von Modulen in AngularJS.

⚠️ Versionshinweis: Die Unterstützung für AngularJS wurde im Januar 2022 eingestellt.. Modern Angular Es verwendet @NgModule, und eigenständige Komponenten sind die Standardeinstellung. Der folgende Code ist historisch.

So erstellen Sie ein Modul in AngularJS

Bevor wir uns damit befassen, was ein Modul ist, sehen wir uns ein Beispiel an. AngularJS-Anwendung ohne ein Modul und dann die Notwendigkeit von Modulen in Ihrer Anwendung verstehen.

Nehmen wir an, wir erstellen eine Datei namens „DemoController.js“ und fügen den folgenden Code in die Datei ein.

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 addieren wir lediglich zwei Variablen a und b, speichern die Summe dieser Werte in einer neuen Variablen c und weisen diese dann wieder der ursprünglichen Variable zu. kann Objekt.

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 binden nun den Controller an unser AngularJS-Modul „sampleApp“ an. Das bedeutet, dass wir die Funktionalität unseres Controllers nicht nutzen können, wenn wir das Modul „sampleApp“ nicht in unserem Haupt-HTML-Code referenzieren.

Zuspieler gegen Abnehmer: winklig.modul erstellt ein Modul nur dann, wenn Abhängigkeit Ein Array wird übergeben; ohne dieses ruft der Aufruf ein bereits vorhandenes Modul ab.

Unser Haupt-HTML-Code sieht nun wie folgt 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 AngularJS, das für die Entwicklung verwendete Musterping Moderne Webanwendungen bestehen darin, mehrere Module und Controller zu erstellen, um verschiedene Funktionsebenen logisch zu trennen.

Normalerweise werden Module in separaten JavaSkript 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 namens Utilities.js, die zwei Module enthält: eines für die Additionsfunktion und das andere für die Subtraktionsfunktion.traction.
  • Anschließend erstellen wir zwei separate Anwendungsdateien und greifen von jeder Anwendungsdatei auf die Dienstprogrammdatei zu.
  • In der einen Anwendungsdatei greifen wir auf das Modul für die Addition zu, in der anderen auf das Modul für die Subtraktion.traction.

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 wurden zwei separate AngularJS-Module erstellt, eines mit dem Namen „AdditionApp“ und das zweite mit dem Namen „Sub“.tractionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Für jedes Modul sind zwei separate Controller definiert: der DemoAddController und der DemoSub.tractController. Jeder Controller verfügt über eine separate Logik für Addition und Subtraktion.traction 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>

ÄHNLICHE ARTIKEL

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

    Dasselbe werden wir auch für Unterstufen tun.tractionsfunktion.

Schritt 3) Erstellen Sie Ihre Hauptanwendungsdateien. Erstellen wir eine Datei namens „ApplicationSub“.traction.html” und fügen Sie den folgenden Code hinzu

<!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 „Sub“ zu.tractionApp'-Modul und DemoSubtractController durch Verwendung der ng-app-Direktive bzw. des ng-controllers.

  3. {{d}}

    Da wir auf das oben genannte Modul und den Controller verweisen, können wir die Variable `$scope.d` über einen Ausdruck referenzieren. Der Ausdruck ist das Ergebnis der Subroutine.traction der 2 Bereichsvariablen a und b, die in der 'DemoSub' durchgeführt wurdetractController' Controller

Häufig gestellte Fragen

Durch die Angabe des Arrays wird ein Modul erstellt. Wird es weggelassen, wird das registrierte Modul abgerufen, sodass mehrere Dateien ein einziges Modul erweitern. Injektion Namespace.

Nein. AngularJS initialisiert nur das erste gefundene ng-app-Element; weitere Module benötigen einen manuellen Aufruf von angular.bootstrap für ihr jeweiliges Element.

Die Funktion `config()` wird während der Registrierung von Providern ausgeführt, daher werden dort nur Provider und Konstanten injiziert. Die Funktion `run()` wird ausgeführt, sobald der Injector bereit ist.

Der Wert von ng-app stimmt mit keinem registrierten Modul überein. Dies kann durch Tippfehler, in Anführungszeichen gesetzte Namen oder das Laden der Moduldatei nach AngularJS verursacht werden.

Laden Sie es über angular.mock.module und lösen Sie dann Controller mit inject() auf. Die Browserabdeckung steuert die Seite, historisch gesehen mit ProtracDo..

@NgModule In Angular 2 wurde dies übernommen, und eigenständige Komponenten sind jetzt Standard und deklarieren Abhängigkeiten über ihr eigenes Imports-Array.

Tools für maschinelles Lernen lesen jeden Aufruf von angular.module, erstellen einen Abhängigkeitsgraphen und ordnen die Module nach Migrationsrisiko. RevDie Leser überprüfen jeden Richtlinien Karteping.

GitHub-Copilot Ähnliche agentenbasierte Assistenten erzeugen Modul-, Controller- und Dateigerüste über eine einzige Eingabeaufforderung. Der generierte Code muss überprüft werden.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: