courseoutline_metadesc.tpl

Angular Single Page Application (SPA) Development (NGBASICS) – Details

Detaillierter Kursinhalt

Angular Introduction

Dieses Modul führt in das Angular Framework, seinen Technology Stack und die wesentlichen Tools für die Entwicklung ein. Es behandelt die Einrichtung der Development-Umgebung, die Verwendung der Angular CLI, das Debugging von Anwendungen und das Verständnis des Konfigurations- und Bootstrapping-Prozesses. Darüber hinaus enthält dieses Modul Anleitungen zur Wartung, Aktualisierung und Optimierung von Angular-Projekten mit Hilfe von GitHub Copilot.

  • Angular Introduction & Technology Stack: Überblick über das Angular Framework, seine Architektur und das umliegende Ökosystem an Tools und Bibliotheken.
  • Angular & CLI Essentials: Einrichten einer Development-Umgebung, Erstellen neuer Projekte, Verwenden der Angular CLI für gängige Aufgaben.
  • Debugging Angular: Techniken zum Identifizieren und Beheben von Problemen in Angular-Anwendungen, Verwendung von Browser-Developer-Tools und Angular-spezifischen Debuggern.
  • Configuration and Bootstrapping: Verständnis der Konfigurationsdateien und des Prozesses des Bootstrapping einer Angular-Anwendung.
  • Maintaining & Updating projects: Best Practices für die Wartung und Aktualisierung von Angular-Projekten, um sie effizient und sicher zu betreiben.
  • Use and optimize GitHub Copilot in Angular Projects: Nutzung von GitHub Copilot zur Verbesserung der Development-Produktivität, Code-Vorschläge und Generierung von Code-Snippets in Angular-Projekten.
TypeScript in the Angular Ecosystem

Dieses Modul untersucht die TypeScript-Sprache, eine Obermenge von JavaScript, und wie sie im Angular-Ökosystem verwendet wird. Es befasst sich mit den Besonderheiten der TypeScript-Syntax, einschliesslich Konstanten, Variablen und Utility Functions. Die Teilnehmer lernen, clientseitige Models mithilfe von Klassen, Interfaces und Types zu erstellen, sowie Best Practices für den Umgang mit Immutability und asynchronen Operationen mithilfe von Promises, Observables und Signals.

  • TypeScript Overview, ECMA Script Standards: Einführung in TypeScript, seine Vorteile und wie es sich auf ECMAScript-Standards bezieht.
  • Const, Variables, Utility Functions: Verständnis der korrekten Verwendung von Konstanten, Variablen und Utility Functions in TypeScript.
  • Client Side Models: Classes, Interfaces & Types: Erstellen von clientseitigen Models mithilfe von Klassen, Interfaces und Types, um Anwendungsdaten zu strukturieren.
  • Immutability, Cloning & Object Composition: Techniken für den Umgang mit Immutability, Cloning und Object Composition in TypeScript.
  • Async Operations using Promises, Observables, Signals: Verwaltung asynchroner Operationen mithilfe von Promises, Observables und Signals.
Services, Dependency Injection & Databinding

Dieses Modul konzentriert sich auf die Kernkonzepte von Dependency Injection, Services und Data Binding in Angular. Die Teilnehmer lernen, wie man Services erstellt und injiziert, um Datenanfragen zu verwalten, mit Templates, Directives und Event Binding zu arbeiten. Es behandelt verschiedene Formen des Data Bindings, einschliesslich Interpolation, Expressions, Attribute Binding und Two-Way Binding, sowie die Grundlagen der Change Detection.

  • Dependency Injection & Provides: Verständnis des Konzepts der Dependency Injection und wie man Provider in Angular konfiguriert.
  • Services & Data Request: Erstellen von Services zur Behandlung von Datenanfragen und Business-Logik, Förderung der Code-Wiederverwendbarkeit und der Trennung von Belangen.
  • Injecting Providers to Components: Wie man Services in Angular Components injiziert und sie verwendet, um Daten und Funktionalitäten zu teilen.
  • Templates & Directives & Event Binding: Verständnis von Angular Templates, Directives und Event Binding zum Erstellen interaktiver User Interfaces.
  • Interpolation, Expressions, Attribute- & Two-Way Binding: Verschiedene Arten des Data Bindings in Angular, einschliesslich Interpolation, Expressions, Attribute Binding und Two-Way Binding.
  • Data binding Observables & Signals: Data Binding in Angular, insbesondere bei der Arbeit mit Observables und Signals.
  • Introduction to Change Detection: Verständnis der Mechanismen der Change Detection in Angular und wie sie das Rendering der Benutzeroberfläche beeinflussen.
