
Einstieg in Angular
So baust du eine Single Page Application mit Angular
Nächstes Kapitel in
Eine strukturierte Einführung in das Frontend Framework
Um heutzutage skalierbare und robuste Frontend-Applikationen zu entwickeln, sind Frameworks wie Angular essentiell. Angular setzt hierbei auf die modernsten Web-Technologien und Best Practices im Umgang mit Nutzerinteraktionen und dem Nachladen von Daten.
Steige zusammen mit Google Developer Expert Martina Kraus, in die Entwicklung einer Single Page Application mit Angular ein. In diesem Tutorial lernst du schrittweise die Projektstruktur, sowie alle wichtigen Bausteine wie beispielsweise Komponenten, Pipes und Direktiven, einer Angular Anwendung kennen.
Im weiteren Verlauf erhältst du einen guten Überblick über Services in Angular um darauffolgend die ersten Http-Requests an einen Web-Services zu versenden. Ebenfalls beleuchten wir das entsprechende Routing Paket, das Angular dir zur Verfügung stellt, um dich durch eine Frontend-Applikation zu navigieren.
Abgerundet wird das Tutorial mit der Erstellung eines Formulars, bestehend aus mehreren Input-Feldern.
Am Ende des Tutorials wirst du dir einen sehr guten Überblick über alle Grundkonzepte in der Entwicklung mit Angular angeeignet haben, sodass du direkt deine eigenen Frontend-Applikationen mit Angular entwickeln kannst.



Optimaler Einstieg

Individuelle Meilensteine

Praxisnahes Expertenwissen
Diese Themen erwarten dich im Tutorial
Teil 1: Was ist Angular - erster Start mit Angular Components
- Was ist Angular und warum sollte ich Angular nutzen?
- Anlegen eines Angular Projektes mit Hilfe der Angular CLI
- Projektstruktur und Konventionen
- Die erste Komponente
- Data bindings
Teil 2: Angular Services (Angular Dependency Injection)
- Die Angular Dependency Injection
- Anlegen von Angular Services
- Observables und RxJS
- Http Requests absenden
Teil 3: Angular Routing - Navigation in einer Angular Applikation
- Kreieren einer Navigations Struktur
- Registrieren der Routen in einer Angular Application
- Beschützen der Routen mit Route Guards
Teil 4: Angular Forms - Formular in einer Angular Applikation
- Anlegen von Formularen in einer Komponente
- Form Validierung
- Definieren von eigenen Validatoren
Teil 5: Nutzung der neuen Standalone API
- Einführung in die neue Standalone API
- Standalone Components
- Mischbetrieb von Standalone Components in bestehenden Angular Modulen
- Migration einer bestehenden Applikation

Lerne unsere Expertin kennen
Martina Kraus
Schon seit frühen Jahren beschäftigt sich Martina Kraus mit der Webentwicklung. Das Umsetzen großer Softwarelösungen in Node. js und Angular hat sie schon immer begeistert. Neben ihrer Tätigkeit als Privatdozentin im Bereich Webentwicklung an der Hochschule Mannheim arbeitet sie hauptberuflich als Softwareentwicklerin, vornehmlich mit Angular und C++. In ihrer Rolle als Google Developer Expert (GDE) liebt sie es, das Wissen rund um Angular darüber hinaus auf nationalen und internationalen Konferenzen zu verbreiten, organisiert sie regelmäßig ngGirls Events (freie Angular-Workshops für Frauen) und das lokale Angular Heidelberg Meetup.
So kannst du teilnehmen
Du hast bereits Fullstack?
Schnapp dir was zu schreiben und lehn dich zurück. Komme hier direkt zum Fullstack Tutorial und profitiere vom wegweisenden Wissen unseres Experten.
Du hast noch kein Fullstack?
Fullstack-Abonnent:innen haben kostenlosen Zugriff auf das Video-Turorial. Zusätzlich haben Fullstack-Abonnent:innen Zugriff auf Live-Event, Aufzeichnungen und vielen weiter Vorteile.
Für Unternehmen mit mehr als 16 Lizenzen
Wir unterstützen Gewinner-Teams als Softwarelösung bei der digitalen Transformation mit einem einzigartigen Software Know-how Stream, indem wir deinem Team das Wissen und die Zuversicht vermitteln, die es für den Erfolg braucht.
Mit Elevate bieten wir dir und deinem Team jetzt den direkten Zugang zu Team Exzellenz.
Alle Inhalte im Überblick
BASIC
FULLSTACK
FULLSTACK TEAM
Fullstack Read
Fullstack Live-Events
Fullstack Tutorials
Add-ons: Bis zu 25 % Rabatt auf Konferenzen & Trainingsevents
Add-ons: Bis zu 25 % Rabatt auf Akademie Camps & FLEX Camps
Deine Features
BASIC
FULLSTACK
FULLSTACK TEAM
Notizen
Sammlungen
AI-Suche AskFrank
Kuratierte Themenhighlights
Live Chat
Direkt Chat
Rabatte für Conferences, Training Events & Akademie Events
6 Monate Zugriff auf die Videoaufzeichnungen von deinen Conferences
Zertifikate für die Teilnahme an Conferences, Training Events & Akademie Events
Slides bei Teilnahme an Konferenzen und Akademie Events
Kein Administrationsaufwand
Account Manager für alle Fragen
Alle Inhalte im Überblick
BASIC
FULLSTACK
FULLSTACK TEAM
Fullstack Read
Fullstack Live-Events
Fullstack Tutorials
Add-ons: Bis zu 25 % Rabatt auf Konferenzen & Trainingsevents
Add-ons: Bis zu 25 % Rabatt auf Akademie Camps & FLEX Camps
Deine Features
BASIC
FULLSTACK
FULLSTACK TEAM
Notizen
Sammlungen
AI-Suche AskFrank
Kuratierte Themenhighlights
Live Chat
Direkt Chat
Rabatte für Conferences, Training Events & Akademie Events
6 Monate Zugriff auf die Videoaufzeichnungen von deinen Conferences
Zertifikate für die Teilnahme an Conferences, Training Events & Akademie Events
Slides bei Teilnahme an Konferenzen und Akademie Events
Kein Administrationsaufwand
Account Manager für alle Fragen