Angular Tutorial für Beginner | DEUTSCH + TypeScript mit Demo

Angular Tutorial - Inhalt - 6 Schritte zum eigenen Frontend

1. Kapitel

Herausforderung & Ziel: Wir entwickeln eine Angular App

Wir bauen eine Disko-Angular-App, die intuitiv auf Deine Aktion reagiert (später mehr).

Das Tutorial gibt Dir eine Einführung in das Entwickeln einer App mit dem Angular-Framework.

"Ein Hello-World-Projekt mit vielen neuen Konzepten..."

2. Kapitel

Konzept & Lösungsansatz: Grundlagen Angular

Eine kleine Übersicht über das Wichtigste zu Angular.

Ich erkläre Dir die zentralen Konzepte von Angular.

Was ist Angular?

Angular gehört zu den Frontend-Webframeworks.

Das Framework entwickelt Google und jede kann die Open-Source-Software (MIT-Lizenz) für seine eigenen Projekte kostenlos nutzen. AngularJS ist der Vorgänger von Angular (ohne JS). Der Vorgänger basiert auf anderen Konzepte, Syntax und Ideen und hat sich seitdem komplett verändert.

Angular strebt einen Mobile-First-Ansatz an – eignet sich neben Smartphones für Desktop-Anwendungen im Browser gut. Angular baut auf JavaScript-Modulen auf.

Der Programmierer schreibt in TypeScript, sodass eine Klassen-basierte Programmierung möglich ist.

Was ist eine Single-App-Application?

Mit Angular kannst Du sogenannte Single-Page-Webanwendungen (SPA) entwickeln. SPAs basieren auf 1 HTML-Datei, die jeweils (1) große JavaScript- und CSS-Datei einbinden.

Das JavaScript stellt die Inhalte und die Anwendungs-Logik zur Verfügung. Die SPA ladt alle Seiten gleichzeitig, die wie Schichten übereinander liegen. Der JavaScript-Code schiebt die angefragte Ansicht in den Vordergrund.

SPAs bezeichnen Entwickler als offline-freundlich Anwendung, da diese nicht mit jeder Interaktion neu laden müssen.

Das Framework setzt den Fat-Client bzw. Rich-Client um, damit die programmierte Anwendung den Server weniger belastet.

Dependencies Injection – Merke! Angular gleich modular!

Angular = Modular.

Das Node.js-System besteht aus downloadbaren JavaScript-Paketen mit vorgefertigten JavaScript-Code. Z. B. ein Routing-Modul, welche die URL generiert, brauchst Du nicht selbst zu schreiben.

Du suchst auf https://www.npmjs.com/ das Modul, führst den Konsolen-Befehl npm i modulname aus und importiertest das Model.

Seit JavaScript 6 geht der Import mit dem Statement import {Module} from ….

Die app.module.ts TypeScript-Datei listet in einem Index / ein Inhaltsverzeichnis für alle verwendeten Module auf. Der Compiler kann einfacher die TypeScript-Dateien in einen JavaScript-Code umwandeln. Die Datei ist die Wurzel-Komponente, die alle benötigten Bibliotheken laden kann.

3. Kapitel

Basics: Angular auf Deinen PC

In diesem Abschnitt des Angular Tutorials zeige ich Dir, wie Du Angular auf Deinen PC bekommst.

Ich erkläre Dir, die wichtigen Datei und Verzeichnisse in einem Angular Projekt.

4. Kapitel

Coden: Ab zur Praxis

Ich hoffe, Du konntest npm und Angular installieren, um einen schnellen und guten Start mit Angular zu haben.

Die ersten Code-Zielen für Angular schreiben wir jetzt.

src > app >app.comonent.html

Diese Datei ist das Grundgerüst der App.

Die HTML-Komponenten geben die Inhalte wie Texte, Bilder und Videos und dessen Struktur und Anordnung vor. Die Schachtel-Struktur ist mit Tab eingerückt.

Eine Besonderheit bei Angular sind die doppelte geschweiften Klammern {{}}. Diese markieren eine Angular-Variable, die Du als …

• Strings (Texte) {{myText}}
• Nummer {{myNumber}}
• Rechenoperationen {{5+5*5}}
• Formatierte Daten {{date | date german}}
• Funktionsaufrufe {{goBack()}}

…verwenden kannst.

Eine weitere wesentliche Besonderheit von Angular sind die eigenen Direktives. Direktives beschreiben das Verhalten und Aussehen eines Tags näher z.B. [style.border]="".

