Beispiel für AngularJS-Controller mit ng-Controller

Was ist Controller in AngularJS?

A Controller In AngularJS empfängt der Controller die Daten von der View, verarbeitet sie und sendet sie anschließend an die View, die sie dem Endbenutzer anzeigt. Der Controller enthält die zentrale Geschäftslogik. Er verwendet das Datenmodell, führt die erforderliche Verarbeitung durch und übergibt das Ergebnis an die View.

⚠️ Versionshinweis: AngularJS (Version 1.x) hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht und erhält keine weiteren Sicherheitsupdates mehr. Die folgenden Konzepte gelten weiterhin für ältere Anwendungen; in modernen Angular-Versionen wird dieselbe Funktion von einer Komponentenklasse anstelle eines Controllers übernommen.

Das Wissen um die Funktionsweise eines Controllers lässt eine Frage offen: Wie genau kommuniziert er mit der Ansicht? Der nächste Abschnitt gibt darauf Antwort.

Was ein Controller aus der Perspektive von Angular macht

Nachfolgend eine einfache Definition der Funktionsweise eines AngularJS-Controllers:

• Die Hauptverantwortung des Controllers besteht darin, die Daten zu kontrollieren, die an die Ansicht übergeben werden. Der Umfang und die Ansicht verfügen über eine bidirektionale Kommunikation.
• Ansichtseigenschaften und -ereignisse können Funktionen des Gültigkeitsbereichs aufrufen. Der folgende Codeausschnitt zeigt dies. Funktion($scope) deklariert mit dem Controller plus einer internen Funktion, die zurückgibt $scope.firstName und $scope.lastName beigetreten. In AngularJSEine als Variable definierte Funktion ist eine Methode.

• Die Daten werden vom Controller an den Scope und dann wieder zurück zwischen Scope und View übertragen.
• Der Gültigkeitsbereich stellt das Modell der Ansicht zur Verfügung. Das Modell kann über Methoden, die im Gültigkeitsbereich definiert sind und durch Ereignisse der Ansicht ausgelöst werden, geändert werden.
• Controller sollten nicht zur Manipulation des DOM verwendet werden. Das ist die Aufgabe von … Richtlinien.
• Es empfiehlt sich, Controller auf Funktionalität zu basieren. Wenn Sie ein Eingabeformular haben, das einen Controller benötigt, erstellen Sie einen solchen mit dem Namen „Formular-Controller“.

Nachdem der Mechanismus verstanden wurde, wird im nächsten Abschnitt ein Controller aus einer leeren Seite erstellt.

So erstellen Sie einen Basiscontroller in AngularJS

Nachfolgend sind die Schritte zum Erstellen eines Controllers in AngularJS aufgeführt.

Schritt 1) ​​Erstellen Sie eine einfache HTML-Seite

Bevor ein Controller erstellt werden kann, muss die grundlegende HTML-Seite vorhanden sein. Der folgende Codeausschnitt zeigt eine einfache Seite mit dem Titel „Veranstaltungsregistrierung“, die auf … verweist. Bootstrap und AngularJS.

1. Verweise auf die Bootstrap CSS-Stylesheet, das zusammen mit dem Bootstrap Bibliothek.
2. Ein Verweis auf die AngularJS-Bibliothek. Alle weiteren Operationen mit AngularJS werden von dieser Datei aus aufgelöst.
3. Ein Bezug auf die Bootstrap Bibliothek, die bestimmte Steuerelemente reaktionsfähig macht.

⚠️ Korrektur: Die ursprüngliche Version lud jQuery und behauptete, AngularJS sei davon abhängig. Das stimmt nicht. AngularJS wird mit jqLite ausgeliefert, einer integrierten Teilmenge der jQuery-API, und greift nur dann auf die vollständige jQuery-Version zu, wenn jQuery geladen wird. bevor Der Verweis wurde entfernt.

Schritt 2) Überprüfen Sie die Dateien und die Dateistruktur

