Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Notizzettel-Anwendung: Ihre erste Web-App erstellen

Hallo, ambitionierte Programmierer! Ich freue mich sehr, Sie auf der aufregenden Reise zu begleiten, Ihre erste Webanwendung mit AngularJS zu erstellen. Als jemand, der seit über einem Jahrzehnt Programmierung unterrichtet, kann ich Ihnen versichern, dass Sie am Ende dieses Tutorials eine funktionierende Notizzettel-Anwendung und ein solides Verständnis der AngularJS-Basiskenntnisse haben werden. Also, tauchen wir ein!

AngularJS - Notepad Application

Was ist AngularJS?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was AngularJS ist. Stellen Sie sich vor, Sie bauen ein Haus. AngularJS ist wie das Gerüst, das die Struktur und Werkzeuge bietet, um Ihren Hausbau-Prozess einfacher und organisierter zu gestalten. Es ist ein JavaScript-Framework, das uns dabei hilft, dynamische Webanwendungen mit weniger Aufwand zu erstellen.

Einrichten unserer Entwicklungsumgebung

Zuerst einmal müssen wir unsere Arbeitsumgebung einrichten. Keine Sorge; es ist einfacher als das Einrichten einer echten Werkbank!

  1. Öffnen Sie Ihren favorisierten Texteditor (ich empfehle Visual Studio Code für Anfänger).
  2. Erstellen Sie einen neuen Ordner namens "AngularJS-Notizzettel".
  3. Innerhalb dieses Ordners erstellen Sie drei Dateien:
  • index.html
  • app.js
  • style.css

Erstellen der HTML-Struktur

Lassen Sie uns mit unserer index.html Datei beginnen. Das ist wie die Bauplan unseres Hauses.

<!DOCTYPE html>
<html ng-app="notizzettelApp">
<head>
<title>AngularJS Notizzettel</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="NotizzettelController">
<h1>Mein Notizzettel</h1>
<textarea ng-model="noteContent"></textarea>
<p>Zeichenanzahl: {{noteContent.length}}</p>
</body>
</html>

Lassen Sie uns das zusammenbrechen:

  • ng-app="notizzettelApp": Das tells AngularJS, dass dies die Wurzel unserer Anwendung ist.
  • ng-controller="NotizzettelController": Das gibt an, welcher Controller diese Seite verwalten soll.
  • ng-model="noteContent": Das bindet das Textarea an eine Variable namens noteContent in unserem Controller.
  • {{noteContent.length}}: Das ist ein Ausdruck, der die Länge unserer Notiz anzeigt.

Styling unserer Anwendung

Nun fügen wir einige grundlegende Stile hinzu, um unseren Notizzettel ansprechend aussehen zu lassen. In Ihrer style.css Datei fügen Sie hinzu:

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

Diese CSS wird unsere Inhalte zentrieren, eine schöne Schriftart festlegen und unser Textarea und unsere Überschrift stylen.

Erstellen der AngularJS-Anwendung

Nun kommen wir zum aufregenden Teil - lassen Sie uns unseren Notizzettel mit AngularJS zum Leben erwecken! In Ihrer app.js Datei:

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

app.controller('NotizzettelController', function($scope) {
$scope.noteContent = '';
});

Lassen Sie uns das zusammenbrechen:

  1. Wir erstellen ein AngularJS-Modul namens 'notizzettelApp'.
  2. Wir definieren einen Controller namens 'NotizzettelController'.
  3. Innerhalb des Controllers initialisieren wir noteContent als leeren String.

Hinzufügen weiterer Funktionen

Nun haben wir einen grundlegenden Notizzettel, lassem ihn mit einigen mehr Funktionen nützlicher machen!

1. Speichern und Laden-Funktionalität

Fügen wir Buttons hinzu, um unsere Notizen zu speichern und zu laden. Aktualisieren Sie Ihre HTML:

<body ng-controller="NotizzettelController">
<h1>Mein Notizzettel</h1>
<textarea ng-model="noteContent"></textarea>
<p>Zeichenanzahl: {{noteContent.length}}</p>
<button ng-click="saveNote()">Notiz speichern</button>
<button ng-click="loadNote()">Notiz laden</button>
</body>

Und aktualisieren Sie Ihre app.js:

app.controller('NotizzettelController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Notiz gespeichert!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Notiz geladen!');
};
});

Hier verwenden wir localStorage, um unsere Notiz zu speichern und zu laden. Stellen Sie sich das wie ein kleines Notizbuch vor, in das Ihr Browser Informationen schreiben kann, um sie später zu erinneren.

2. Wortzähler-Funktion

Fügen wir eine Wortzähler-Funktion hinzu. Aktualisieren Sie Ihre HTML:

<p>Zeichenanzahl: {{noteContent.length}} | Wortanzahl: {{wordCount()}}</p>

Und fügen Sie diese Funktion zu Ihrem Controller in app.js hinzu:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Diese Funktion teilt den Notizinhalt an Leerzeichen und zählt die nicht leeren Elemente, wodurch wir eine Wortanzahl erhalten.

Alles zusammenbringen

Hier ist eine Tabelle, die die wichtigsten AngularJS-Direktiven und Ausdrücke zusammenfasst, die wir verwendet haben:

Direktive/Ausdruck Zweck
ng-app Definiert das Wurzelelement einer AngularJS-Anwendung
ng-controller Gibt an, welcher Controller für das HTML-Element verwendet werden soll
ng-model Bindet den Wert von HTML-Steuerungen an Anwendungsdaten
ng-click Gibt an, dass ein AngularJS-Ausdruck ausgewertet werden soll, wenn ein Element angeklickt wird
{{expression}} Gibt den Wert eines Ausdrucks aus

Glückwunsch! Sie haben gerade Ihre erste AngularJS-Anwendung erstellt. Wir haben die Grundlagen des Einrichtens einer AngularJS-Anwendung, die Verwendung von Controllern, das Arbeiten mit Modellen und sogar das Lokal speichern von Daten abgedeckt.

Erinnern Sie sich daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist. Es erfordert Übung, Geduld und Ausdauer. Lassen Sie sich nicht entmutigen, wenn etwas nicht sofort verständlich ist - das ist alle Teil des Lernprozesses. Experimentieren Sie mit Ihrer Notizzettel-App, versuchen Sie, neue Funktionen hinzuzufügen, und vor allem, haben Sie Spaß!

In meinen Jahren des Unterrichtens habe ich unzählige Schüler von kompletten Anfängern zu versierten Entwicklern gesehen. Sie befinden sich jetzt auf derselben aufregenden Reise. Weiter codieren, weiter lernen, und bevor Sie es wissen, werden Sie komplexe Webanwendungen mit Leichtigkeit erstellen können!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - ToDo-Anwendung
Nächstes Tutorial:
AngularJS - Bootstrap-Anwendung