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

  1. Planst Du Dein Eigenes Frontend?
  2. Möchtest Du Dir nicht viel Arbeit machen?
  3. Willst Du intelligent mit wenig Code ein stabiles UI zeigen können?

Dann probiere doch mal ANGULAR!

Seit 2016 ist Angular ein beliebtes Web-Frontend, welches die Entwicklung vereinfacht.

Wie für jedes Framework braucht der Entwickler einen soliden Start, um die Konzepte und Architektur des Frameworks kennenzulernen.

Diesen ersten Push möchte ich Dir mit diesem ausführlichen Tutorial gegeben, der Dir den Start in die Angular Welt erleichtert.

Angular Tutorial - Inhalt - 6 Schritte zum eigenen Frontend

Herausforderung und Ziel

Coding und Umsetzung

Konzept und Lösungsansatz

Erweiterungen und Weiterführendes

Theorie einfach erklärt

Ziel und Fazit

1. Kapitel

Herausforderung & Ziel: Wir entwickeln eine Angular App

Herausforderung und Ziel
Herausforderung und Ziel

Wir bauen eine Disko Angular App, die INTUTIV auf Deine Aktion reagiert (spüter mehr)

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

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

 

Deine "Disko" Angular App - Angular Tutorial mit Praxis Beispiel / Demo

09 Opimiert fürs IPhone Angular Tutorial Deutsch Steffen Lippke
09 Opimiert fürs IPhone Angular Tutorial Deutsch Steffen Lippke

Voraussetzungen: Dein Wissen

  • Etwas programmiert haben ... mit Java, Python oder jede andere Sprache
  • HTML und / oder CSS sind Kenntnisse vorteilhaft
  • Admin Rechte / Programme installieren und deinstallieren

Technische Voraussetzungen: Das brauchst Du für Dein erstes Angular Projekt

Für den Beginn reicht Node.js und ein Editor aus.

Browser (Firefox, Chrome)

Damit Du Dir das Ergebnis angezeigt bekommst, brauchst Du einen Browser (sonst könntest Du nicht diese Webseite sehen).

Node.js (LTS)

Das Angular Framework basiert auf JavaScript und der Entwickler codiert in TypeScript. Deshalb nutze bitte auch Node.js. Der Paketmanager handelt JavaScript-Bibliotheken, die Du als Erweiterung für Dein Projekt sehen kannst.

 

Node Packet Management
Node Packet Management

Editor (Visual Studio Code)

Neben dem Browser brauchst Du einen Code-Editor Deiner Wahl. Am besten verwendest Du einen Editor mit Syntax-Highlighting und IntelliSense wie z. B. Visual Studio Code.

VS Code
VS Code

Angular CLI (Neuste Version)

Angular Webseite Angular Tutorial Deutsch Steffen Lippke
Angular Webseite Angular Tutorial Deutsch Steffen Lippke

Das Angular Bash-Programm nimmt die viel Arbeit für das Erstellen, Builden und Anpassen Deines Angular-Projekts ab.

2. Kapitel

Konzept & Lösungsansatz: Grundlagen Angular

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Eine kleine Übersicht über das Wichtigste zu Angular.

Was ist Angular?

Angular gehört zu den Frontend-Webframeworks.

Das Framework hat Google entwickelt und ist mit der MIT-Lizenz Open-Source und kostenlos nutzbar. AngularJS ist der Vorgänger von Angular (ohne JS). Der Vorgänger basiert auf anderen Konzepte und hat sich seitdem komplett verändert.

Angular Webseite Angular Tutorial Deutsch Steffen Lippke
Angular Webseite Angular Tutorial Deutsch Steffen Lippke

Angular strebt einen Mobile-First-Ansatz an – eignet sich auch für Desktop-Anwendungen im Browser gut. Angular baut auf JavaScript-Module 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 einbindet.

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

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

Das Framework setzt den Fat-Client / Rich-Client um, damit die Server der Entwickler weniger belastet sind.

Dependencies Injection – Merke! Angular gleich modular!

Angular = Modular.

Das Node.js-System besteht aus downloadbaren 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 Terminal-Befehl 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.

3. Kapitel

Basics: Angular auf Deinen PC

Theorie einfach erklärt
Theorie einfach erklärt

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.

