Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Todo-Anwendung

Hallo, angehende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von AngularJS und bauen eine einfache, aber leistungsstarke Todo-Anwendung. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich durch diesen Prozess zu führen, auch wenn du noch nie eine Zeile Code geschrieben hast. Also hole dir dein Lieblingsgetränk, setze dich bequem hin und tauchen wir ein!

AngularJS - ToDo Application

Was ist AngularJS?

Bevor wir mit dem Coden beginnen, lassen wir uns einen Moment Zeit nehmen, um zu verstehen, was AngularJS ist. Stell dir vor, du baust ein Haus. HTML wäre das Fundament und die Wände, CSS wäre die Farbe und Dekoration und JavaScript wäre der Strom und die Sanitärinstallation. AngularJS ist wie ein superfähiges Bauarbeiter-Team, das dir hilft, diese Elemente auf eine kluge, organisierte Weise zusammenzusetzen.

AngularJS ist ein leistungsstarkes JavaScript-Framework, das die HTML-Vokabular für deine Anwendung erweitert. Es ist besonders gut darin, dynamische, einseitige Anwendungen zu erstellen.

Einrichtung unseres Projekts

Zunächst einmal richten wir unser Projekt ein. Wir brauchen drei Dateien:

  1. index.html (unsere Haupt-HTML-Datei)
  2. app.js (unsere AngularJS-Anwendung)
  3. style.css (unser Stylesheet)

Lassen wir mit unserer HTML-Datei beginnen:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Meine Todo-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>Meine Todo-Liste</h1>
<!-- Später fügen wir hier mehr hinzu -->
</body>
</html>

Lassen wir das auseinanderbrechen:

  • ng-app="todoApp": Das tells AngularJS, dass dies das Hauptelement unserer Anwendung ist.
  • ng-controller="TodoController": Das gibt an, welcher Controller für diesen Teil unserer App verwendet werden soll.
  • Wir haben AngularJS von einem CDN eingebunden und unsere app.js und style.css Dateien verlinkt.

Erstellung unserer AngularJS-Anwendung

Nun erstellen wir unsere AngularJS-Anwendung in app.js:

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

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'AngularJS lernen', done: false},
{text: 'Eine App erstellen', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Hier ist, was passiert:

  • Wir erstellen ein AngularJS-Modul namens 'todoApp'.
  • Wir definieren einen Controller namens 'TodoController'.
  • Innerhalb des Controllers erstellen wir ein Array von Todo-Elementen und eine Funktion, um neue Todos hinzuzufügen.
  • $scope ist wie eine Brücke zwischen unserem HTML und JavaScript. Es ermöglicht uns, Variablen und Funktionen in unserem HTML zu verwenden.

Anzeige unserer Todos

Lassen wir unser HTML aktualisieren, um unsere Todos anzuzeigen:

<body ng-controller="TodoController">
<h1>Meine Todo-Liste</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Neue Todo hinzufügen">
<input type="submit" value="Hinzufügen">
</form>
</body>

Lassen wir das auseinanderbrechen:

  • ng-repeat="todo in todos": Das erstellt ein neues <li> für jeden Todo in unserem Todos-Array.
  • ng-model="todo.done": Das bindet die Checkbox an die 'done'-Eigenschaft unseres Todo.
  • ng-class="{'done': todo.done}": Das applies die 'done'-Klasse, wenn todo.done wahr ist.
  • {{todo.text}}: Das zeigt den Text unseres Todo an.
  • ng-submit="addTodo()": Das ruft unsere addTodo-Funktion auf, wenn das Formular submitted wird.
  • ng-model="newTodo": Das bindet das Input an unsere newTodo-Variable im Controller.

Styling unserer App

Schließlich fügen wir einige grundlegende Stile in unserer style.css hinzu:

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

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

Diese CSS wird unsere App sauber und organisiert aussehen lassen.

Schlussfolgerung

Glückwunsch! Du hast gerade deine erste AngularJS-Anwendung erstellt. Hier ist eine Tabelle, die die Haupt-AngularJS-Konzepte zusammenfasst, die wir verwendet haben:

Konzept Beschreibung
ng-app Definiert das Hauptelement einer AngularJS-Anwendung
ng-controller Gibt an, welcher Controller für das HTML-Element verwendet werden soll
ng-repeat wiederholt ein HTML-Element für jedes Element in einem Array
ng-model Bindet ein Input, Select oder Textarea an eine Eigenschaft auf dem Scope
ng-submit Gibt an, welche Funktion ausgeführt werden soll, wenn ein Formular submitted wird
ng-class Applying CSS-Klassen dynamisch

Denke daran, dass das Lernen zu coden wie das Lernen einer neuen Sprache ist. Es erfordert Zeit und Übung, aber mit Beharrlichkeit wirst du bald komplexe Anwendungen erstellen können. Weiter coden, weiter lernen und vor allem: Spaß haben!

Credits: Image by storyset

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