Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Login-Anwendung

Hallo da draußen, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Reise, um eine Login-Anwendung mit AngularJS zu erstellen. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich durch diesen Prozess Schritt für Schritt zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen bei den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials wirst du eine funktionierende Login-Anwendung und ein solides Verständnis der AngularJS-Konzepte haben. Also, tauchen wir ein!

AngularJS - Login Application

1. Einführung in 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 – AngularJS ist wie dein zuverlässiges Werkzeugkasten, gefüllt mit allerlei nützlichen Werkzeugen, die deine Arbeit erleichtern. Es ist ein JavaScript-Framework, das uns dabei hilft, dynamische Web-Anwendungen mit weniger Aufwand zu erstellen.

1.1 Warum AngularJS?

AngularJS bringt mehrere Vorteile mit:

  1. Zweigleisige Datenbindung
  2. Modularer Ansatz
  3. Abhängigkeitsinjektion
  4. Direktiven zur Erweiterung von HTML

Diese Funktionen mögen jetzt wie technisches Jargon klingen, aber keine Sorge – wir werden sie erkunden, während wir unsere Login-Anwendung erstellen.

2. Einrichtung unseres Projekts

2.1 Erstellung der HTML-Struktur

Lassen wir mit der Erstellung einer grundlegenden HTML-Datei für unsere Login-Anwendung beginnen. Öffne deinen bevorzugten Texteditor und erstelle eine neue Datei namens index.html. Hier ist die�始 Struktur:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
    <title>AngularJS Login Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
        }
        input, button {
            display: block;
            margin: 10px 0;
            width: 100%;
            padding: 5px;
        }
    </style>
</head>
<body ng-controller="LoginController">
    <h1>Willkommen in unserer Login-Anwendung</h1>
    <form ng-submit="login()">
        <label for="username">Benutzername:</label>
        <input type="text" id="username" ng-model="user.username" required>

        <label for="password">Passwort:</label>
        <input type="password" id="password" ng-model="user.password" required>

        <button type="submit">Anmelden</button>
    </form>
    <p>{{message}}</p>
</body>
</html>

In dieser HTML-Datei haben wir die AngularJS-Bibliothek von einem CDN eingebunden und auf unsere app.js-Datei verlinkt (die wir als nächstes erstellen). Die ng-app- und ng-controller-Attribute sind AngularJS-Direktiven, die wir gleich erklären werden.

2.2 Erstellung des AngularJS-Moduls und des Controllers

Nun erstellen wir unsere app.js-Datei im selben Verzeichnis wie unsere HTML-Datei:

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

app.controller('LoginController', function($scope) {
    $scope.user = {
        username: '',
        password: ''
    };

    $scope.login = function() {
        // Das implementieren wir später
    };
});

Hier erstellen wir ein AngularJS-Modul namens loginApp und einen Controller namens LoginController. Der Controller hat ein user-Objekt mit username und password Eigenschaften und eine login-Funktion, die wir später implementieren.

3. Erstellung des Anmeldeformulars

Nun, da wir unsere grundlegende Struktur haben, fügen wir ein Anmeldeformular zu unserer HTML-Datei hinzu:

<form ng-submit="login()">
    <label for="username">Benutzername:</label>
    <input type="text" id="username" ng-model="user.username" required>

    <label for="password">Passwort:</label>
    <input type="password" id="password" ng-model="user.password" required>

    <button type="submit">Anmelden</button>
</form>

Dieses Formular verwendet AngularJS-Direktiven wie ng-submit und ng-model. Die ng-submit-Direktive ruft unsere login()-Funktion auf, wenn das Formular submitted wird, während ng-model die Eingabewerte an unser user-Objekt im Controller bindet.

4. Implementierung der Anmeldefunktion

Lassen wir unsere login-Funktion im Controller aktualisieren:

$scope.login = function() {
    if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
        $scope.message = 'Willkommen, ' + $scope.user.username + '!';
    } else {
        $scope.message = 'Ungültiger Benutzername oder Passwort.';
    }
};

Diese Funktion überprüft, ob der eingegebene Benutzername und das Passwort unseren hartcodierten Werten entsprechen. In einer realen Anwendung würdest du normalerweise gegen eine Datenbank überprüfen.

5. Anzeige des Anmeldeergebnisses

Um das Anmeldeergebnis anzuzeigen, füge dies zu deinem HTML hinzu:

<p>{{message}}</p>

Die doppelten geschweiften Klammern {{}} sind die Methode von AngularJS, um Daten vom Controller in die Ansicht anzuzeigen.

6. Hinzufügen eines kleinen Stils

Machen wir unsere Anwendung mit ein wenig CSS schöner. Füge dies zu deiner HTML-Datei hinzu:

<style>
    body {
        font-family: Arial, sans-serif;
        max-width: 300px;
        margin: 0 auto;
        padding: 20px;
    }
    input, button {
        display: block;
        margin: 10px 0;
        width: 100%;
        padding: 5px;
    }
</style>

7. Die vollständige Anwendung

Hier ist unsere vollständige index.html-Datei:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
    <title>AngularJS Login Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
        }
        input, button {
            display: block;
            margin: 10px 0;
            width: 100%;
            padding: 5px;
        }
    </style>
</head>
<body ng-controller="LoginController">
    <h1>Willkommen in unserer Login-Anwendung</h1>
    <form ng-submit="login()">
        <label for="username">Benutzername:</label>
        <input type="text" id="username" ng-model="user.username" required>

        <label for="password">Passwort:</label>
        <input type="password" id="password" ng-model="user.password" required>

        <button type="submit">Anmelden</button>
    </form>
    <p>{{message}}</p>
</body>
</html>

Und hier ist unsere vollständige app.js-Datei:

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

app.controller('LoginController', function($scope) {
    $scope.user = {
        username: '',
        password: ''
    };

    $scope.login = function() {
        if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
            $scope.message = 'Willkommen, ' + $scope.user.username + '!';
        } else {
            $scope.message = 'Ungültiger Benutzername oder Passwort.';
        }
    };
});

8. Schlussfolgerung

Glückwunsch! Du hast gerade deine erste AngularJS-Anmeldeanwendung erstellt. Wir haben viel Boden cobered, von der Einrichtung eines AngularJS-Moduls und Controllers bis hin zur Erstellung eines Formulars mit zweigleisiger Datenbindung und der Implementierung einer einfachen Anmeldefunktion.

Denke daran, dass dies nur die Spitze des Eisbergs ist, wenn es um AngularJS geht. Während du weitermachst, wirst du mehr leistungsstarke Funktionen entdecken, die dir helfen, komplexe, interaktive Web-Anwendungen zu erstellen.

Hier ist eine Tabelle, die die Hauptkonzepte zusammenfasst, die wir verwendet haben:

Konzept Beschreibung
Modul Ein Behälter für verschiedene Teile einer Anwendung
Controller Verwalten der Daten und des Verhaltens der Anwendung
Direktive Erweitert HTML um benutzerdefinierte Attribute und Elemente
Zweigleisige Datenbindung Synchronisiert Daten zwischen Modell und Ansicht
Ausdrücke Greift auf Variablen und Funktionen aus dem Scope zu

Weiterüben, bleib neugierig und viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Bootstrap-Anwendung
Nächstes Tutorial:
AngularJS - Datei hochladen