In 5 Schritten Angular auf Dienen PC bringen

  1. Downloade Dir Node.js und installiere die Anwendung mit dem grafischen Installer
  2. Öffne eine Power Shell mit Admin/Rechten und führe ein
    npm i –g @angular/cli

    aus
    01 Angular install Angular Tutorial Deutsch Steffen Lippke
  3. Gehe in ein Verzeichnis, wo Dein Projekt gesichert sein soll und führe im Terminal
    ng new myFirstApp
    Dieser Befehl erstellt das Angular-Projekt und installiert die Module. Das kann 1-15 Minuten dauern. Beim Installationsprozess fragt Dich die Angular CLI, ob Du Angular Routing brauchst:

    1. Gebe Y ein
    2. Wähle Sass als Stylesheet-Typ aus
      02 Neues Projekt Angular Tutorial Deutsch Steffen Lippke
  4. Gehe in das Verzeichnis mit
    cd myFirstApp
  5. Mit
    ng serve –open
    startest Du den Angular-Server und Dein Browser zeigt die App

Angulars Datei- und Ordner-Struktur erklärt

03 Aufbau der Angular App Angular Tutorial Deutsch Steffen Lippke
03 Aufbau der Angular App Angular Tutorial Deutsch Steffen Lippke
  • dist – enthält alle fertigen Web-Builds in reinem JavaScript.
    Du programmierst in TypeScript (einer verwandten Script-Sprache), welches der Compiler beim Builden in JavaScript übersetzt.
  • nodes_modules – alle JavaScript-Bibliotheken von NPM
  • src – Der wichtigste Ordner für das Entwicklen. Dort steht Dein TypeScript-Code. Dort befinden sich dort alle Bilder und CSS-Dateien.
  • app – Dieser Ordner enthält den wesentlichen Code für Deine App. Die Datei-Endungen stehen für...
    • .ts sind TypeScript-Dateien (Logik)
    • .css oder .scss sind Stylesheets (Aussehen)
    • .html ist das Grundgerüst (Elemente)
    • .json sind die Datengrundlage (Inhalte)
    • app-routing.module.ts – sorgt dafür, dass Du zu Den einzelnen SPA-Ansichten mit einer URL navigieren kannst.
    • modules.ts importiert die JavaScript Module, um die App zum Laufen zu bringen
    • assets – Kann Bilder, Icons und Schriftarten enthalten
  • index.html – Die zentrale HTML-Datei, wo alles zusammen läuft. Diese importiert das kompilierte JavaScript zu der Single App Application.
  • css – Globale Stylesheet für das gesamte Projekt

4. Kapitel

Coden: Ab zur Praxis

Coding und Umsetzung
Coding und Umsetzung

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

Jetzt wollen wir zusammen den ersten Code Zeilen für Angular schreiben.

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.

Die Besonderheit bei Angular sind die doppelte geschweifte 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.

Diese „Adjektive“ beschreiben einen HMTL-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 Zeilen 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 dieVariable title und cards (2D-Array)
    • Der Konstruktor lädt der Inhalte in die cards-Variable.
    • Die Funktion changeColors():
      • Zeilen X und Y sollen einen der JavaScript-Arrays mit einem neuen RGB-Code überschreiben
      • Die Math.random() Funktion erstellt 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)
NPM Module Angular Tutorial Deutsch Steffen Lippke
NPM Module Angular Tutorial Deutsch Steffen Lippke

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.

MongoDB Angular Tutorial Deutsch Steffen Lippke
MongoDB Angular Tutorial Deutsch Steffen Lippke

Die Karten enthalten einen Titel, Textinhalt und dessen Ausgangsfarbe.

5. Kapitel

Erweiterungen: Wie kann ich die App erweitern?

Erweiterungen und Weiterführendes
Erweiterungen und Weiterführendes

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.

06 App mit Random Farben Angular Tutorial Deutsch Steffen Lippke
06 App mit Random Farben Angular Tutorial Deutsch Steffen Lippke
09 Opimiert fürs IPhone Angular Tutorial Deutsch Steffen Lippke
09 Opimiert fürs IPhone Angular Tutorial Deutsch Steffen Lippke
  • Füge weiter Karten hinzu
  • Verändere die Styles nach Deinem Belieben
  • Lasse mit *ngIf Karten ein und ausblenden
  • Füge eine CSS-Animation ein z. B. eine Transition
  • Probiere ng-Bind

6. Kapitel

Fazit: Gratulation zu Deiner Angular App

Ziel und Fazit
Ziel und Fazit

Sei kreativ. Lese in der Doku. Teste Ionic.

Angular ist vielseitig und (nach einer Eingewöhnungsphase) schlank, flexibel und nützlich. Verpasse nicht die Chance neune 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

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY
1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4,70 out of 5)
Loading...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.