1. Die Dateien werden wie in jeder herkömmlichen Webanwendung in zwei Ordner aufgeteilt: „css“ für Stylesheets und „lib“ für … JavaSkript Dateien.
2. Die Datei bootstrap.css befindet sich im CSS-Ordner und verleiht der Website ihr Aussehen und ihre Benutzererfahrung.
3. angular.js ist die Hauptbibliothek, die von der AngularJS-Website heruntergeladen und im Verzeichnis lib gespeichert wird.
4. Die Datei app.js enthält den Code für die Controller.

Schritt 3) Verwenden Sie AngularJS-Code, um die Ausgabe anzuzeigen

Ziel ist es, die Wörter „AngularJS“ sowohl als Klartext als auch in einem Textfeld anzuzeigen, wenn die Seite im Browser geöffnet wird.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Erläuterung:

1. ng-app Dieses Element kennzeichnet es als Wurzel einer AngularJS-Anwendung. Attribute mit dem Präfix ng- sind integrierte Direktiven. „DemoApp“ ist der Name der Anwendung.
2. Die Division trägt ng-Controller mit dem Namen „DemoController“, wodurch dieses Element und alles darin enthaltene Zugriff auf den Controller-Bereich erhält.
3. ng-Modell erstellt die Modellbindung und verknüpft das Textfeld „Tutorialname“ mit der Bereichseigenschaft. tutorialName.
4. Das Modul DemoApp wird erstellt, und der Controller weist ihm den Standardwert „AngularJS“ zu. tutorialName.

⚠️ Korrekturen wurden vorgenommen. Die ursprüngliche Auflistung erklärte chrset="UTF 8", was weder ein gültiges Attribut noch ein gültiger Kodierungsname ist, und lud AngularJS zweimal – einmal vom CDN und einmal von lib/angular.jsDas zweimalige Laden der Bibliothek führt zu einer erneuten Registrierung des Modulsystems und damit zu unvorhersehbarem Verhalten. Die Abhängigkeitsarray-Annotation ['$scope', function($scope){…}] wurde ebenfalls hinzugefügt, ohne die der Controller in dem Moment, in dem die Datei minimiert wird, nicht mehr funktioniert.

Ausgang:

Parce que tutorialName Der Wert „AngularJS“ wurde zugewiesen und wird sowohl im Textfeld als auch in der Klartextzeile angezeigt. Für eine Demonstration genügt eine einzelne Eigenschaft; reale Controller zeigen üblicherweise auch ihr Verhalten an, was im nächsten Abschnitt behandelt wird.

So definieren Sie Methoden in AngularJS-Controllern

Normalerweise definiert man in einem Controller mehrere Methoden, um die Geschäftslogik zu trennen. Wenn der Controller beispielsweise zwei Zahlen addieren und subtrahieren müsste, …tracBei zwei Zahlen würde man für jede Operation eine eigene Methode erstellen.

Das folgende Beispiel definiert eine benutzerdefinierte Methode innerhalb eines AngularJS-Controllers, die einen String zurückgibt.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Erläuterung:

1. Eine Funktion wird dem Scope-Objekt als Mitglied zugeordnet. tNameEs gibt den aktuellen Wert zurück. tutorialName.
2. Die Ansicht ruft die Methode auf mit {{tName()}}Die Klammern sind wichtig: Ohne sie gibt der Ausdruck die Funktion selbst und nicht ihr Ergebnis aus.

⚠️ Korrektur: die ursprüngliche Methode lesen $scope.tName = function() { return $scope.tName; };Diese Funktion gibt sich selbst zurück, nicht den Namen des Tutorials, daher wurde der Funktionskörper anstelle von Text angezeigt. Sie gibt nun Folgendes zurück: $scope.tutorialName.

Ausgang:

Bisher befand sich alles in einer einzigen Datei. Produktionsanwendungen halten die Controller getrennt, was im nächsten Abschnitt erläutert wird.

AngularJS-Controller mit ng-Controller-Beispiel

Im obigen „HelloWorld“-Beispiel befand sich die gesamte Funktionalität in einer einzigen Datei. Nun ist es an der Zeit, den Controller-Code in eine eigene Datei auszulagern.