Diese „Adjektive“ beschreiben einen HTML-Tag näher.

*ngFor gehört zu den strukturierenden Direktives. Angular verwendet *ngFor als eine Kontroll-Struktur. Wie eine For-Schleife kopiert *ngFor z. B. eine DIV-Box mehrfach. Dies ist vergleichbar mit einer For-Schleife wie in jede andere Programmiersprache.

*ngFor iteriert (wiederholt) über den Array cards.

• card ist ein Objekt aus dem Array cards
• tilteCard greift auf einen String innerhalb eines JSONs zurück

Angular kann die Bestandteile einer JSON innerhalb der doppelt-geschweiften Klammern erreichen:

src > app > app.component.scss

Wie schon in meinem SCSS-Guide erklärt sind in dieser Datei drei SCSS-Variablen definiert.

• $primary-color: #abdcab;
• $border-color: #272727;
• $normal-margin: 10px;

Eine Sass-Compiler wandelt den SCSS-Code in einen normalen CSS-Code um. Wenn Du Variablen und andere Funktion von SCSS verwendest, kannst Du viel Zeit sparen.

Der Stern-Selektion in CSS bezieht sich auf alle HTML-Komponenten, die auf dieser Webseite definiert sind.

In den CSS-Klassen verwenden wir die vorher definierten CSS-Variablen für die Farben und Abstände:

src > app > app.component.ts

Der Code Teils sich in drei Blöcke auf:

• Import-Statements
  • Alle Abhängigkeit / JavaScript-Bibliothek importieren diese Zielen Code.
  • Ich habe einer lokal-gehostete JSON-Datei mit den Inhalten der Karten importiert.
• Komponenten
  • „Klammer“: Hier laufen alle Teile zusammen, die ein Modul in Angular ausmachen z. B. das HTML, CSS und JavaScript.
• Export-Klasse beinhaltet die Funktionen der App-Logik.
  • Zuerst definierst Du die Variable title und cards (2D-Array)
  • Der Konstruktor lädt der Inhalte in die cards-Variable.
  • Die Funktion changeColors():
    • Zielen 21 und 22 sollen einen der JavaScript-Arrays mit einem neuen RGB-Code überschreiben.
    • Die Math.random() Funktion geniert bei Ausführung eine Zahl zwischen 1 und 0 mit vielen Nachkommastellen.
    • Die Standard-RGB-Farbpalette stellt ein Spektrum von 255 Rottöne kombiniert mit 255 Grün- und 255 Blautöne zur Verfügung
    • .toStirng() Funktion wandelt die Dezimalzahl in eine Heximalzahl um, wie sie für RGB-Code üblich ist.
    • .substr() entfernt alle Zahlen nach dem Komma. Ein RGB-Code ist in der Regel ein 6-stelliger Hexadezimal-Code (mit Transparenzstufen 8 Stellen)

src > app > cardsContent.json

In der JSON Speicherstruktur habe ich die Strings für die Karten abgespeichert.

Später können wir die JSONs in eine NoSQL wie MongoDB oder CouchDB verschieben, welche die Datenhaltung vereinfacht.

Die Karten enthalten einen Titel, Textinhalt und dessen Ausgangsfarbe.

5. Kapitel

Erweiterungen: Wie kann ich die App erweitern?

Hast Du noch nicht genug von dem Angular-Tutorial?

Oder möchtest Du noch mehr von Angular kennenlernen?

Dann zeige ich Dir in diesem Abschnitt, wie Du Deine App und Dein Wissen ausbauen kannst.

6. Kapitel

Fazit: Gratulation zu Deiner Angular-App

Sei kreativ. Lese in der Doku. Teste Angular.

Angular ist vielseitig und (nach einer Eingewöhnungsphase) schlank, flexibel und nützlich. Verpasse nicht die Chance neue Web-Anwendungen mit Angular zu bauen.

Wenn Du mit einem Angular-Projekt fertig bist, kannst Du mit ng build –prod eine installierbare Version erstellen. Diesen Ordner lädst Du auf einen (normalen Apache) Web-Server hoch.

Ich freue mich auf Deine Kommentare mit dem Link zu Deinem (ersten) Angular-Projekt(en).

• Schreibt von Fehlern, die auftreten ...
• Textstellen, die undeutlich geschildert wurden
• Kritik mit Verbesserungsvorschlägen ...
• Vorschläge für neue Post ...
• Installationsprobleme ...
• Eure Erweiterungen Euer ersten Ionic App ...

Danke. Ich freue mich auf Euer Feedback