Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Einrichtung der Entwicklungsumgebung

Hallo da draußen, zukünftige Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von AngularJS zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass das Einrichten Ihrer Entwicklungsumgebung so ist wie das Vorbereiten Ihrer Küche vor dem Kochen eines Gourmet-Menüs. Es mag nicht der aufregendste Teil sein, aber es ist für den Erfolg absolut notwendig. Also, lasst uns die Ärmel hochkrempeln und loslegen!

AngularJS - Environment Setup

Was ist AngularJS?

Bevor wir uns der Einrichtung zuwenden, lassen Sie uns einen Moment innehalten, um zu verstehen, was AngularJS ist. Stellen Sie sich vor, Sie bauen ein Haus. HTML wäre das Fundament und die Wände, CSS wäre die Farbe und Dekoration, und JavaScript wäre die Elektrizität und Sanitärinstallation. AngularJS? Na, das ist wie ein Team von Experten-Innenarchitekten und Architekten, die sicherstellen, dass alles reibungslos zusammenarbeitet.

AngularJS ist ein leistungsstarkes JavaScript-Framework, das die Fähigkeiten von HTML erweitert und es einfacher macht, dynamische, einseitige Webanwendungen zu erstellen. Es ist, als würde man Ihrem HTML Superkräfte verleihen!

Warum brauchen wir eine Entwicklungsumgebung?

Sie fragen sich vielleicht, "Können wir nicht einfach direkt loscoden?" Nun, Sie könnten das, aber es wäre so, als würden Sie ein fünfgängiges Menü in einer Küche ohne Geräte und Geschirr kochen. Eine ordentliche Entwicklungsumgebung gibt Ihnen alle Werkzeuge, die Sie benötigen, um Ihre AngularJS-Anwendungen effizient zu schreiben, zu testen und auszuführen.

Einrichtung Ihrer AngularJS-Umgebung

Nun, lassen Sie uns zur Sache kommen. Hier ist, was wir tun müssen:

1. Installieren Sie Node.js

Node.js ist wie das Herzstück unserer Entwicklungsumgebung. Es ist eine JavaScript-Laufzeitumgebung, die es uns ermöglicht, JavaScript auf unserem Computer auszuführen, außerhalb eines Web-Browsers.

  1. Gehen Sie auf die offizielle Node.js-Website (https://nodejs.org/).
  2. Laden Sie die für die meisten Benutzer empfohlene Version herunter.
  3. Führen Sie den Installer aus und folgen Sie den Anweisungen.

Um zu überprüfen, ob Node.js korrekt installiert ist, öffnen Sie Ihre Eingabeaufforderung oder Ihren Terminal und tippen Sie:

node --version

Sie sollten die Versionsnummer von Node.js sehen, wenn es korrekt installiert ist.

2. Installieren Sie npm (Node Package Manager)

Gute Nachricht! npm kommt normalerweise mit Node.js gebündelt. Es ist wie eine riesige Bibliothek, aus der Sie (oder in diesem Fall, herunterladen) vorgefertigte Codepakete für Ihre Projekte ausleihen können.

Um zu überprüfen, ob npm installiert ist, tippen Sie:

npm --version

3. Installieren Sie AngularJS

Nun, hier geschieht das Magische. Wir verwenden npm, um AngularJS zu installieren. In Ihrer Eingabeaufforderung oder Ihrem Terminal tippen Sie:

npm install angular

Dieser Befehl weist npm an, das AngularJS-Paket abzurufen und es auf Ihrem Computer zu installieren.

4. Einrichtung eines einfachen AngularJS-Projekts

Lassen Sie uns ein einfaches Projekt erstellen, um sicherzustellen, dass alles funktioniert. Zuerst erstellen Sie einen neuen Ordner für Ihr Projekt. Sie können dies über Ihren Datei-Explorer oder mit der Kommandozeile tun:

mkdir my-angular-project
cd my-angular-project

Jetzt erstellen wir zwei Dateien in diesem Ordner:

  1. index.html
  2. app.js

Hier ist, wie Ihr index.html aussehen sollte:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Meine erste AngularJS-App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

Und hier ist Ihr app.js:

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

app.controller('MainController', function($scope) {
$scope.greeting = 'Hallo, AngularJS!';
});

Lassen Sie uns das einmal auseinandernehmen:

  • In index.html erstellen wir eine grundlegende HTML-Struktur.
  • Das ng-app="myApp"-Attribut tells AngularJS, dass dies das Hauptelement unserer AngularJS-Anwendung ist.
  • Wir binden die AngularJS-Bibliothek und unsere app.js-Datei mit <script>-Tags ein.
  • Das <div ng-controller="MainController"> verbindet unser HTML mit dem Controller, den wir in app.js definieren.
  • {{ greeting }} ist ein AngularJS-Ausdruck, der den Wert von greeting aus unserem Controller anzeigt.

In app.js:

  • Wir erstellen eine AngularJS-Modul namens myApp.
  • Wir definieren einen Controller namens MainController.
  • Innerhalb des Controllers setzen wir eine greeting-Eigenschaft auf das $scope-Objekt, das AngularJS verwendet, um Daten zwischen dem Controller und der Ansicht (unserem HTML) zu übertragen.

5. Ihre Anwendung ausführen

Um Ihre Anwendung in Aktion zu sehen, benötigen Sie einen Webserver. Für Entwicklungszwecke können Sie das live-server-Paket verwenden. Installieren Sie es global mit npm:

npm install -g live-server

Dann führen Sie im Projektverzeichnis aus:

live-server

Dies startet einen lokalen Webserver und öffnet Ihren Standardbrowser, um Ihre Anwendung anzuzeigen. Sie sollten "Hallo, AngularJS!" auf der Seite sehen.

Fazit

Glückwunsch! Sie haben Ihre AngularJS-Entwicklungsumgebung eingerichtet und Ihre erste AngularJS-Anwendung erstellt. Es mag wie viele Schritte erscheinen, aber glauben Sie mir, es wird mit der Übung einfacher. Denken Sie daran, jeder Experte war einmal ein Anfänger, und das Einrichten Ihrer Umgebung ist der erste Schritt auf Ihrem Weg zum AngularJS-Meister.

In unserer nächsten Lektion tauchen wir tiefer in die Konzepte von AngularJS ein und beginnen mit der Erstellung komplexerer Anwendungen. Bis dahin fühlen Sie sich frei, mit Ihrer neuen Einrichtung zu experimentieren. Versuchen Sie, die Begrüßung zu ändern oder mehr Elemente zu Ihrem HTML hinzuzufügen. Der beste Weg zu lernen ist durch Tun!

Frohes Coden und bis zur nächsten Lektion!

Methode Beschreibung
angular.module() Erstellt oder abruft ein AngularJS-Modul
module.controller() Registriert einen neuen Controller mit dem Modul
$scope Ein Objekt, das auf das Anwendungsmodell verweist
ng-app Direktive, die das Hauptelement einer AngularJS-Anwendung angibt
ng-controller Direktive, die einen Controller für ein HTML-Element festlegt
{{ }} Ausdrucks syntax in AngularJS zur Anzeige von Werten

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS - Überblick
Nächstes Tutorial:
AngularJS - MVC-Architektur