Schritt 1) Fügen Sie in der Datei app.js den folgenden Code für Ihren Controller hinzu.

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

Der obige Code macht folgendes:

1. Definiert ein Modul namens „app“, das den Controller enthält.
2. Erstellt einen Controller namens „HelloWorldCtrl“, der eine „Hello World“-Meldung anzeigt.
3. Verwendet das Scope-Objekt, um Informationen vom Controller an die Ansicht zu übergeben, in diesem Fall eine Variable namens message.

Schritt 2) Fügen Sie in Sample.html ein div-Element hinzu, das die ng-controller-Direktive und einen Verweis auf die Membervariable enthält. messageDenken Sie daran, auf app.js zu verweisen, da dort der Quellcode des Controllers enthalten ist.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Korrektur: app.js muss geladen werden nachdem angular.js, da es aufruft angular.moduleDas Original lud die Bibliothek ebenfalls zweimal und enthielt dieselben Daten. chrset Tippfehler.

Ausgang:

Bisherige Beispiele haben jeweils direkt Lese- und Schreibeigenschaften auf $scopeIm folgenden Abschnitt wird die Alternative beschrieben, die das AngularJS-Team stattdessen empfiehlt.

Wie man die controllerAs-Syntax in AngularJS verwendet

Direkte Bindung an $scope Das funktioniert, wird aber mehrdeutig, sobald Controller verschachtelt sind. Ein View-Ausdruck wie beispielsweise {{name}} gibt keinen Hinweis darauf, wem der Controller gehört. nameUnd da Kind-Scopes prototypisch von Eltern-Scopes erben, erstellt ein verschachtelter Controller, der in ein geerbtes Primitives schreibt, stillschweigend seine eigene Schattenkopie. controllerAs Die Syntax behebt beide Probleme, indem sie jedem Controller einen Alias ​​gibt.

Schritt 1) Verwenden Sie den Alias ​​für den Controller in der Ansicht. as Schlüsselwort, dann wird jedem Bindestrich der entsprechende Alias ​​vorangestellt.

Schritt 2) Innerhalb des Controllers können Eigenschaften angehängt werden this anstatt zu $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Daraus ergeben sich drei Vorteile. Bindungen werden selbstdokumentierend, weil demo.tutorialName Der Besitzer wird benannt. Verschachtelte Controller verursachen keine Konflikte mehr, da ein übergeordneter Controller einen Alias ​​erhält. outer und ein Kind mit Alias inner können beide aufdecken nameWerte werden auch über ein Objekt anstatt über einen einfachen primitiven Datentyp gebunden, umgehe den Schrittping Die Falle, bei der eine Änderung in einem Kindprozess niemals den Elternprozess erreicht.

💡 TIPP: Erfassung this in eine Variable wie z. B. vm Ganz oben im Controller. Innerhalb eines Callbacks. this bezieht sich auf etwas völlig anderes, und die erfasste Referenz sorgt dafür, dass die Bindung korrekt bleibt.

Die Wahl des Bindungsstils ist eine Entscheidung. Die Entscheidung, was überhaupt in einen Controller gehört, ist eine andere, und der folgende Vergleich verdeutlicht diese Trennlinie.

Controller vs. Service in AngularJS

Anfänger überlasten den Controller häufig mit Aufgaben, die eigentlich in einen Service gehören. Der Unterschied liegt in Lebensdauer und Wiederverwendbarkeit: Ein Controller existiert nur, solange seine Ansicht sichtbar ist, während ein Service ein Singleton ist, der für die gesamte Laufzeit der Anwendung existiert.

Halten Sie Ihre Controller schlank. Benötigen zwei Controller dieselbe Logik oder muss ein Wert auch nach dem Wechsel zwischen Ansichten erhalten bleiben, lagern Sie ihn in einen Service aus und injizieren Sie diesen Service an der benötigten Stelle. Ein praktischer Test besteht darin, zu prüfen, ob der Code auch bei geschlossenem Bildschirm noch verständlich ist. Ist dies der Fall, gehört er in einen Service.

Häufig gestellte Fragen