Beispiel für AngularJS-Controller mit ng-Controller

Was ist Controller in AngularJS?

A Controller in AngularJS nimmt die Daten aus der Ansicht, verarbeitet die Daten und sendet diese Daten dann an die Ansicht, die angezeigt wirdyed an den Endverbraucher. Der Controller verfügt über Ihre Kerngeschäftslogik. Der Controller verwendet das Datenmodell, führt die erforderliche Verarbeitung durch und leitet die Ausgabe dann an die Ansicht weiter, die wiederum angezeigt wirdyed an den Endverbraucher.

Was macht Controller aus Angulars Sicht?

Following ist 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.
    • Das 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 Anweisungen erfolgen, die wir sehen werden later auf.
  • Die beste Vorgehensweise besteht darin, Controller zu verwenden, die auf der Funktionalität basieren. Wenn Sie beispielsweise über ein Eingabeformular verfügen und dafür einen Controller benötigen, erstellen Sie einen Controller mit dem Namen „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 JavaScript 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 lediglich, die Wörter „AngularJS“ sowohl im Textformat als auch in einem Text anzuzeigen box wenn die Seite im Browser angezeigt wird. Sehen wir uns ein Beispiel für die Verwendung von angle.js an:

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. Das 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 mit der ng-model-Direktive. Dadurch wird der Text gebunden box Damit der Tutorial-Name an die Mitgliedsvariable „tutorialName“ gebunden wird.
  4. Wir erstellen eine Mitgliedsvariable namens „tutorialName“, die zur Anzeige der Informationen verwendet wird, die der Benutzer in den Text eingibt box für Tutorial-Name.
  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 Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Erstellen Sie einen Basiscontroller in AngularJS

Da wir der Variablen „tutorialName“ den Wert „Angular JS“ zugewiesen haben, wird dies angezeigtyed im Text box und in der Klartextzeile.

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 durch numbers
  2. Führen Sie die Subtraktion von 2 durch numbers

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 Folgendes angezeigt:wing Die Ausgabe wird 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 Folgendes hinzu:wing Code für Ihren Controller

AngularJS-Controller mit ng-Controller

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

Der obige Code führt Folgendes auswing Dinge:

  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 wird, wird folgendes angezeigt:wing Die Ausgabe wird 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.