Angular Tutorial - Verstehen was Angular ist

Angular Tutorial- Eine Einführung

In diesem Tutorial erklärt Manfred Steyer alles, was man für einen professionellen Umgang mit Angular benötigt und zeigt anhand eines praxisnahen Beispiels, wie man Services und Dependency Injection integriert, Pipes zur Formatierung von Ausgaben nutzt, Komponenten mit Bindings verwendet, Angular-Anwendungen mit Modulen strukturiert und Routing gebraucht.

Lernziele

Ziel des Angular Tutorials ist es, Ihnen Angular und die dahinter stehenden Konzepte nahezubringen. Gleichzeitig sollen Sie durch erste kleine Anwendungen lernen, wie diese Konzepte genutzt werden können.

Vorbereitungen für den Projektstart
Gratis ansehen15 Minuten
- Einführung
  
  02:29
- Übersicht über die Lesson
  
  00:35
- Vorteile von Angular: Plattformen und Usability
  
  01:01
- Vorteile einer Single Page Application
  
  01:02
- Die Komplexität von JavaScript und HTML
  
  00:40
- Warum sollte man Angular benutzen?
  
  02:48
- Was ist Angular?
  
  02:01
- Mögliche Programmiersprachen für Angular
  
  02:19
- Aufbau von Komponenten in Angular
  
  04:26
- Dekoratoren in der Komponente
  
  01:46
- Das Schlüsselwort „export“
  
  00:55
- Das Schlüsselwort „import“
  
  01:30
- Das Template
  
  01:38
- Der genaue Aufbau eines Templates
  
  04:25
- Anwendungen als Komponentenbaum
  
  02:57
- Module und Bootstrapping
  
  01:37
- Aufbau der Module
  
  02:22
- Bootstrapping durchführen
  
  02:44
- Möglichkeiten für einen Projektstart
  
  03:17
- Angular CLI
  
  01:54
- Die typische Projektstruktur einer Angular-Anwendung
  
  03:04
- Set-up für das Projekt
  
  02:45
- Eine neue Anwendung generieren
  
  02:31
- Das Projekt in Visual Studio Code
  
  07:48
- Installation von Twitter Boostrap
  
  04:21
Entwicklung der ersten Komponente
- Entwicklung einer ersten Angular-Komponente
  
  09:25
- „Search“-Methode einfügen
  
  03:10
- Das passende Template erstellen
  
  08:05
- Die „ngClass“-Erweiterung
  
  01:35
- Registrierung der Komponente im Modul
  
  01:40
- Test der Anwendung im Browser
  
  01:45
- Format der „Active“-Class verändern
  
  02:28
- Der HTTP-Service in Angular
  
  06:27
- Die HTTP-Response
  
  01:30
- Observables und Observer
  
  05:50
- Erweiterung der “Search”-Methode
  
  06:52
- Debuggen von TypeScript
  
  03:31
Services und Dependency Injection
- Einführung
  
  00:24
- Was sind Services?
  
  01:24
- Einen klassenbasierten Service schreiben
  
  01:25
- Injizierung eines Service
  
  02:22
- Darstellung eines Tokens
  
  01:31
- Einen Service global registrieren
  
  02:07
- Services lokal registrieren
  
  03:10
- Einen eigenen Service schreiben und registrieren
  
  06:32
- Ausführung der Anwendung und Fehleranalyse
  
  00:56
- Registrierung mit einem Token
  
  01:35
- Platzieren von Breakpoints
  
  03:29
- Mögliche Kurzschreibweisen
  
  00:50
- Lokale Registrierung
  
  01:07
Pipes zur Formatierung von Ausgaben
- Einführung
  
  00:18
- Übersicht zu Pipes
  
  01:50
- Build-in Pipes
  
  00:55
- Pure Pipes
  
  01:59
- Eine Pipe deklarieren und registrieren
  
  02:42
- Eine eigene Pipe schreiben
  
  05:44
- Registrierung und Verwendung der Pipe
  
  02:16
Komponenten mit Bindings
- Einführung
  
  00:29
- Eine „Flug“-Card erstellen
  
  03:09
- Verwendung der „Flug“-Card
  
  03:50
- Template für die „Flug“-Card
  
  02:48
- Eine „Flug“-Card Komponente in Visual Studio Code erstellen
  
  03:29
- Das Template erstellen
  
  02:34
- HTML-Element für die „Flug“-Card einfügen
  
  01:40
- Die „Flug“-Card im Browser
  
  00:53
