Beispiel für AngularJS-Controller mit ng-Controller

Was ist Controller in AngularJS?

A Controller in AngularJS nimmt die Daten aus der Ansicht, verarbeitet sie und sendet sie dann an die Ansicht, die dem Endbenutzer angezeigt wird. Der Controller enthält Ihre zentrale Geschäftslogik. Der Controller verwendet das Datenmodell, führt die erforderliche Verarbeitung durch und übergibt die Ausgabe dann an die Ansicht, die wiederum dem Endbenutzer angezeigt wird.

Was macht Controller aus Angulars Sicht?

Nachfolgend finden Sie eine einfache Definition der Funktionsweise des AngularJS-Controllers:

Funktionsweise des AngularJS-Controllers
Funktionsweise des 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.
  • Die Eigenschaften der Ansicht können „Funktionen“ im Bereich aufrufen. Darüber hinaus können Ereignisse in der Ansicht „Methoden“ im Bereich aufrufen. Der folgende Codeausschnitt zeigt ein einfaches Beispiel einer Funktion.
    • Die Funktion($scope) die beim Definieren des Controllers definiert wird, und eine interne Funktion, die verwendet wird, um die Verkettung von $scope.firstName und $scope.lastName zurückzugeben.
    • In AngularJSWenn Sie eine Funktion als Variable definieren, wird sie als Methode bezeichnet.

Funktionsweise des AngularJS-Controllers

  • Auf diese Weise werden Daten vom Controller zum Bereich übertragen, und dann werden die Daten vom Bereich zur Ansicht hin und her übertragen.
  • Der Bereich wird verwendet, um das Modell für die Ansicht verfügbar zu machen. Das Modell kann über im Bereich definierte Methoden geändert werden, die über Ereignisse aus der Ansicht ausgelöst werden können. Wir können eine bidirektionale Modellbindung vom Bereich zum Modell definieren.
  • Controller sollten idealerweise nicht zur Manipulation des DOM verwendet werden. Dies sollte durch die Direktiven erfolgen, die wir später sehen werden.
  • Die beste Vorgehensweise besteht darin, Controller basierend auf der Funktionalität zu haben. Wenn Sie beispielsweise ein Formular zur Eingabe haben und dafür einen Controller benötigen, erstellen Sie einen Controller namens „Formular-Controller“.

So erstellen Sie einen Basiscontroller in AngularJS

Nachfolgend finden Sie die Schritte zum Erstellen eines Controllers in AngularJS:

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

Bevor wir mit der Erstellung eines Controllers beginnen, müssen wir zunächst unsere grundlegende HTML-Seite einrichten.

Der folgende Codeausschnitt ist eine einfache HTML-Seite mit dem Titel „Event Registration“ und Verweisen auf wichtige Bibliotheken wie Bootstrap, jQuery und Angular.

Erstellen Sie einen Basiscontroller in AngularJS

  1. Wir fügen Verweise auf die Bootstrap-CSS-Stylesheets hinzu, die in Verbindung mit den Bootstrap-Bibliotheken verwendet werden.
  2. Wir fügen Verweise auf die AngularJS-Bibliotheken hinzu. Alles, was wir nun mit angle.js tun, wird also von dieser Bibliothek aus referenziert.
  3. Wir fügen Verweise auf die Bootstrap-Bibliothek hinzu, um unsere Webseite für bestimmte Steuerelemente reaktionsfähiger zu machen.
  4. Wir haben Verweise auf JQuery-Bibliotheken hinzugefügt, die für die DOM-Manipulation verwendet werden. Dies ist für Angular erforderlich, da einige der Funktionen in Angular von dieser Bibliothek abhängig sind.

Standardmäßig ist der obige Codeausschnitt in allen unseren Beispielen vorhanden, sodass wir in den folgenden Abschnitten nur den spezifischen AngularJS-Code zeigen können.

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

Schauen wir uns zweitens unsere Dateien und die Dateistruktur an, mit denen wir für die Dauer unseres Kurses beginnen werden.

Erstellen Sie einen Basiscontroller in AngularJS

  1. Zuerst trennen wir unsere Dateien in zwei Ordner, wie es bei jeder herkömmlichen Webanwendung der Fall ist. Wir haben den Ordner „CSS“. Es wird alle unsere Cascading Style Sheet-Dateien enthalten, und dann haben wir unseren „lib“-Ordner, der alle unsere Dateien enthält JavaSkript Dateien.
  2. Die Datei „bootstrap.css“ wird im CSS-Ordner abgelegt und dient dazu, unserer Website ein ansprechendes Erscheinungsbild zu verleihen.
  3. Angular.js ist unsere Hauptdatei, die von der AngularJS-Site heruntergeladen und in unserem lib-Ordner gespeichert wurde.
  4. Die Datei app.js enthält unseren Code für die Controller.
  5. Die Datei „bootstrap.js“ wird als Ergänzung zur Datei „bootstrap.cs“ verwendet, um unserer Webanwendung Bootstrap-Funktionalität hinzuzufügen.
  6. Die JQuery-Datei wird verwendet, um unserer Website DOM-Manipulationsfunktionen hinzuzufügen.

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

Was wir hier tun möchten, ist, die Wörter „AngularJS“ sowohl im Textformat als auch in einem Textfeld anzuzeigen, wenn die Seite im Browser angezeigt wird. Sehen wir uns ein Beispiel an, wie Sie dafür angular.js verwenden können:

