Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Erste Anwendung

Willkommen, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von AngularJS. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich durch deine erste AngularJS-Anwendung zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir gehen schritt für schritt vor, und bevor du es weißt, wirst du dynamische Webanwendungen wie ein Profi erstellen!

AngularJS - First Application

Erstellung einer AngularJS-Anwendung

Lassen Sie mit den Grundlagen beginnen. AngularJS ist ein leistungsstarkes JavaScript-Framework, das uns dabei hilft, interaktive Webanwendungen zu erstellen. Denke daran als eine magische Werkzeugkiste, die unsere Webseiten zum Leben erweckt!

Um unsere erste AngularJS-Anwendung zu erstellen, benötigen wir eine einfache HTML-Datei. So sieht sie aus:

<!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>
<div ng-controller="myCtrl">
<h2>Hello, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});
</script>
</body>
</html>

Lassen Sie uns das durcharbeiten:

  1. Wir beginnen mit einer standardmäßigen HTML-Struktur.
  2. Das ng-app="myApp" in der <html>-Schlagzeile tells AngularJS, dass dies das Wurzelelement unserer Anwendung ist.
  3. Wir fügen die AngularJS-Bibliothek mit einem <script>-Tag in der <head>-Sektion ein.
  4. Im <body> haben wir ein <div> mit ng-controller="myCtrl". Dies verbindet unsere HTML mit einem AngularJS-Controller.
  5. Innen in diesem <div> haben wir {{name}}. Dies ist ein AngularJS-Ausdruck, der den Wert von name anzeigen wird.
  6. Schließlich haben wir ein <script>-Tag, in dem wir unsere AngularJS-Modul und Controller definieren.

Ausführen der AngularJS-Anwendung

Nun, da wir unsere Anwendung erstellt haben, sehen wir, wie man sie ausführt:

  1. Speichern Sie den obigen Code in einer Datei namens index.html.
  2. Öffnen Sie diese Datei in einem Webbrowser (wie Chrome oder Firefox).

Das ist es! Ihre AngularJS-Anwendung läuft jetzt. Ist das nicht einfacher, als Sie dachten?

Ausgabe

Wenn Sie die index.html-Datei in Ihrem Browser öffnen, sollten Sie sehen:

Hello, AngularJS Beginner!

Magisch, oder? Aber wie funktioniert das? Lassen Sie uns tiefer Tauchen!

Wie AngularJS mit HTML integriert wird

AngularJS integriert sich nahtlos in HTML durch das, was wir "Direktiven" nennen. Dies sind spezielle Attribute, die AngularJS mitteilen, dass es etwas mit einem DOM-Element tun soll. Sehen wir uns die wichtigsten Direktiven an, die wir verwendet haben:

Direktive Zweck
ng-app Definiert das Wurzelelement einer AngularJS-Anwendung
ng-controller Gibt an, welchen Controller für das HTML-Element zu verwenden
{{ }} Zeigt den Wert eines Ausdrucks an

Hier ist eine detaillierte Erklärung:

  1. ng-app: Diese Direktive initialisiert eine AngularJS-Anwendung. Es tells AngularJS, dass es diese Seite übernehmen soll. In unserem Beispiel haben wir es auf das <html>-Tag gesetzt, was unsere gesamte Seite zu einer AngularJS-Anwendung macht.

  2. ng-controller: Diese Direktive gibt eine JavaScript-Controller-Klasse an. Der Controller ist der Ort, an dem wir das Verhalten unserer Anwendung durch Definition von Funktionen und Werten festlegen. In unserem Beispiel ist myCtrl unser Controller.

  3. {{ }}: Diese doppelten geschweiften Klammern sind AngularJS-Ausdrücke. Sie sagen AngularJS, den Ausdruck innen auszuwerten und ihn durch das Ergebnis zu ersetzen. In unserem Fall wird {{name}} durch "AngularJS Beginner" ersetzt.

Nun schauen wir uns unseren JavaScript-Code an:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});

  1. angular.module('myApp', []) erstellt eine neue AngularJS-Modul namens 'myApp'. Das entspricht dem Namen, den wir in ng-app="myApp" verwendet haben.

  2. app.controller('myCtrl', function($scope) { ... }) definiert unseren Controller. Das $scope ist ein spezielles Objekt, das als Brücke zwischen dem Controller und der Ansicht (unserem HTML) dient.

  3. $scope.name = 'AngularJS Beginner' setzt eine Eigenschaft auf das $scope. Dies ermöglicht es uns, {{name}} in unserem HTML zu verwenden.

Und da hast du es! Du hast gerade deine erste AngularJS-Anwendung erstellt und verstanden. Ist das nicht aufregend?

Denke daran, das Lernen von Code ist wie das Lernen einer neuen Sprache. Es mag initially verwirrend erscheinen, aber mit Übung wird es zur zweiten Natur. Als ich zum ersten Mal AngularJS unterrichtete, hatte ich einen Schüler, der von all den geschweiften Klammern so verwirrt war, dass er es die "Moustache-Sprache" nannte! Aber am Ende des Kurses erstellte er komplexe Anwendungen und lachte über seine anfängliche Verwirrung.

Also keine Sorge, wenn nicht alles sofort klar wird. Übe weiter, versuche, den Code zu ändern (was passiert, wenn du 'AngularJS Beginner' in deinen eigenen Namen änderst?), und vor allem, habe Spaß dabei! In unserer nächsten Lektion werden wir mehr AngularJS-Funktionen erkunden und mit der Erstellung komplexerer Anwendungen beginnen. Bis dahin, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - MVC-Architektur
Nächstes Tutorial:
AngularJS - Direktiven