- Erweiterung des Warenkorbs
  
  04:00
- Event-Binding
  
  04:13
- Implementierung eines Events
  
  02:17
- Two-Way-Bindings
  
  03:37
- Eine Komponente Two-Way-Binding verwenden
  
  01:57
- Größe der Cards anpassen
  
  05:42
- Abstand der Cards anpassen
  
  01:55
- Life Cycle Hooks: Definition und Typen
  
  02:31
- Nutzung von Life Cycle Hooks
  
  01:04
- Life-Cycle-Hooks-Implementierung in der Demo
  
  05:52
Angular-Anwendungen mit Modulen strukturieren
- Einführung
  
  00:17
- Das AppModule
  
  01:28
- Typische Modulstruktur
  
  02:01
- Das SharedModule
  
  02:12
- Das FeatureModule
  
  01:59
- Das RootModule
  
  01:08
- Anwendung auf verschiedene Module aufteilen
  
  07:55
Navigationsstrukturen mit Routing
- Einführung
  
  00:23
- Überblick zu Routing – Motivation
  
  01:44
- Routing unter Angular
  
  00:53
- Routen via Hash-Fragment
  
  00:45
- Routen via History API
  
  03:45
- Parameter
  
  02:13
- Den Angular Router nutzen – Konfiguration
  
  04:57
- AppComponent
  
  03:11
- Programmatisch routen
  
  00:49
- Demo: Navigationsstrukturen mit dem Router umsetzen
  
  15:46
- Demo: Routing und Module
  
  04:41
- Routen mit Parametern
  
  03:28
- Demo: Routing um Parameter erweitern
  
  09:51
- Demo: Eine Detailansicht implementieren
  
  18:40

Technische Voraussetzungen zum Nachbauen der Anwendungen:

Node.js LTS
Visual Studio Code

Angular – Eine Einführung – 15 Minuten gratis

Angular Tutorial- Eine Einführung

Lernziele

keyboard_arrow_rightVorbereitungen für den Projektstart

Einführung 02:29

Übersicht über die Lesson 00:35

Vorteile von Angular: Plattformen und Usability 01:01

Vorteile einer Single Page Application 01:02

Die Komplexität von JavaScript und HTML 00:40

Warum sollte man Angular benutzen? 02:48

Was ist Angular? 02:01

Mögliche Programmiersprachen für Angular 02:19

Aufbau von Komponenten in Angular 04:26

Dekoratoren in der Komponente 01:46

Das Schlüsselwort „export“ 00:55

Das Schlüsselwort „import“ 01:30

Das Template 01:38

Der genaue Aufbau eines Templates 04:25

Anwendungen als Komponentenbaum 02:57

Module und Bootstrapping 01:37

Aufbau der Module 02:22

Bootstrapping durchführen 02:44

Möglichkeiten für einen Projektstart 03:17

Angular CLI 01:54

Die typische Projektstruktur einer Angular-Anwendung 03:04

Set-up für das Projekt 02:45

Eine neue Anwendung generieren 02:31

Das Projekt in Visual Studio Code 07:48

Installation von Twitter Boostrap 04:21

keyboard_arrow_rightEntwicklung der ersten Komponente

Entwicklung einer ersten Angular-Komponente 09:25

„Search“-Methode einfügen 03:10

Das passende Template erstellen 08:05

Die „ngClass“-Erweiterung 01:35

Registrierung der Komponente im Modul 01:40

Test der Anwendung im Browser 01:45

Format der „Active“-Class verändern 02:28

Der HTTP-Service in Angular 06:27

Die HTTP-Response 01:30

Observables und Observer 05:50

Erweiterung der “Search”-Methode 06:52

Debuggen von TypeScript 03:31

keyboard_arrow_rightServices und Dependency Injection

Einführung 00:24

Was sind Services? 01:24

Einen klassenbasierten Service schreiben 01:25

Injizierung eines Service 02:22

Darstellung eines Tokens 01:31

Einen Service global registrieren 02:07

Services lokal registrieren 03:10

Einen eigenen Service schreiben und registrieren 06:32

Ausführung der Anwendung und Fehleranalyse 00:56

Registrierung mit einem Token 01:35

Platzieren von Breakpoints 03:29

Mögliche Kurzschreibweisen 00:50

Lokale Registrierung 01:07

keyboard_arrow_rightPipes zur Formatierung von Ausgaben

Einführung 00:18

Übersicht zu Pipes 01:50

