Angular Single Page Application Development

Im Training “Angular Single Page Application Development” vermitteln wir die grundlegenden Fähigkeiten, um “Single Page Applications” (SPAs) mit Angular implementieren zu können. Dabei legen wir großen Wert darauf, in den Demos und Labs aktuelle Coding-Styles und Patterns zu verwenden.
 
Wir starten mit der Projektkonfiguration und den essenziellen Grundlagen von Angular, wie beispielsweise Angular CLI und Databinding. Anschließend vertiefen wir unser Wissen in diesen Grundlagen und widmen uns schließlich allen Aspekten des Angular-Ökosystems. Dazu gehören Routing, responsives UI-Design, reaktive Programmierung, Testing, Authentifizierung und Veröffentlichung.
 
Nach Abschluss dieses Trainings haben die Teilnehmer Kenntnisse zu folgenden Themen: 

• Verständnis des Angular Technologie Stacks und Anwendung der Angular CLI.
• Anwendung von TypeScript und Umgang mit asynchronen Operationen, Observables und Signals.
• Durchführung von Databinding und grundlegenden Aufgaben.
• Implementierung verschachtelter Komponenten.
• Verwendung von Routing und Dependency Injection.
• Erstellung einer responsiven Benutzeroberfläche.
• Anwendung von Reactive Forms und Validierung.
• Einführung in reaktive Programmierung mit Signals und RxJS.
• State Management und Event-Sharing.
• Grundlagen des Testens: Unit Tests, Component Tests, E2E Tests.
• Authentifizierung und Veröffentlichung von Angular Apps .

 
Neue Themengebiete werden anhand von Folien und Demos erarbeitet. Am Ende der Module werden die erlernten Inhalte in eine durchgängige Anwendung integriert, welches am Ende in die Cloud publiziert werden kann. Die Labs liegen sowohl in Module- als auch Standalone-Pattern vor.

• Web Entwickler*innen welche Angular Anwendungen entwickeln möchten.

• JavaScript und HTML Basics (Besuch des Seminars: SD-HTML5 Programming HTML5, JavaScript and CSS3)
• Erfahrung mit Web Development
• Kenntnis von Objektorientierten Sprachen
• Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ..) hilfreich. Diese werden im Kurs Advanced Web Technologies vermittelt.

Angular Introduction

• TypeScript in the Angular Ecosystem
• Databinding & Completing Basic Tasks
• Implementing Nested Components
• Routing & Dependency Injection
• Designing a responsive User Interface
• Forms Design & Validation
• Reactive Programming using Signals & RxJS
• Managing client State & Sharing Events
• Testing Angular Applications
• Securing & Publishing Angular  

Angular Introduction 

• Angular Introduction & Technology Stack
• Angular CLI Essentials
• Debugging Angular
• Bootstrapping & Configuration
• Maintaining & Updating projects 

TypeScript in the Angular Ecosystem

• TypeScript Overview, ECMA Script Standards
• Types, Variables, Literal Types, Functions
• Objects, Classes, Interfaces
• Immutability, Cloning & Object Composition
• Async Operations, Observables & Signals
• Calculated Signals & Effects 

Databinding & Completing Basic Tasks

• Components & Dependency Injection
• Services & Data Request
• Expressions, Templates & Directives
• String Interpolation, Attribute- & Event-Binding, Two-Way Binding
• Built-in Control Flow & Deferrable Views
• Data binding Observables & Signals
• Built in and Custom Pipes & Directives 

Implementing Nested Components

• Benefits of Nested Components
• Container vs Presentational Components
• Data binding & Events using @Input & @Output
• Nesting using Signal inputs & model outputs
• View Child, View Children & Signal Queries 

Routing & Dependency Injection

• Register Providers & Dependency Injection
• Routing & Navigation Basics
• Working with Parameterized Routes
• Component Input Bindings
• Modules vs Standalone Components
• Modules Use Cases & Lazy Loading
• Route Guards & Data Preloading 

Designing a responsive User Interface

• Implementing a CSS Reset
• Global & Component Styles
• Responsive Web Design using Media Queries
• Layout using Flexbox, CSS Grid and Areas
• Angular Material Overview
• Common controls: Tables, Dialogs & Form Controls ...
• Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...) 

Reactive Forms Design & Validation

• Forms Introduction
• Template Driven Forms vs Reactive (Model Based) Forms
• FormBuilder & Typed Forms (Nullability, Nested Objects, Arrays)
• FormControl, FormGroups & FormArrays
• Form Validation Basics (Synchronous / Asynchronous)
• Custom- & Code-Based Validators
• Signals & FormControls 

Reactive Programming using Signals & RxJS

• What is Reactive Programming / Benefits
• Imperative vs Reactive Programming Styles
• Observable, Observer, Async pipe & Unsubscribing
• Common RxJS Operators
• Creating Observables & Casting to Observables
• Capturing Mouse & DOM Events as Observables
• Observable & Signal Interoperability 

Managing client State & Sharing Events

• What is State Management
• State Management Options: Signals vs Observables
• Stateful Services using Signals
• Sharing Events between Components

 
Testing Angular Applications

• Angular Testing Options
• Testing Classes, Directives and Pipes
• Component Injections, Mocks & Spies
• Component DOM testing & test ids
• Testing Component Interaction (Read, Write, Inputs, Events)
• Material Testing using Component Harnesses
• In Short: End to End Testing using Cypress 

Securing & Publishing Angular

• Authentication / Authorization Basics in Spa’s
• Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect
• Observe Response and Setting Custom Http Headers
• Using Interceptors to Automate Authentication Tokens
• Angular Routes & functional Route Guards
• Hosting Options Overview (Docker, Firebase, Azure Static Web App, …)
• Publishing Angular Apps