AngularJS - Timer-Anwendung

Hallo, zukünftige Programmierer! Heute machen wir uns auf eine aufregende Reise, um eine Timer-Anwendung mit AngularJS zu erstellen. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – ich werde Ihr freundlicher Guide durch dieses Abenteuer sein und alles Schritt für Schritt erklären. Also, rollen wir die Ärmel hoch und tauchen ein!

AngularJS - Timer Application

Was ist AngularJS?

Bevor wir mit dem Bau unseres Timers beginnen, lassen Sie uns einen Moment innehalten, um zu verstehen, was AngularJS ist. Stellen Sie sich vor, Sie bauen ein Haus. AngularJS ist wie eine magische Werkzeugkiste, die den Bau der Wände, des Daches und allem dazwischen einfacher macht. Es ist ein JavaScript-Framework, das uns dabei hilft, dynamische Webanwendungen mit weniger Aufwand zu erstellen.

Einrichtung unseres Projekts

Schritt 1: AngularJS einbinden

Zuerst müssen wir AngularJS in unser Projekt einbinden. Das ist so, als ob wir einen superklugen Freund einladen, uns bei den Hausaufgaben zu helfen. Wir tun dies, indem wir eine einzelne Zeile Code in unsere HTML-Datei einfügen:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Diese Zeileweist unserer Webseite an, AngularJS von den Servern von Google zu laden. Es ist, als ob wir die magische Werkzeugkiste öffnen, über die wir gesprochen haben.

Schritt 2: Erstellung der HTML-Struktur

Nun erstellen wir die grundlegende Struktur unserer Timer-Anwendung. Stellen Sie sich das wie das Entwerfen der Baupläne für unser Haus vor:

<!DOCTYPE html>
<html ng-app="timerApp">
<head>
<title>AngularJS Timer</title>
</head>
<body ng-controller="TimerController">
<h1>AngularJS Timer</h1>
<p>Zeit: {{time}}</p>
<button ng-click="startTimer()">Start</button>
<button ng-click="stopTimer()">Stopp</button>
<button ng-click="resetTimer()">Zurücksetzen</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Lassen Sie uns das aufschlüsseln:

ng-app="timerApp": Dies tells AngularJS, dass unser gesamtes HTML-Dokument eine Angular-Anwendung namens "timerApp" ist.
ng-controller="TimerController": Dies wendet einen Controller (den wir gleich erstellen) auf unser <body>-Element an.
{{time}}: Dies ist der Ort, an dem unser Timer die aktuelle Zeit anzeigen wird.
Die Buttons haben ng-click-Attribute, die Funktionen auslösen, wenn sie angeklickt werden.

Erstellung der AngularJS-Anwendung

Schritt 3: JavaScript einrichten

Nun erstellen wir unsere app.js-Datei. Hier passiert die Magie!

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

app.controller('TimerController', function($scope, $interval) {
$scope.time = 0;
var timer;

$scope.startTimer = function() {
if (!timer) {
timer = $interval(function() {
$scope.time++;
}, 1000);
}
};

$scope.stopTimer = function() {
if (timer) {
$interval.cancel(timer);
timer = null;
}
};

$scope.resetTimer = function() {
$scope.stopTimer();
$scope.time = 0;
};
});

Das ist viel! Lassen Sie uns das Schritt für Schritt durchgehen:

var app = angular.module('timerApp', []);: Dies erstellt unsere AngularJS-Anwendung.
app.controller('TimerController', function($scope, $interval) { ... });: Dies definiert unseren Controller. Denken Sie daran als das Gehirn unserer Anwendung.
$scope.time = 0;: Dies initialisiert unseren Timer auf 0.
Die Funktionen startTimer, stopTimer und resetTimer:

startTimer verwendet $interval, um $scope.time jede Sekunde zu erhöhen.
stopTimer unterbricht das Intervall, wenn wir den Timer anhalten möchten.
resetTimer stoppt den Timer und setzt die Zeit zurück auf 0.

Wie alles zusammenarbeitet

Wenn Sie die HTML-Datei in Ihrem Browser öffnen, springt AngularJS in Aktion. Es erkennt die ng-app- und ng-controller-Direktiven und weiß, dass es unser JavaScript-Code verwenden soll, um die Seite zu steuern.

Das {{time}} in unserem HTML wird automatisch aktualisiert, wenn $scope.time in unserem JavaScript geändert wird. Dies wird als bidirektionale Datenbindung bezeichnet und ist eine der coolsten Funktionen von AngularJS!

Wenn Sie auf eine Schaltfläche klicken, wird die entsprechende Funktion in unserem Controller aufgerufen und der Timer wird nach Bedarf aktualisiert.

Fortgeschrittene Konzepte

Nun, da wir die Grundlagen kennen, werfen wir einen Blick auf einige fortgeschrittene Konzepte, die wir verwendet haben:

Abhängigkeitsinjektion

Sie haben möglicherweise bemerkt, dass $scope und $interval in unserer Controller-Funktion stehen. Diese sind Abhängigkeiten, die AngularJS "injiziert". Es ist, als ob das Framework uns spezielle Werkzeuge in unseren Code gibt.

Services

$interval ist ein AngularJS-Service. Services sind wiederverwendbare Code-Teile, die spezifische Aufgaben erfüllen. In diesem Fall hilft $interval, eine Funktion in bestimmten Intervallen wiederholt auszuführen.

Methoden-Tabelle

Hier ist eine Tabelle der Methoden, die wir in unserer Timer-Anwendung verwendet haben:

Methode	Beschreibung
startTimer()	Startet den Timer, erhöht die Zeit jede Sekunde
stopTimer()	Hält den Timer an
resetTimer()	Hält den Timer an und setzt die Zeit zurück auf Null

Fazit

Herzlichen Glückwunsch! Sie haben gerade Ihre erste AngularJS-Anwendung erstellt. Wir haben viel Boden coberter, von der grundlegenden HTML-Struktur bis hin zu AngularJS-Controllern und Services. Erinnern Sie sich daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist – es erfordert Übung und Geduld. Machen Sie sich keine Sorgen, wenn alles nicht sofort klar wird. Experimentieren Sie weiter, und bald werden Sie erstaunliche Webanwendungen erstellen!

Als wir den Kurs abschlossen, erinnerte ich mich an meinen ersten Programmierkurs, in dem ein Student fragte: "Wann werde ich ein echter Programmierer?" Ich lächelte und antwortete: "In dem Moment, in dem Sie erkennen, dass Google der beste Freund jedes Programmierers ist!" Also haben Sie keine Angst, nach Antworten zu suchen, experimentieren Sie mit dem Code und vor allem: haben Sie Spaß beim Lernen!

Happy Coding, zukünftige AngularJS-Meister!

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Wetteranwendung

Nächstes Tutorial:

AngularJS - Leaflet-Anwendung