AngularJS - Controller: Ein Anfängerleitfaden

Hallo, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der AngularJS-Controller ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide auf dieser Reise sein und alles Schritt für Schritt erklären. Also, holen Sie sich eine Tasse Kaffee und los geht's!

AngularJS - Controllers

Was sind AngularJS-Controller?

Bevor wir ins Code-Tauchen gehen, lassen Sie uns verstehen, was Controller in AngularJS sind. Stellen Sie sich Controller als das Gehirn Ihrer Anwendung vor. Sie sind verantwortlich für das Management der Daten und das Verhalten Ihrer Webseite. Genau wie ein Verkehrsleiter den Fahrzeugfluss manages, managen AngularJS-Controller den Datenfluss in Ihrer Anwendung.

Die Rolle von Controllern

Controller in AngularJS erfüllen mehrere wichtige Aufgaben:

Sie initialisieren die Daten des $scope-Objekts.
Sie fügen Verhalten zum $scope-Objekt hinzu.
Sie agieren als Brücke zwischen der Ansicht (was der Benutzer sieht) und dem Modell (die Daten).

Nun sehen wir, wie wir Controller in AngularJS erstellen und verwenden können.

Dein erster AngularJS-Controller

Lassen Sie mit einem einfachen Beispiel anfangen, um unsere Füße nass zu machen.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title Mein Erster AngularJS-Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ begrüßung }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.greeting = "Hallo, AngularJS!";
});
</script>
</body>
</html>

Lassen Sie uns das auseinandernehmen:

Wir definieren eine AngularJS-Anwendung mit ng-app="myApp".
Wir erstellen einen Controller namens MyFirstController mit ng-controller.
In unserem JavaScript definieren wir den Controller und setzen eine greeting-Eigenschaft auf dem $scope.
In unserem HTML verwenden wir {{ greeting }}, um den Wert von greeting anzuzeigen.

Wenn Sie diesen Code ausführen, sehen Sie "Hallo, AngularJS!" auf der Seite angezeigt. Aufregend, oder?

Verhalten zu Controllern hinzufügen

Controller sind nicht nur zum Anzeigen von Daten da; sie können auch Verhalten zu Ihrer Anwendung hinzufügen. Lassen Sie uns ein interaktiveres Beispiel erstellen:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Interaktiver AngularJS-Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Zähler: {{ count }}</h2>
<button ng-click="increment()">Erhöhen</button>
<button ng-click="decrement()">Verringern</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

In diesem Beispiel:

Wir erstellen einen CounterController, der eine count-Variable auf 0 initialisiert.
Wir definieren zwei Funktionen: increment() und decrement().
Wir verwenden ng-click, um diese Funktionen an Klicks auf Buttons zu binden.

Jetzt erhöht sich der Zähler, wenn Sie auf die "Erhöhen"-Schaltfläche klicken, und verringert sich, wenn Sie auf "Verringern" klicken. Es ist wie ein kleiner Taschenrechner direkt auf Ihrer Webseite!

Arbeiten mit Formularen

Controller sind besonders nützlich beim Arbeiten mit Formularen. Lassen Sie uns ein einfaches Formular erstellen, das den Benutzer begrüßt:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Formular-Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="Geben Sie Ihren Namen ein">
<button type="submit">Begrüße mich!</button>
</form>
<h2>{{ begrüßung }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';

$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Hallo, ' + $scope.name + '!';
} else {
$scope.greeting = 'Bitte geben Sie einen Namen ein.';
}
};
});
</script>
</body>
</html>

Hier ist, was passiert:

Wir verwenden ng-model="name", um das Eingabefeld an die name-Eigenschaft in unserem Controller zu binden.
Die greet()-Funktion wird aufgerufen, wenn das Formular submitted wird.
Wenn ein Name eingegeben wird, erstellen wir eine personalisierte Begrüßung. Andernfalls bitten wir um einen Namen.

Dieses Beispiel zeigt, wie Controller Benutzereingaben verarbeiten und die Ansicht entsprechend aktualisieren können.

Controller-Methoden

Lassen Sie uns die Hauptmethoden zusammenfassen, die wir in unseren Controllern verwendet haben:

Methode	Beschreibung
`$scope.variableName`	Wird verwendet, um Variablen zu definieren, die in der Ansicht zugänglich sind
`$scope.functionName = function() {...}`	Wird verwendet, um Funktionen zu definieren, die von der Ansicht aufgerufen werden können
`ng-click="functionName()"`	Wird im HTML verwendet, um eine Funktion aufzurufen, wenn ein Element geklickt wird
`ng-model="variableName"`	Wird verwendet, um ein Eingabefeld an eine Variable im Controller zu binden
`ng-submit="functionName()"`	Wird verwendet, um eine Funktion aufzurufen, wenn ein Formular submitted wird

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der AngularJS-Controller unternommen. Wir haben die Grundlagen der Controller-Erstellung, das Hinzufügen von Verhalten und das Arbeiten mit Formularen behandelt. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Konzepte auszuprobieren.

In meinen Jahren des Unterrichtens habe ich festgestellt, dass der beste Weg zum Lernen das Tun ist. Daher hier eine lustige Herausforderung für Sie: Versuchen Sie, eine einfache To-Do-Liste-Anwendung mit dem, was Sie über Controller gelernt haben, zu erstellen. Beginnen Sie mit dem Hinzufügen von Elementen und versuchen Sie dann, Funktionen wie das Markieren von Elementen als erledigt oder das Löschen von Elementen hinzuzufügen.

Während Sie Ihre AngularJS-Reise fortsetzen, werden Sie feststellen, dass Controller nur die Spitze des Eisbergs sind. Es gibt so viel mehr zu entdecken, von Services über Direktiven bis hin zu vielen anderen Konzepten. Aber für jetzt, gratulieren Sie sich selbst – Sie sind auf dem besten Weg, ein AngularJS-Experte zu werden!

Frohes Coden und denken Sie daran: In der Welt der Programmierung ist jeder Fehler eine Gelegenheit, etwas Neues zu lernen!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Ausdrücke

Nächstes Tutorial:

AngularJS - Filter