Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Direktiven: Ein Anfängerleitfaden

Hallo da draußen, zukünftige AngularJS-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der AngularJS-Direktiven. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und tauchen wir ein!

AngularJS - Directives

Was sind Direktiven?

Bevor wir loslegen, lassen Sie uns verstehen, was Direktiven sind. Stellen Sie sich Direktiven als spezielle Anweisungen vor, die wir HTML geben. Sie sind wie magische Sprüche, die unsere Webseiten mit dynamischen Inhalten und Verhaltensweisen zum Leben erwecken. Cool, oder?

Nun, lassen Sie uns einige der am häufigsten verwendeten Direktiven in AngularJS erkunden.

ng-app Direktive

Die ng-app Direktive ist wie das Fundament unseres AngularJS-Hauses. Sie sagt AngularJS, "Hey, hier beginnt meine Anwendung!"

Beispiel:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Willkommen in meiner AngularJS-App!</p>
</body>
</html>

In diesem Beispiel haben wir ng-app zum <body>-Tag hinzugefügt. Dies tells AngularJS, dass alles innerhalb des <body> Teil unserer AngularJS-Anwendung ist.

ng-init Direktive

Die ng-init Direktive ist wie ein Zauberhut – sie lässt uns Variablen direkt in unserem HTML initialisieren. Sie ist großartig für einfache Demos, aber in realen Anwendungen initialisieren wir Daten normalerweise in einem Controller.

Beispiel:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p>Der Name ist {{ firstName + " " + lastName }}</p>
</div>

Hier verwenden wir ng-init, um Werte für firstName und lastName zu setzen. Dann显示 diese Werte mit AngularJS-Ausdrücken (diese doppelten eckigen Klammern).

ng-model Direktive

Die ng-model Direktive ist wie eine zweispurige Straße zwischen Ihrem HTML und Ihren Anwendungsdaten. Sie kann:

  1. Ein Eingabefeld, eine Auswahlliste oder ein Textbereich mit einer Eigenschaft im Bereich verknüpfen
  2. Typvalidierung für Anwendungsdaten bereitstellen
  3. CSS-Klassen für das Element festlegen
  4. HTML-Elemente an Formularvalidierung binden

Beispiel:

<div ng-app>
<input type="text" ng-model="name">
<p>Hallo, {{ name }}!</p>
</div>

In diesem Beispiel erscheint alles, was Sie in das Eingabefeld tippen, sofort nach "Hallo," im folgenden Absatz. Es ist wie Magie, aber es ist nur die Kraft von ng-model!

ng-repeat Direktive

Die ng-repeat Direktive ist wie ein Fotokopierer für HTML-Elemente. Sie kann einen Satz HTML-Elemente für jedes Element in einem Array wiederholen. Sie ist super nützlich zum dynamischen Erstellen von Listen oder Tabellen.

Beispiel:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Dies erstellt eine Früchteleiste. Die ng-repeat Direktive wird das <li>-Element für jede Frucht in unserem Array wiederholen.

Ein umfassendes Beispiel

Nun, lassen Sie uns all dies in einem komplexeren Beispiel zusammenführen:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Studentenpunktekonto</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Nota</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Neuen Studenten hinzufügen</h3>
<form>
Name: <input type="text" ng-model="newName"><br>
Note: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Student hinzufügen</button>
</form>
</body>
</html>

Lassen Sie uns das auseinandernehmen:

  1. Wir beginnen mit ng-app im <body>-Tag, um unsere AngularJS-Anwendung zu initialisieren.
  2. Wir verwenden ng-init, um ein初始数组 von Studenten zu erstellen.
  3. Wir verwenden ng-repeat, um Tabellenzeilen für jeden Studenten zu erstellen.
  4. Wir verwenden ng-model, um Eingabefelder mit Variablen zu verknüpfen.
  5. Wir verwenden ng-click (eine neue Direktive!), um einen neuen Studenten zu unserem Array hinzuzufügen, wenn der Knopf geklickt wird.

Dieses Beispiel zeigt, wie diese Direktiven zusammenarbeiten, um eine dynamische, interaktive Webanwendung zu erstellen. Sie können neue Studenten hinzufügen, und sie erscheinen sofort in der Tabelle!

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der AngularJS-Direktiven gemacht. Wir haben die Basics von ng-app, ng-init, ng-model und ng-repeat behandelt. Dies sind nur einige der vielen Direktiven, die AngularJS bietet, aber sie sind ein großartiger Ausgangspunkt.

Denken Sie daran, das Lernen von Programmieren ist wie das Lernen einer neuen Sprache. Es dauert Zeit und Übung, aber bevor Sie es wissen, werden Sie AngularJS fließend sprechen! Machen Sie weiter mit dem Experimentieren mit diesen Direktiven, probieren Sie sie in verschiedenen Kombinationen aus und vor allem: haben Sie Spaß!

Frohes Coden, zukünftige AngularJS-Meister!

Direktive Zweck
ng-app Initialisiert eine AngularJS-Anwendung
ng-init Initialisiert Anwendungsdaten
ng-model Verknüpft HTML-Steuerelemente mit Anwendungsdaten
ng-repeat Wiederholt HTML-Elemente für jedes Element in einer Sammlung
ng-click Gibt eine benutzerdefinierte Aktion an, wenn ein Element geklickt wird

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Erste Anwendung
Nächstes Tutorial:
AngularJS - Ausdrücke