Completing Basic Tasks & Implementing Nested Components

Dieses Modul behandelt wesentliche Bausteine für das Erstellen dynamischer Angular-Anwendungen und konzentriert sich auf Control Flow, Pipes, Directives und die Implementierung von Nested Components. Die Teilnehmer lernen, integrierte Control-Flow-Strukturen und Deferrable Views zu verwenden, benutzerdefinierte Pipes und Directives zu erstellen und die Vorteile von Nested Components zu verstehen. Dieses Modul behandelt auch, wie man Components mit Container- und Presentation-Patterns richtig strukturiert, sie mit Signal Inputs und Model Outputs verschachtelt und mit View Queries auf View-Elemente zugreift.

  • Built-in Control Flow & Deferrable Views: Verwendung integrierter Control-Flow-Directives und Deferrable Views für bedingtes Rendering und optimiertes Laden.
  • Built-in and Custom Pipes & Directives: Erstellen und Verwenden integrierter und benutzerdefinierter Pipes und Directives zur Verbesserung der Template-Funktionalität.
  • Benefits of Nested Components: Verständnis der Vorteile der Erstellung von Nested Components für eine besser organisierte und wartbare Anwendung.
  • Container vs Presentational Components: Wie man Components mithilfe von Container- und Presentation-Patterns strukturiert, um Belange zu trennen.
  • Nesting Components using Signal inputs & model outputs: Erstellen von Nested Components mit Signal Inputs und Model Outputs für einen nahtlosen Datenfluss.
  • View Queries: viewChild, viewChildren: Zugriff auf Elemente innerhalb des Templates einer Component mithilfe von View Queries und deren Manipulation.
Routing & Lazy Loading

Dieses Modul befasst sich mit Navigations- und Component-Loading-Strategien in Angular. Die Teilnehmer lernen, wie man Routes einrichtet, mit Parameterized Routes arbeitet und Component-Inputs an Routendaten bindet. Dieser Abschnitt behandelt auch den Unterschied zwischen Modules und Standalone Components und wie man Lazy Loading für Modules und Components implementiert, um die Anwendungsleistung zu verbessern, indem nur benötigte Ressourcen bei Bedarf geladen werden. Zusätzlich werden Data Preloading-Techniken behandelt.

  • Routing & Navigation Basics: Einrichten von Routes und Navigation mithilfe des Angular Routers.
  • Working with Parameterized Routes: Erstellen von Routes mit dynamischen Parametern zur Verarbeitung datengesteuerter Navigation.
  • Component Input Bindings: Binden von Component Inputs an Routenparameter für dynamisches Component-Verhalten.
  • Modules vs Standalone Components: Verständnis der Unterschiede zwischen Modules und Standalone Components in Angular und wann man welches verwendet.
  • Lazy Loading Components and Modules: Implementierung von Lazy Loading für Modules und Components zur Verbesserung der Anwendungsleistung.
  • Data Preloading: Vorladen von Daten während der Navigation zur Verbesserung der User Experience.
Designing a responsive User Interface

Dieses Modul behandelt die Techniken zum Erstellen responsiver User Interfaces mithilfe von CSS und Angular Material. Es umfasst die Implementierung eines CSS Resets, die Anwendung globaler und Component-spezifischer Styles, die Verwendung von Media Queries für responsives Design und das Erstellen von Layouts mit Flexbox, CSS Grid und Areas. Die Teilnehmer lernen die Grundlagen von Angular Material, die Integration gängiger Controls und die Verwendung des Angular CDK zusammen mit 3rd-Party-Components für umfangreiche Anwendungserlebnisse.

  • Implementing a CSS Reset: Implementierung eines CSS Resets, um eine konsistente Gestaltung über verschiedene Browser hinweg sicherzustellen.
  • Global & Component Styles: Anwenden globaler und Component-spezifischer Styles für eine gut gestaltete Anwendung.
  • Responsive Web Design using Media Queries: Verwendung von Media Queries zur Erstellung eines responsiven User Interfaces, das sich an verschiedene Bildschirmgrössen anpasst.
  • Layout using Flexbox, CSS Grid and Areas: Implementieren von Layouts mithilfe von CSS Flexbox, Grid und Areas für komplexe User Interfaces.
  • Angular Material Overview: Einführung in Angular Material und seine Components zum Erstellen von User Interfaces.
  • Common controls: Tables, Dialogs & Form Controls ...: Verwenden gängiger Angular Material Components wie Tables, Dialogs und Form Controls.
  • Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...): Erkundung des Angular CDK und von 3rd-Party-Components für erweiterte Funktionalitäten wie Virtual Lists, Drag & Drop und Markdown-Rendering.