Build-in Pipes 00:55

Pure Pipes 01:59

Eine Pipe deklarieren und registrieren 02:42

Eine eigene Pipe schreiben 05:44

Registrierung und Verwendung der Pipe 02:16

keyboard_arrow_rightKomponenten mit Bindings

Einführung 00:29

Eine „Flug“-Card erstellen 03:09

Verwendung der „Flug“-Card 03:50

Template für die „Flug“-Card 02:48

Eine „Flug“-Card Komponente in Visual Studio Code erstellen 03:29

Das Template erstellen 02:34

HTML-Element für die „Flug“-Card einfügen 01:40

Die „Flug“-Card im Browser 00:53

Erweiterung des Warenkorbs 04:00

Event-Binding 04:13

Implementierung eines Events 02:17

Two-Way-Bindings 03:37

Eine Komponente Two-Way-Binding verwenden 01:57

Größe der Cards anpassen 05:42

Abstand der Cards anpassen 01:55

Vorbereitungen für den Projektstart

Einführung

02:29

Übersicht über die Lesson

00:35

Vorteile von Angular: Plattformen und Usability

01:01

Vorteile einer Single Page Application

01:02

Die Komplexität von JavaScript und HTML

00:40

Warum sollte man Angular benutzen?

02:48

Was ist Angular?

02:01

Mögliche Programmiersprachen für Angular

02:19

Aufbau von Komponenten in Angular

04:26

Dekoratoren in der Komponente

01:46

Das Schlüsselwort „export“

00:55

Das Schlüsselwort „import“

01:30

Das Template

01:38

Der genaue Aufbau eines Templates

04:25

Anwendungen als Komponentenbaum

02:57

Module und Bootstrapping

01:37

Aufbau der Module

02:22

Bootstrapping durchführen

02:44

Möglichkeiten für einen Projektstart

03:17

Angular CLI

01:54

Die typische Projektstruktur einer Angular-Anwendung

03:04

Set-up für das Projekt

02:45

Eine neue Anwendung generieren

02:31

Das Projekt in Visual Studio Code

07:48

Installation von Twitter Boostrap

04:21

Entwicklung der ersten Komponente

Entwicklung einer ersten Angular-Komponente

09:25

„Search“-Methode einfügen

03:10

Das passende Template erstellen

08:05

Die „ngClass“-Erweiterung

01:35

Registrierung der Komponente im Modul

01:40

Test der Anwendung im Browser

01:45

Format der „Active“-Class verändern

02:28

Der HTTP-Service in Angular

06:27

Die HTTP-Response

01:30

Observables und Observer

05:50

Erweiterung der “Search”-Methode

06:52

Debuggen von TypeScript

03:31

Services und Dependency Injection

Einführung

00:24

Was sind Services?

01:24

Einen klassenbasierten Service schreiben

01:25

Injizierung eines Service

02:22

Darstellung eines Tokens

01:31

Einen Service global registrieren

02:07

Services lokal registrieren

03:10

Einen eigenen Service schreiben und registrieren

06:32

Ausführung der Anwendung und Fehleranalyse

00:56

Registrierung mit einem Token

01:35

Platzieren von Breakpoints

03:29

Mögliche Kurzschreibweisen

00:50

Lokale Registrierung

01:07

Pipes zur Formatierung von Ausgaben

Einführung

00:18

Übersicht zu Pipes

01:50

Build-in Pipes

00:55

Pure Pipes

01:59

Eine Pipe deklarieren und registrieren

02:42

Eine eigene Pipe schreiben

05:44

Registrierung und Verwendung der Pipe

02:16

Komponenten mit Bindings

Einführung

00:29

Eine „Flug“-Card erstellen

03:09

Verwendung der „Flug“-Card

03:50

Template für die „Flug“-Card

02:48

Eine „Flug“-Card Komponente in Visual Studio Code erstellen

03:29

Das Template erstellen

02:34

HTML-Element für die „Flug“-Card einfügen

01:40

Die „Flug“-Card im Browser

00:53

Erweiterung des Warenkorbs

04:00

Event-Binding

04:13

Implementierung eines Events

02:17

Two-Way-Bindings

03:37

Eine Komponente Two-Way-Binding verwenden

01:57

Größe der Cards anpassen

05:42

Abstand der Cards anpassen

01:55

Life Cycle Hooks: Definition und Typen

02:31

Nutzung von Life Cycle Hooks

01:04

Life-Cycle-Hooks-Implementierung in der Demo

05:52