AngularJS - Inline-Anwendung

Einführung

Hallo da, zukünftige AngularJS-Meister! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der AngularJS-Inline-Anwendungen zu sein. Als jemand, der already mehr Jahre als ich zugeben möchte, Programmierung unterrichtet hat (lass uns einfach sagen, ich erinnere mich daran, als Floppy-Discs wirklich flexibel waren), kann ich Ihnen versichern, dass Sie am Ende dieses Tutorials mit Vertrauen Ihre erste AngularJS-Inline-Anwendung erstellen werden.

AngularJS - In-line Application

Was ist eine Inline-Anwendung?

Bevor wir uns in den Code stürzen, lassen Sie uns verstehen, was wir mit einer "Inline-Anwendung" meinen. Stellen Sie sich vor, Sie sind an einem Buffet (bleiben Sie bei mir, ich verspreche, dieser Vergleich wird Sinn ergeben). Eine Inline-Anwendung ist wie das Have-all-Your-Favorite-Dishes-auf-einem-Teller – alles, was Sie brauchen, ist direkt dort, bereit zum Go. In AngularJS-Begriffen bedeutet dies, dass wir unsere gesamte Anwendung in einer einzigen HTML-Datei schreiben werden. Keine separaten JavaScript-Dateien, keine externen Module – nur pure, ungeschwächte AngularJS-Güte.

Ihre erste Inline-Anwendung einrichten

Schritt 1: Das HTML-Skelett

Lassen Sie uns mit den Grundzügen unserer HTML-Datei beginnen:

<!DOCTYPE html>
<html>
<head>
<title>Meine erste AngularJS-Inline-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Dies mag Ihnen vertraut vorkommen, wenn Sie bereits Web-Entwicklung betrieben haben. Wenn nicht, keine Sorge! Wir richten einfach ein grundlegendes HTML-Dokument ein und schließen die AngularJS-Bibliothek von einem Content Delivery Network (CDN) ein. Denken Sie daran, als ob wir AngularJS zu unserer Coding-Party einladen.

Schritt 2: Hinzufügen der ng-app-Direktive

Nun lassen Sie uns AngularJS wissen, wo unsere Anwendung lebt:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine erste AngularJS-Inline-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Wir haben ng-app="myApp" zum <html>-Tag hinzugefügt. Das ist so, als ob wir ein großes Schild an unser Haus hängen würden, das sagt: "AngularJS lebt hier!" Der Teil myApp ist der Name, den wir unserer Anwendung geben.

Erstellung Ihres ersten Controllers

Was ist ein Controller?

In AngularJS ist ein Controller wie das Gehirn Ihrer Anwendung. Es verwaltet die Daten und das Verhalten eines bestimmten Teils Ihrer App. Lassen Sie uns einen erstellen!

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

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

Lassen Sie uns das durcharbeiten:

Wir haben ng-controller="MainController" zum <body>-Tag hinzugefügt. Dies tells AngularJS, welchen Teil unseres HTML diese Kontrolle kontrolliert.
Innerhalb der <script>-Tags erstellen wir unsere Anwendungsmodule mit angular.module('myApp', []).
Wir definieren unseren Controller mit app.controller(). Das $scope-Parameter ist, wie wir Daten zwischen dem Controller und der Ansicht (unserem HTML) übergeben.
Wir setzen eine greeting-Eigenschaft auf $scope. Dies macht sie in unserem HTML verfügbar.
In HTML verwenden wir {{greeting}}, um den Wert von greeting anzuzeigen.

Hinzufügen von Benutzerinteraktionen

Machen wir unsere App interaktiver, indem wir eine Schaltfläche hinzufügen, die die Begrüßung ändert:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine erste AngularJS-Inline-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Begrüßung ändern</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hallo, AngularJS-Welt!";
$scope.changeGreeting = function() {
$scope.greeting = "Grüße, Erdenbewohner!";
};
});
</script>
</body>
</html>

Hier ist, was neu ist:

Wir haben eine Schaltfläche mit der ng-click-Direktive hinzugefügt. Dies tells AngularJS, die changeGreeting()-Funktion aufzurufen, wenn die Schaltfläche geklickt wird.
In unserem Controller haben wir die changeGreeting()-Funktion auf $scope definiert. Diese Funktion ändert den Wert von greeting.

Data Binding in Aktion

Eine der mächtigsten Funktionen von AngularJS ist die bidirektionale Datenbindung. Lassen Sie uns sie in Aktion sehen:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine erste AngularJS-Inline-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hallo, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Willkommen zu unserer AngularJS-App!";
$scope.name = "Anonym";
});
</script>
</body>
</html>

In diesem Beispiel:

Wir haben ein Eingabefeld mit ng-model="name" hinzugefügt. Dies bindet den Wert der Eingabe an die name-Eigenschaft auf unserem $scope.
Wir显示 den Wert von name mit {{name}} in unserem Absatz.
Wenn Sie in das Eingabefeld tippen, werden Sie sehen, dass die Begrüßung in Echtzeit aktualisiert wird. Das ist die Magie der bidirektionalen Datenbindung!

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre erste AngularJS-Inline-Anwendung erstellt. Wir haben die Grundlagen für das Einrichten einer AngularJS-Anwendung, das Erstellen eines Controllers, die Handhabung von Benutzerinteraktionen und die Implementierung der bidirektionalen Datenbindung behandelt. Denken Sie daran, wie das Lernen jeder neuen Fähigkeit, das Beherrschen von AngularJS erfordert Übung. Also experimentieren Sie nicht, brechen Sie Dinge und lernen Sie von Ihren Fehlern. Das ist, wie wir alle zu den Entwicklern wurden, die wir heute sind!

Hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven zusammenfasst, die wir verwendet haben:

Direktive	Zweck
ng-app	Definiert und bootstrapt eine AngularJS-Anwendung
ng-controller	Gibt einen Controller für einen Abschnitt Ihrer Anwendung an
ng-click	Gibt eine Funktion an, die ausgeführt wird, wenn ein Element geklickt wird
ng-model	Bindet eine Eingabe, eine Auswahl oder ein Textfeld an eine Eigenschaft auf dem Scope

Weiters codieren, weiter lernen und vor allem: Viel Spaß! Denken Sie daran, jeder Experte war einmal ein Anfänger. Ihre AngularJS-Reise hat gerade begonnen!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Datei hochladen

Nächstes Tutorial:

AngularJS - Navigationsmenü