Einstieg in Angular

So baust du eine Single Page Application mit Angular

  • Tutorial
  • Web Development
mit Martina Kraus
★★★★★ 4.5/5
Kostenlos anmelden
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.
Video abspielen

Das wirst du lernen

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.

Inhalte

In  der 1. Lektion entwickeln wir ein einfaches Programmierbeispiel (TicTacToe) in C# mit Hilfe von GitHub Copilot. Sie erhalten Tipps, welche Vorgehensweisen am besten funktionieren und welche zu weniger guten Ergebnissen führen. Auch sehen wir uns die von GitHub Copilot gebotenen Funktionen im Überblick an, vergleichen die Preis- und Lizenzmodelle und probieren die Copilot CLI aus.

Die 2. Lektion führt in GitHub Copilot Chat ein. Wir probieren das Werkzeug im Rahmen der Konfiguration einer TypeScript-Anwendung aus.Außerdem erstellen wir mit GitHub Copilot Chat und Code Completion ein Beispiel mit einer etwas komplexeren Datenstruktur und einem nicht trivialen, rekursiven Algorithmus. Dabei lernen wir Techniken für den Einsatz von GitHub Copilot Chat in der Praxis kennen.

In der 3. Lektion konzentrieren wir uns auf das Generieren automatischer Unit-Tests mit GitHub Copilot Chat und Code Completion. Diese zeigt am Beispiel von SQL Common Table Expressions, wie man mit GitHub Copilot Chat Lösungsansätze für Probleme erarbeitet und dabei die KI als „Brainstorming-Partner“ verwendet.

In der vierten und letzten Lektion verlassen wir die Welt von GitHub Copilot und erkunden, was ChatGPT Plus im Softwareentwicklungsprozess einbringen kann. Nach ein wenig Prompt Design steht vor allem der Code Interpreter im Mittelpunkt.

– 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

– Die Angular Dependency Injection

– Anlegen von Angular Services

– Observables und RxJS

– Http Requests absenden

– Kreieren einer Navigations Struktur

– Registrieren der Routen in einer Angular Application

– Beschützen der Routen mit Route Guards

– Anlegen von Formularen in einer Komponente

– Form Validierung

– Definieren von eigenen Validatoren

– Einführung in die neue Standalone API

– Standalone Components

– Mischbetrieb von Standalone Components in bestehenden Angular Modulen

– Migration einer bestehenden Applikation

Die Expertin

 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.

Bereit für deine Fullstack Experience?

Beginne jetzt

Kostenlose Expertenberarung zu eurer Weiterbildung

Erhaltet eine exklusive und kostenlose Beratung von unseren Weiterbildungsexperten. Mach dein Team zum Gewinnerteam!