Zielgruppe
Dieses Seminar richtet sich an Web Entwickler welche Angular Anwendungen entwickeln möchten.
Voraussetzungen
- JavaScript und HTML Basics (Kurs: Programming HTML5, JavaScript and CSS3)
- Erfahrung mit Web Development
- Kenntnis von Objektorientierten Sparchen
- Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ...) hilfreich. Diese werden im Kurs Advanced Web Technologies (webADV) vermittelt.
Kursziele
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.
Weiterführende Kurse
Kursinhalt
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 http-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
Deutsch
Deutschland
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 grossen 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. Anschliessend vertiefen wir unser Wissen in diesen Grundlagen und widmen uns schliesslich allen Aspekten des Angular-Ökosystems. Dazu gehören Routing, responsives UI-Design, reaktive Programmierung, Testing, Authentifizierung und Veröffentlichung.