Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Bootstrap-Anwendung

Hallo, angehende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von AngularJS und lernen, wie man eine Anwendung bootstrapt. Als Ihr freundlicher Nachbarschaftsinformatiklehrer werde ich Sie durch diesen Prozess Schritt für Schritt führen und sicherstellen, dass Sie jeden Teil des Codes verstehen, den wir schreiben. Also holen Sie sich Ihr lieblingsGetränk, machen Sie es sich gemütlich und tauchen wir ein!

AngularJS - Bootstrap Application

Was ist AngularJS?

Bevor wir mit dem Bootstrappen unserer Anwendung beginnen, lassen Sie uns einen Moment darauf verwenden, zu verstehen, was AngularJS ist. AngularJS ist ein leistungsstarkes JavaScript-Framework, das uns hilft, dynamische Webanwendungen zu erstellen. Es ist wie ein Schweizer Army-Messer für Webentwickler, das Werkzeuge bietet, um unser Leben einfacher und unseren Code organisierter zu gestalten.

Denken Sie an AngularJS als hilfreichen Assistenten, der Ihren Code organisiert und es einfacher macht, interaktive Websites zu erstellen. Es ist wie ein superkluger Freund, der Ihnen hilft, großartige Dinge zu bauen!

Bootstrapping einer AngularJS-Anwendung

Nun, kommen wir zu dem aufregenden Teil - dem Bootstrappen unserer AngularJS-Anwendung. Bootstrapping ist nur ein schicker Ausdruck für "starten" oder "initialisieren" unserer Anwendung. Es ist wie das Drehen des Schlüssels im Zündschloss Ihres Autos - es bringt alles in Gang!

Schritt 1: Einrichten der HTML-Datei

Zuerst müssen wir eine HTML-Datei erstellen, die als Grundlage für unsere AngularJS-Anwendung dient. Nennen wir sie index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine erste AngularJS-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Willkommen in meiner AngularJS-App!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Lassen Sie uns das einmal auseinandernehmen:

  1. Das ng-app="myApp"-Attribut im <html>-Tag tells AngularJS, dass dies das root-Element unserer Anwendung ist.
  2. Wir includieren die AngularJS-Bibliothek mit einem <script>-Tag.
  3. Wir haben ein <div> mit ng-controller="MainController". Dies wird der Ort sein, an dem wir unsere dynamischen Inhalte anzeigen.
  4. Das {{ message }} ist ein Platzhalter für Daten, die wir in unserem JavaScript definieren werden.
  5. Wir verlinken zu unserer app.js-Datei, die wir als nächstes erstellen.

Schritt 2: Erstellen der JavaScript-Datei

Nun erstellen wir unsere app.js-Datei:

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.message = "Hallo, AngularJS-Welt!";
});

Hier ist, was passiert:

  1. Wir erstellen ein Angular-Modul namens 'myApp' mit angular.module('myApp', []).
  2. Wir definieren einen Controller namens 'MainController' mit app.controller().
  3. Innerhalb des Controllers setzen wir $scope.message auf unsere Begrüßung. Dies wird in unserem HTML angezeigt, wo wir {{ message }} haben.

Verständnis der Magie

Nun könnte sich der eine oder andere fragen, "Wie funktioniert das alles zusammen?" Tolle Frage! Lassen Sie mich das erklären:

  1. Wenn die Seite lädt, sucht AngularJS nach der ng-app-Direktive. Dies tells AngularJS, wo es seine Magie anwenden soll.
  2. Es sucht dann nach dem Modul, das wir definiert haben (myApp) und initialisiert es.
  3. Als nächstes findet es die ng-controller-Direktive und verbindet sie mit unserem MainController.
  4. Der Controller setzt die message auf dem $scope, was wie ein Bote zwischen unserem JavaScript und HTML ist.
  5. Schließlich ersetzt AngularJS {{ message }} in unserem HTML mit der tatsächlichen Nachricht, die wir definiert haben.

Es ist wie ein gut choreographierter Tanz, bei dem jede Rolle ihre Rolle perfekt spielt!

Erweitern unserer Anwendung

Nun, da wir die Grundlagen draufhaben, fügen wir unserer App ein bisschen mehr Funktionalität hinzu. Wir erstellen eine einfache To-Do-Liste:

Aktualisieren Sie Ihre index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine AngularJS To-Do-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Meine To-Do-Liste</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Aufgabe hinzufügen</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

Und aktualisieren Sie Ihre app.js:

var app = angular.module('myApp', []);

app.controller('TodoController', function($scope) {
$scope.tasks = ['Lerne AngularJS', 'Baue eine App'];

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

Lassen Sie uns das Neue auseinandernehmen:

  1. Wir haben ein Eingabefeld mit ng-model="newTask". Dies erstellt eine bidirektionale Bindung zwischen der Eingabe und $scope.newTask.
  2. Das ng-click="addTask()" auf dem Button tells AngularJS, die addTask()-Funktion aufzurufen, wenn er geklickt wird.
  3. ng-repeat="task in tasks" erstellt einen Listenpunkt für jede Aufgabe in unserem Aufgabenarray.
  4. In unserem JavaScript initialisieren wir $scope.tasks mit zwei Aufgaben.
  5. Die addTask()-Funktion fügt die neue Aufgabe zur Liste hinzu und löscht das Eingabefeld.

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre erste AngularJS-Anwendung bootstrapt und ihr sogar ein bisschen Funktionalität hinzugefügt. Denken Sie daran, das Lernen von Code ist wie das Lernen einer neuen Sprache - es erfordert Übung und Geduld. Aber mit jedem Schritt werden Sie fließender in der Sprache der Webentwicklung.

Als wir uns verabschieden, hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven zusammenfasst, die wir verwendet haben:

Direktive Zweck
ng-app Definiert das root-Element einer AngularJS-Anwendung
ng-controller Gibt an, welchen Controller für das HTML-Element zu verwenden
ng-model Erzeugt eine bidirektionale Datenbindung
ng-click Gibt an, welche Funktion bei einem Klick auf das Element aufgerufen werden soll
ng-repeat Wiederholt einen HTML-Abschnitt für jedes Element in einem Array

Weitersuchen, weitercodieren und vor allem: Spaß haben! Die Welt der Webentwicklung ist riesig und spannend, und Sie haben gerade Ihre ersten Schritte getan. Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Notizzettel-Anwendung
Nächstes Tutorial:
AngularJS - Anmeldeanwendung