Reactive Forms Design & Validation

Dieses Modul konzentriert sich auf das Erstellen und Verwalten von Forms in Angular mithilfe des reaktiven Ansatzes. Es behandelt die Unterschiede zwischen Template-Driven und Reactive Forms und befasst sich mit den Besonderheiten von Reactive Forms mit FormBuilder und Typed Forms. Die Teilnehmer lernen, komplexe Forms mithilfe von FormControl, FormGroups und FormArrays zu erstellen und sowohl synchrone als auch asynchrone Form-Validation, einschliesslich Custom- und Code-Based Validators zu implementieren. Das Modul behandelt auch die Integration von Forms mit Signals für reaktives Datenmanagement.

  • Forms Introduction: Eine Einführung in Forms in der Webentwicklung und die verschiedenen Ansätze, die in Angular verwendet werden.
  • Template Driven Forms vs Reactive (Model Based) Forms: Unterschiede zwischen Template-Driven Forms und Reactive (Model-Based) Forms in Angular.
  • FormBuilder & Typed Forms (Nullability, Nested Objects, Arrays): Erstellen von Reactive Forms mithilfe von FormBuilder und Umgang mit Typed Forms mit Nullability, Nested Objects und Arrays.
  • FormControl, FormGroups & FormArrays: Verständnis und Verwendung von FormControl, FormGroup und FormArray zum Erstellen komplexer Forms.
  • Form Validation Basics (Synchronous / Asynchronous): Implementierung synchroner und asynchroner Validation für Form Controls.
  • Custom- & Code-Based Validators: Erstellen von Custom Validators und Code-Based Validators für spezifische Validationsszenarien.
  • Signals & FormControls: Integration von Signals mit FormControls für reaktives Formdatenmanagement.
Reactive Programming using Signals & RxJS

Dieses Modul führt in die Konzepte des Reactive Programming ein und wie man sie mithilfe von Signals und RxJS in Angular implementiert. Die Teilnehmer lernen die Unterschiede zwischen Imperative und Reactive Programming-Stilen kennen und wie man Observables, Observers und den Async Pipe verwendet. Es behandelt gängige RxJS-Operatoren, das Erfassen von DOM-Events als Observables und die Einführung von Signals für die Reaktivität. Die Teilnehmer lernen, Computed Signals, Linked Signals und Effects zu verwenden, sowie die Interoperabilität zwischen Observables und Signals zu verstehen.

  • What is Reactive Programming / Benefits: Verständnis des Reactive Programming und seiner Vorteile in modernen Webanwendungen.
  • Imperative vs Reactive Programming Styles: Unterscheidung zwischen Imperative und Reactive Programming-Stilen.
  • Observable, Observer, Async pipe & Unsubscribing: Verständnis von Observables, Observers, dem Async Pipe und korrekten Unsubscription-Techniken.
  • Common RxJS Operators: Erkundung gängiger RxJS-Operatoren zur Manipulation und Transformation von Datenströmen.
  • Capturing Mouse & DOM Events as Observables: Wie man Mouse- und DOM-Events als Observables für interaktive Anwendungen erfasst.
  • Introduction to Signals: Einführung in Signals in Angular, einem neuen Ansatz für reaktives State Management.
  • Computed-, Linked-Signals & Effects: Verwendung von Computed Signals, Linked Signals und Effects für komplexe reaktive Szenarien.
  • Observable & Signal Interoperability: Verständnis der Interoperabilität zwischen Observables und Signals.