Erstellen Sie einen Basiscontroller in AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Code-Erklärung:

  1. Die ng-app Das Schlüsselwort wird verwendet, um anzugeben, dass diese Anwendung als Angular-Anwendung betrachtet werden sollte. Alles, was mit dem Präfix beginnt 'ng' ist bekannt als Richtlinien. „DemoApp“ ist der Name unserer Angular.JS-Anwendung.
  2. Wir haben ein div-Tag erstellt und in diesem Tag eine ng-controller-Direktive zusammen mit dem Namen unseres Controllers „DemoController“ hinzugefügt. Dadurch erhält unser div-Tag grundsätzlich die Möglichkeit, auf den Inhalt des Demo-Controllers zuzugreifen. Sie müssen den Namen des Controllers in der Richtlinie angeben, um sicherzustellen, dass Sie auf die im Controller definierten Funktionen zugreifen können.
  3. Wir erstellen eine Modellbindung mithilfe der ng-model-Direktive. Dadurch wird das Textfeld für den Tutorial-Namen an die Mitgliedsvariable „tutorialName“ gebunden.
  4. Wir erstellen eine Mitgliedsvariable namens „tutorialName“, die verwendet wird, um die Informationen anzuzeigen, die der Benutzer in das Textfeld für den Tutorial-Namen eingibt.
  5. Wir erstellen ein Modul, das an unsere DemoApp-Anwendung angehängt wird. Somit wird dieses Modul nun Teil unserer Anwendung.
  6. Im Modul definieren wir eine Funktion, die unserer Variable „tutorialName“ den Standardwert „AngularJS“ zuweist.

Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Erstellen Sie einen Basiscontroller in AngularJS

Da wir der Variable „tutorialName“ den Wert „Angular JS“ zugewiesen haben, wird dieser im Textfeld und in der Nur-Text-Zeile angezeigt.

So definieren Sie Methoden in AngularJS-Controllern

Normalerweise möchte man im Controller mehrere Methoden definieren, um die Geschäftslogik zu trennen.

Angenommen, Sie möchten, dass Ihr Controller zwei grundlegende Aufgaben erledigt:

  1. Führen Sie die Addition von 2 Zahlen durch
  2. Führen Sie die Subtraktion von 2 Zahlen durch

Idealerweise erstellen Sie dann zwei Methoden in Ihrem Controller, eine für die Addition und eine für die Subtraktion.

Sehen wir uns ein einfaches Beispiel an, wie Sie benutzerdefinierte Methoden innerhalb eines Angular.JS-Controllers definieren können. Der Controller gibt einfach eine Zeichenfolge zurück.

Definieren Sie Methoden in AngularJS-Controllern

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Code-Erklärung:

  1. Hier definieren wir lediglich eine Funktion, die eine Zeichenfolge „AngularJS“ zurückgibt. Die Funktion wird über eine Mitgliedsvariable namens „tutorialName“ an das Bereichsobjekt angehängt.
  2. Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Definieren Sie Methoden in AngularJS-Controllern

AngularJS-Controller mit ng-Controller-Beispiel

Schauen wir uns ein Beispiel von „HelloWorld“ an, bei dem die gesamte Funktionalität in einer einzigen Datei untergebracht wurde. Jetzt ist es an der Zeit, den Code für den Controller in separaten Dateien abzulegen.

Befolgen Sie dazu die folgenden Schritte:

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

AngularJS-Controller mit ng-Controller

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

Der obige Code bewirkt Folgendes:

  1. Definieren Sie ein Modul namens „App“, das den Controller zusammen mit der Controller-Funktionalität enthält.
  2. Erstellen Sie einen Controller mit dem Namen „HelloWorldCtrl“. Dieser Controller wird verwendet, um eine Funktion zum Anzeigen einer „Hallo Welt“-Nachricht bereitzustellen.
  3. Das Scope-Objekt wird verwendet, um Informationen vom Controller an die Ansicht zu übergeben. In unserem Fall wird das Scope-Objekt also verwendet, um eine Variable namens „message“ zu speichern.
  4. Wir definieren die Variable message und weisen ihr den Wert „Hello World“ zu.

Schritt 2) Fügen Sie nun in Ihrer Sample.html-Datei eine div-Klasse hinzu, die die ng-controller-Direktive enthält, und fügen Sie dann einen Verweis auf die Mitgliedsvariable „message“ hinzu.

Vergessen Sie auch nicht, einen Verweis auf die Skriptdatei app.js hinzuzufügen, die den Quellcode für Ihren Controller enthält.

AngularJS-Controller mit ng-Controller

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Wenn der obige Code korrekt eingegeben wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

AngularJS-Controller mit ng-Controller

Zusammenfassung

  • Die Hauptaufgabe des Controllers besteht darin, ein Bereichsobjekt zu erstellen, das wiederum an die Ansicht übergeben wird
  • So erstellen Sie einen einfachen Controller mit den Anweisungen ng-app, ng-controller und ng-model
  • So fügen Sie einem Controller benutzerdefinierte Methoden hinzu, mit denen verschiedene Funktionen innerhalb eines AngularJS-Moduls getrennt werden können.
  • Controller können in externen Dateien definiert werden, um diese Ebene von der Ansichtsebene zu trennen. Dies ist normalerweise eine bewährte Vorgehensweise beim Erstellen von Webanwendungen.