NGBASICS - Angular Single Page Application (SPA) Development - Online Training - Webinar von Fast Lane Institute for Knowledge Transfer

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

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

• 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

• 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

• 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

• 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, ...)

• 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

• 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

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

• 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

• 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

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.