Managing Client State & Sharing Events

Dieses Modul untersucht das State Management in Angular-Anwendungen und konzentriert sich auf Optionen mit Signals und Observables. Die Teilnehmer lernen, den State mithilfe von Stateful Services mit Signals zu verwalten. Es behandelt das Teilen von Events zwischen Components und bietet eine Einführung in den Signal Store als robuste State Management-Lösung.

  • What is State Management: Verständnis des Konzepts des State Managements in Angular-Anwendungen.
  • State Management Options: Signals vs Observables: Vergleich der State Management-Optionen mit Signals gegenüber Observables.
  • Stateful Services using Signals: Verwalten des States mithilfe von Stateful Services mit Signals für reaktives Datenmanagement.
  • Sharing Events between Components: Methoden zum Teilen von Events zwischen Components in einer Angular-Anwendung.
  • Introduction to Signal Store: Einführung in Signal Store als State Management-Lösung.
Testing Angular Applications

Dieses Modul befasst sich mit den verschiedenen Testing-Strategien für Angular-Anwendungen, einschliesslich Unit- und Component Testing. Die Teilnehmer lernen, wie man Classes, Directives und Pipes testet, sowie wie man Component Injections für isoliertes Testing mocken und spionieren kann. Es behandelt DOM Testing mithilfe von Test IDs und Component Interaction Testing. Darüber hinaus untersucht dieses Modul das Testen von Nested Components und Material Components mithilfe von Component Harnesses. Es konzentriert sich auch auf die Verwendung von GitHub Copilot zum Generieren und Verbessern von Tests.

  • Angular Testing Options: Überblick über die Testing-Optionen, die für Angular-Anwendungen verfügbar sind.
  • Testing Classes, Directives and Pipes: Schreiben von Tests für Classes, Directives und Pipes mithilfe der Angular Testing Utilities.
  • Component Injections, Mocks & Spies: Verwenden von Dependency Injection, Mocks und Spies in Tests, um das Component-Verhalten zu isolieren.
  • Component DOM testing & Test Ids: Testen der DOM-Struktur der Component und der Zugänglichkeit mit Test IDs.
  • Testing Component Interaction (Read, Write, Inputs, Events): Testen der Interaktionen mit Component Inputs, Outputs und Events.
  • Testing Nested Components: Strategien zum Testen von Nested Components und deren Interaktionen.
  • Material Testing using Component Harnesses: Testen von Material Components mithilfe von Component Harnesses.
  • Implement Tests using GitHub Copilot: Nutzung von GitHub Copilot für die effiziente Implementierung von Tests.
  • Using GitHub Copilot TestGeneration Instructions: So verwenden Sie GitHub Copilot, um Testspezifikationen für Code Snippets zu erstellen.
Securing & Publishing Angular

Dieses Modul konzentriert sich auf die Sicherung und Bereitstellung von Angular-Anwendungen. Es behandelt die Grundlagen der Authentication und Authorization in SPAs (Single Page Applications), die Token-basierte Authentication mithilfe von JWT, OAuth 2.0 und OpenID Connect. Die Teilnehmer lernen, Responses zu beobachten, benutzerdefinierte HTTP-Header zu setzen, Interceptors zum Hinzufügen von Authentication Tokens zu verwenden, Route Guards zu implementieren und verschiedene Hosting-Optionen sowie den Veröffentlichungsprozess für Angular-Apps zu verstehen.

  • Authentication / Authorization Basics in Spa’s: Verständnis von Authentication und Authorization in Single Page Applications.
  • Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect: Token-basierte Authentication und die Verwendung von JWT, OAuth 2.0 und OpenID Connect.
  • Observe Response and Setting Custom Http Headers: Beobachten von Responses und Setzen benutzerdefinierter HTTP-Header.
  • Using Interceptors to add Authentication Tokens: Verwenden von Interceptors zum Hinzufügen von Authentication Tokens zu HTTP-Anfragen.
  • Angular Routes & Functional Route Guards: Schützen von Routes mit Functional Route Guards.
  • Hosting Options Overview: Überblick über verschiedene Hosting-Optionen zum Bereitstellen von Angular-Anwendungen.
  • Publishing Angular Apps: So erstellen und veröffentlichen Sie Angular-Anwendungen für Produktionsumgebungen.