{"course":{"productid":23413,"modality":1,"active":true,"language":"de","title":"Angular Single Page Application (SPA) Development","productcode":"NGBASICS","vendorcode":"FL","vendorname":"Fast Lane","fullproductcode":"FL-NGBASICS","courseware":{"has_ekit":true,"has_printkit":false,"language":""},"url":"https:\/\/portal.flane.ch\/course\/training-ngbasics","contents":"<ul>\n<li>Angular Introduction<\/li><li>TypeScript in the Angular Ecosystem<\/li><li>Services, Dependency Injection &amp; Databinding<\/li><li>Completing Basic Tasks &amp; Implementing Nested Components<\/li><li>Routing &amp; Lazy Loading<\/li><li>Designing a responsive User Interface<\/li><li>Reactive Forms Design &amp; Validation<\/li><li>Reactive Programming using Signals &amp; RxJS<\/li><li>Managing Client State &amp; Sharing Events<\/li><li>Testing Angular Applications<\/li><li>Securing &amp; Publishing Angular<\/li><\/ul>","outline":"<h5>Angular Introduction<\/h5><p>Dieses Modul f&uuml;hrt in das Angular Framework, seinen Technology Stack und die wesentlichen Tools f&uuml;r die Entwicklung ein. Es behandelt die Einrichtung der Development-Umgebung, die Verwendung der Angular CLI, das Debugging von Anwendungen und das Verst&auml;ndnis des Konfigurations- und Bootstrapping-Prozesses. Dar&uuml;ber hinaus enth&auml;lt dieses Modul Anleitungen zur Wartung, Aktualisierung und Optimierung von Angular-Projekten mit Hilfe von GitHub Copilot.<\/p>\n<ul>\n<li><strong>Angular Introduction &amp; Technology Stack:<\/strong> &Uuml;berblick &uuml;ber das Angular Framework, seine Architektur und das umliegende &Ouml;kosystem an Tools und Bibliotheken.<\/li><li><strong>Angular &amp; CLI Essentials:<\/strong> Einrichten einer Development-Umgebung, Erstellen neuer Projekte, Verwenden der Angular CLI f&uuml;r g&auml;ngige Aufgaben.<\/li><li><strong>Debugging Angular:<\/strong> Techniken zum Identifizieren und Beheben von Problemen in Angular-Anwendungen, Verwendung von Browser-Developer-Tools und Angular-spezifischen Debuggern.<\/li><li><strong>Configuration and Bootstrapping:<\/strong> Verst&auml;ndnis der Konfigurationsdateien und des Prozesses des Bootstrapping einer Angular-Anwendung.<\/li><li><strong>Maintaining &amp; Updating projects:<\/strong> Best Practices f&uuml;r die Wartung und Aktualisierung von Angular-Projekten, um sie effizient und sicher zu betreiben.<\/li><li><strong>Use and optimize GitHub Copilot in Angular Projects:<\/strong> Nutzung von GitHub Copilot zur Verbesserung der Development-Produktivit&auml;t, Code-Vorschl&auml;ge und Generierung von Code-Snippets in Angular-Projekten.<\/li><\/ul><h5>TypeScript in the Angular Ecosystem<\/h5><p>Dieses Modul untersucht die TypeScript-Sprache, eine Obermenge von JavaScript, und wie sie im Angular-&Ouml;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&uuml;r den Umgang mit Immutability und asynchronen Operationen mithilfe von Promises, Observables und Signals.<\/p>\n<ul>\n<li><strong>TypeScript Overview, ECMA Script Standards:<\/strong> Einf&uuml;hrung in TypeScript, seine Vorteile und wie es sich auf ECMAScript-Standards bezieht.<\/li><li><strong>Const, Variables, Utility Functions:<\/strong> Verst&auml;ndnis der korrekten Verwendung von Konstanten, Variablen und Utility Functions in TypeScript.<\/li><li><strong>Client Side Models:<\/strong> Classes, Interfaces &amp; Types: Erstellen von clientseitigen Models mithilfe von Klassen, Interfaces und Types, um Anwendungsdaten zu strukturieren.<\/li><li><strong>Immutability, Cloning &amp; Object Composition:<\/strong> Techniken f&uuml;r den Umgang mit Immutability, Cloning und Object Composition in TypeScript.<\/li><li><strong>Async Operations using Promises, Observables, Signals:<\/strong> Verwaltung asynchroner Operationen mithilfe von Promises, Observables und Signals.<\/li><\/ul><h5>Services, Dependency Injection &amp; Databinding<\/h5><p>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.<\/p>\n<ul>\n<li><strong>Dependency Injection &amp; Provides:<\/strong> Verst&auml;ndnis des Konzepts der Dependency Injection und wie man Provider in Angular konfiguriert.<\/li><li><strong>Services &amp; Data Request:<\/strong> Erstellen von Services zur Behandlung von Datenanfragen und Business-Logik, F&ouml;rderung der Code-Wiederverwendbarkeit und der Trennung von Belangen.<\/li><li><strong>Injecting Providers to Components:<\/strong> Wie man Services in Angular Components injiziert und sie verwendet, um Daten und Funktionalit&auml;ten zu teilen.<\/li><li><strong>Templates &amp; Directives &amp; Event Binding:<\/strong> Verst&auml;ndnis von Angular Templates, Directives und Event Binding zum Erstellen interaktiver User Interfaces.<\/li><li><strong>Interpolation, Expressions, Attribute- &amp; Two-Way Binding:<\/strong> Verschiedene Arten des Data Bindings in Angular, einschliesslich Interpolation, Expressions, Attribute Binding und Two-Way Binding.<\/li><li><strong>Data binding Observables &amp; Signals:<\/strong> Data Binding in Angular, insbesondere bei der Arbeit mit Observables und Signals.<\/li><li><strong>Introduction to Change Detection:<\/strong> Verst&auml;ndnis der Mechanismen der Change Detection in Angular und wie sie das Rendering der Benutzeroberfl&auml;che beeinflussen.<\/li><\/ul><h5>Completing Basic Tasks &amp; Implementing Nested Components<\/h5><p>Dieses Modul behandelt wesentliche Bausteine f&uuml;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.<\/p>\n<ul>\n<li><strong>Built-in Control Flow &amp; Deferrable Views:<\/strong> Verwendung integrierter Control-Flow-Directives und Deferrable Views f&uuml;r bedingtes Rendering und optimiertes Laden.<\/li><li><strong>Built-in and Custom Pipes &amp; Directives:<\/strong> Erstellen und Verwenden integrierter und benutzerdefinierter Pipes und Directives zur Verbesserung der Template-Funktionalit&auml;t.<\/li><li><strong>Benefits of Nested Components:<\/strong> Verst&auml;ndnis der Vorteile der Erstellung von Nested Components f&uuml;r eine besser organisierte und wartbare Anwendung.<\/li><li><strong>Container vs Presentational Components:<\/strong> Wie man Components mithilfe von Container- und Presentation-Patterns strukturiert, um Belange zu trennen.<\/li><li><strong>Nesting Components using Signal inputs &amp; model outputs:<\/strong> Erstellen von Nested Components mit Signal Inputs und Model Outputs f&uuml;r einen nahtlosen Datenfluss.<\/li><li><strong>View Queries: viewChild, viewChildren:<\/strong> Zugriff auf Elemente innerhalb des Templates einer Component mithilfe von View Queries und deren Manipulation.<\/li><\/ul><h5>Routing &amp; Lazy Loading<\/h5><p>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&uuml;r Modules und Components implementiert, um die Anwendungsleistung zu verbessern, indem nur ben&ouml;tigte Ressourcen bei Bedarf geladen werden. Zus&auml;tzlich werden Data Preloading-Techniken behandelt.<\/p>\n<ul>\n<li><strong>Routing &amp; Navigation Basics:<\/strong> Einrichten von Routes und Navigation mithilfe des Angular Routers.<\/li><li><strong>Working with Parameterized Routes:<\/strong> Erstellen von Routes mit dynamischen Parametern zur Verarbeitung datengesteuerter Navigation.<\/li><li><strong>Component Input Bindings:<\/strong> Binden von Component Inputs an Routenparameter f&uuml;r dynamisches Component-Verhalten.<\/li><li><strong>Modules vs Standalone Components:<\/strong> Verst&auml;ndnis der Unterschiede zwischen Modules und Standalone Components in Angular und wann man welches verwendet.<\/li><li><strong>Lazy Loading Components and Modules:<\/strong> Implementierung von Lazy Loading f&uuml;r Modules und Components zur Verbesserung der Anwendungsleistung.<\/li><li><strong>Data Preloading:<\/strong> Vorladen von Daten w&auml;hrend der Navigation zur Verbesserung der User Experience.<\/li><\/ul><h5>Designing a responsive User Interface<\/h5><p>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&uuml;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&auml;ngiger Controls und die Verwendung des Angular CDK zusammen mit 3rd-Party-Components f&uuml;r umfangreiche Anwendungserlebnisse.<\/p>\n<ul>\n<li><strong>Implementing a CSS Reset:<\/strong> Implementierung eines CSS Resets, um eine konsistente Gestaltung &uuml;ber verschiedene Browser hinweg sicherzustellen.<\/li><li><strong>Global &amp; Component Styles:<\/strong> Anwenden globaler und Component-spezifischer Styles f&uuml;r eine gut gestaltete Anwendung.<\/li><li><strong>Responsive Web Design using Media Queries:<\/strong> Verwendung von Media Queries zur Erstellung eines responsiven User Interfaces, das sich an verschiedene Bildschirmgr&ouml;ssen anpasst.<\/li><li><strong>Layout using Flexbox, CSS Grid and Areas:<\/strong> Implementieren von Layouts mithilfe von CSS Flexbox, Grid und Areas f&uuml;r komplexe User Interfaces.<\/li><li><strong>Angular Material Overview:<\/strong> Einf&uuml;hrung in Angular Material und seine Components zum Erstellen von User Interfaces.<\/li><li><strong>Common controls:<\/strong> Tables, Dialogs &amp; Form Controls ...: Verwenden g&auml;ngiger Angular Material Components wie Tables, Dialogs und Form Controls.<\/li><li><strong>Angular CDK &amp; 3rd Party Components (Virtual Lists, Drag &amp; Drop, Markdown, ...):<\/strong> Erkundung des Angular CDK und von 3rd-Party-Components f&uuml;r erweiterte Funktionalit&auml;ten wie Virtual Lists, Drag &amp; Drop und Markdown-Rendering.<\/li><\/ul><h5>Reactive Forms Design &amp; Validation<\/h5><p>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&uuml;r reaktives Datenmanagement.<\/p>\n<ul>\n<li><strong>Forms Introduction:<\/strong> Eine Einf&uuml;hrung in Forms in der Webentwicklung und die verschiedenen Ans&auml;tze, die in Angular verwendet werden.<\/li><li><strong>Template Driven Forms vs Reactive (Model Based) Forms:<\/strong> Unterschiede zwischen Template-Driven Forms und Reactive (Model-Based) Forms in Angular.<\/li><li><strong>FormBuilder &amp; Typed Forms (Nullability, Nested Objects, Arrays):<\/strong> Erstellen von Reactive Forms mithilfe von FormBuilder und Umgang mit Typed Forms mit Nullability, Nested Objects und Arrays.<\/li><li><strong>FormControl, FormGroups &amp; FormArrays:<\/strong> Verst&auml;ndnis und Verwendung von FormControl, FormGroup und FormArray zum Erstellen komplexer Forms.<\/li><li><strong>Form Validation Basics (Synchronous \/ Asynchronous):<\/strong> Implementierung synchroner und asynchroner Validation f&uuml;r Form Controls.<\/li><li><strong>Custom- &amp; Code-Based Validators:<\/strong> Erstellen von Custom Validators und Code-Based Validators f&uuml;r spezifische Validationsszenarien.<\/li><li><strong>Signals &amp; FormControls:<\/strong> Integration von Signals mit FormControls f&uuml;r reaktives Formdatenmanagement.<\/li><\/ul><h5>Reactive Programming using Signals &amp; RxJS<\/h5><p>Dieses Modul f&uuml;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&auml;ngige RxJS-Operatoren, das Erfassen von DOM-Events als Observables und die Einf&uuml;hrung von Signals f&uuml;r die Reaktivit&auml;t. Die Teilnehmer lernen, Computed Signals, Linked Signals und Effects zu verwenden, sowie die Interoperabilit&auml;t zwischen Observables und Signals zu verstehen.<\/p>\n<ul>\n<li><strong>What is Reactive Programming \/ Benefits:<\/strong> Verst&auml;ndnis des Reactive Programming und seiner Vorteile in modernen Webanwendungen.<\/li><li>I<strong>mperative vs Reactive Programming Styles:<\/strong> Unterscheidung zwischen Imperative und Reactive Programming-Stilen.<\/li><li><strong>Observable, Observer, Async pipe &amp; Unsubscribing:<\/strong> Verst&auml;ndnis von Observables, Observers, dem Async Pipe und korrekten Unsubscription-Techniken.<\/li><li><strong>Common RxJS Operators:<\/strong> Erkundung g&auml;ngiger RxJS-Operatoren zur Manipulation und Transformation von Datenstr&ouml;men.<\/li><li><strong>Capturing Mouse &amp; DOM Events as Observables:<\/strong> Wie man Mouse- und DOM-Events als Observables f&uuml;r interaktive Anwendungen erfasst.<\/li><li><strong>Introduction to Signals:<\/strong> Einf&uuml;hrung in Signals in Angular, einem neuen Ansatz f&uuml;r reaktives State Management.<\/li><li><strong>Computed-, Linked-Signals &amp; Effects:<\/strong> Verwendung von Computed Signals, Linked Signals und Effects f&uuml;r komplexe reaktive Szenarien.<\/li><li><strong>Observable &amp; Signal Interoperability:<\/strong> Verst&auml;ndnis der Interoperabilit&auml;t zwischen Observables und Signals.<\/li><\/ul><h5>Managing Client State &amp; Sharing Events<\/h5><p>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&uuml;hrung in den Signal Store als robuste State Management-L&ouml;sung.<\/p>\n<ul>\n<li><strong>What is State Management:<\/strong> Verst&auml;ndnis des Konzepts des State Managements in Angular-Anwendungen.<\/li><li><strong>State Management Options:<\/strong> Signals vs Observables: Vergleich der State Management-Optionen mit Signals gegen&uuml;ber Observables.<\/li><li><strong>Stateful Services using Signals:<\/strong> Verwalten des States mithilfe von Stateful Services mit Signals f&uuml;r reaktives Datenmanagement.<\/li><li><strong>Sharing Events between Components:<\/strong> Methoden zum Teilen von Events zwischen Components in einer Angular-Anwendung.<\/li><li><strong>Introduction to Signal Store:<\/strong> Einf&uuml;hrung in Signal Store als State Management-L&ouml;sung.<\/li><\/ul><h5>Testing Angular Applications<\/h5><p>Dieses Modul befasst sich mit den verschiedenen Testing-Strategien f&uuml;r Angular-Anwendungen, einschliesslich Unit- und Component Testing. Die Teilnehmer lernen, wie man Classes, Directives und Pipes testet, sowie wie man Component Injections f&uuml;r isoliertes Testing mocken und spionieren kann. Es behandelt DOM Testing mithilfe von Test IDs und Component Interaction Testing. Dar&uuml;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.<\/p>\n<ul>\n<li><strong>Angular Testing Options:<\/strong> &Uuml;berblick &uuml;ber die Testing-Optionen, die f&uuml;r Angular-Anwendungen verf&uuml;gbar sind.<\/li><li><strong>Testing Classes, Directives and Pipes:<\/strong> Schreiben von Tests f&uuml;r Classes, Directives und Pipes mithilfe der Angular Testing Utilities.<\/li><li><strong>Component Injections, Mocks &amp; Spies:<\/strong> Verwenden von Dependency Injection, Mocks und Spies in Tests, um das Component-Verhalten zu isolieren.<\/li><li><strong>Component DOM testing &amp; Test Ids:<\/strong> Testen der DOM-Struktur der Component und der Zug&auml;nglichkeit mit Test IDs.<\/li><li><strong>Testing Component Interaction (Read, Write, Inputs, Events):<\/strong> Testen der Interaktionen mit Component Inputs, Outputs und Events.<\/li><li><strong>Testing Nested Components:<\/strong> Strategien zum Testen von Nested Components und deren Interaktionen.<\/li><li><strong>Material Testing using Component Harnesses:<\/strong> Testen von Material Components mithilfe von Component Harnesses.<\/li><li><strong>Implement Tests using GitHub Copilot:<\/strong> Nutzung von GitHub Copilot f&uuml;r die effiziente Implementierung von Tests.<\/li><li><strong>Using GitHub Copilot TestGeneration Instructions:<\/strong> So verwenden Sie GitHub Copilot, um Testspezifikationen f&uuml;r Code Snippets zu erstellen.<\/li><\/ul><h5>Securing &amp; Publishing Angular<\/h5><p>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&uuml;gen von Authentication Tokens zu verwenden, Route Guards zu implementieren und verschiedene Hosting-Optionen sowie den Ver&ouml;ffentlichungsprozess f&uuml;r Angular-Apps zu verstehen.<\/p>\n<ul>\n<li><strong>Authentication \/ Authorization Basics in Spa&rsquo;s:<\/strong> Verst&auml;ndnis von Authentication und Authorization in Single Page Applications.<\/li><li><strong>Token based Auth: Understanding Jwt, OAuth 2.0 &amp; OpenID Connect:<\/strong> Token-basierte Authentication und die Verwendung von JWT, OAuth 2.0 und OpenID Connect.<\/li><li><strong>Observe Response and Setting Custom Http Headers:<\/strong> Beobachten von Responses und Setzen benutzerdefinierter HTTP-Header.<\/li><li><strong>Using Interceptors to add Authentication Tokens:<\/strong> Verwenden von Interceptors zum Hinzuf&uuml;gen von Authentication Tokens zu HTTP-Anfragen.<\/li><li><strong>Angular Routes &amp; Functional Route Guards:<\/strong> Sch&uuml;tzen von Routes mit Functional Route Guards.<\/li><li><strong>Hosting Options Overview:<\/strong> &Uuml;berblick &uuml;ber verschiedene Hosting-Optionen zum Bereitstellen von Angular-Anwendungen.<\/li><li><strong>Publishing Angular Apps:<\/strong> So erstellen und ver&ouml;ffentlichen Sie Angular-Anwendungen f&uuml;r Produktionsumgebungen.<\/li><\/ul>","comments":"<p>Im Training &ldquo;Angular Single Page Application Development&rdquo; vermitteln wir die grundlegenden F&auml;higkeiten, um &ldquo;Single Page Applications&rdquo; (SPAs) mit Angular implementieren zu k&ouml;nnen. Dabei legen wir grossen Wert darauf, in den Demos und Labs aktuelle Coding-Styles und Patterns zu verwenden.\n \nWir 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-&Ouml;kosystems. Dazu geh&ouml;ren Routing, responsives UI-Design, reaktive Programmierung, Testing, Authentifizierung und Ver&ouml;ffentlichung.<\/p>","summary":"<p>Dieser umfassende Kurs wurde entwickelt, um angehenden Angular-Entwicklern die F&auml;higkeiten und Kenntnisse zu vermitteln, die sie zum Erstellen robuster und skalierbarer Webanwendungen ben&ouml;tigen. Der Kurs deckt ein breites Spektrum an Themen ab, von den Grundlagen von Angular und TypeScript bis hin zu fortgeschrittenen Konzepten wie reactive programming, State Management und Security. Er bietet einen tiefen Einblick in moderne Angular-Entwicklungspraktiken. Die Teilnehmer lernen, responsive User Interfaces zu erstellen, Daten effektiv zu verwalten, umfassende Testing-Strategien zu implementieren sowie ihre Anwendungen zu sichern und zu deployen. Zus&auml;tzlich befasst sich der Kurs mit der Optimierung von Development-Workflows mithilfe von Tools wie GitHub Copilot.<\/p>","contents_plain":"- Angular Introduction\n- TypeScript in the Angular Ecosystem\n- Services, Dependency Injection & Databinding\n- Completing Basic Tasks & Implementing Nested Components\n- Routing & Lazy Loading\n- Designing a responsive User Interface\n- Reactive Forms Design & Validation\n- Reactive Programming using Signals & RxJS\n- Managing Client State & Sharing Events\n- Testing Angular Applications\n- Securing & Publishing Angular","outline_plain":"Angular Introduction\n\nDieses Modul f\u00fchrt in das Angular Framework, seinen Technology Stack und die wesentlichen Tools f\u00fcr die Entwicklung ein. Es behandelt die Einrichtung der Development-Umgebung, die Verwendung der Angular CLI, das Debugging von Anwendungen und das Verst\u00e4ndnis des Konfigurations- und Bootstrapping-Prozesses. Dar\u00fcber hinaus enth\u00e4lt dieses Modul Anleitungen zur Wartung, Aktualisierung und Optimierung von Angular-Projekten mit Hilfe von GitHub Copilot.\n\n\n- Angular Introduction & Technology Stack: \u00dcberblick \u00fcber das Angular Framework, seine Architektur und das umliegende \u00d6kosystem an Tools und Bibliotheken.\n- Angular & CLI Essentials: Einrichten einer Development-Umgebung, Erstellen neuer Projekte, Verwenden der Angular CLI f\u00fcr g\u00e4ngige Aufgaben.\n- Debugging Angular: Techniken zum Identifizieren und Beheben von Problemen in Angular-Anwendungen, Verwendung von Browser-Developer-Tools und Angular-spezifischen Debuggern.\n- Configuration and Bootstrapping: Verst\u00e4ndnis der Konfigurationsdateien und des Prozesses des Bootstrapping einer Angular-Anwendung.\n- Maintaining & Updating projects: Best Practices f\u00fcr die Wartung und Aktualisierung von Angular-Projekten, um sie effizient und sicher zu betreiben.\n- Use and optimize GitHub Copilot in Angular Projects: Nutzung von GitHub Copilot zur Verbesserung der Development-Produktivit\u00e4t, Code-Vorschl\u00e4ge und Generierung von Code-Snippets in Angular-Projekten.\nTypeScript in the Angular Ecosystem\n\nDieses Modul untersucht die TypeScript-Sprache, eine Obermenge von JavaScript, und wie sie im Angular-\u00d6kosystem 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\u00fcr den Umgang mit Immutability und asynchronen Operationen mithilfe von Promises, Observables und Signals.\n\n\n- TypeScript Overview, ECMA Script Standards: Einf\u00fchrung in TypeScript, seine Vorteile und wie es sich auf ECMAScript-Standards bezieht.\n- Const, Variables, Utility Functions: Verst\u00e4ndnis der korrekten Verwendung von Konstanten, Variablen und Utility Functions in TypeScript.\n- Client Side Models: Classes, Interfaces & Types: Erstellen von clientseitigen Models mithilfe von Klassen, Interfaces und Types, um Anwendungsdaten zu strukturieren.\n- Immutability, Cloning & Object Composition: Techniken f\u00fcr den Umgang mit Immutability, Cloning und Object Composition in TypeScript.\n- Async Operations using Promises, Observables, Signals: Verwaltung asynchroner Operationen mithilfe von Promises, Observables und Signals.\nServices, Dependency Injection & Databinding\n\nDieses 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.\n\n\n- Dependency Injection & Provides: Verst\u00e4ndnis des Konzepts der Dependency Injection und wie man Provider in Angular konfiguriert.\n- Services & Data Request: Erstellen von Services zur Behandlung von Datenanfragen und Business-Logik, F\u00f6rderung der Code-Wiederverwendbarkeit und der Trennung von Belangen.\n- Injecting Providers to Components: Wie man Services in Angular Components injiziert und sie verwendet, um Daten und Funktionalit\u00e4ten zu teilen.\n- Templates & Directives & Event Binding: Verst\u00e4ndnis von Angular Templates, Directives und Event Binding zum Erstellen interaktiver User Interfaces.\n- Interpolation, Expressions, Attribute- & Two-Way Binding: Verschiedene Arten des Data Bindings in Angular, einschliesslich Interpolation, Expressions, Attribute Binding und Two-Way Binding.\n- Data binding Observables & Signals: Data Binding in Angular, insbesondere bei der Arbeit mit Observables und Signals.\n- Introduction to Change Detection: Verst\u00e4ndnis der Mechanismen der Change Detection in Angular und wie sie das Rendering der Benutzeroberfl\u00e4che beeinflussen.\nCompleting Basic Tasks & Implementing Nested Components\n\nDieses Modul behandelt wesentliche Bausteine f\u00fcr 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.\n\n\n- Built-in Control Flow & Deferrable Views: Verwendung integrierter Control-Flow-Directives und Deferrable Views f\u00fcr bedingtes Rendering und optimiertes Laden.\n- Built-in and Custom Pipes & Directives: Erstellen und Verwenden integrierter und benutzerdefinierter Pipes und Directives zur Verbesserung der Template-Funktionalit\u00e4t.\n- Benefits of Nested Components: Verst\u00e4ndnis der Vorteile der Erstellung von Nested Components f\u00fcr eine besser organisierte und wartbare Anwendung.\n- Container vs Presentational Components: Wie man Components mithilfe von Container- und Presentation-Patterns strukturiert, um Belange zu trennen.\n- Nesting Components using Signal inputs & model outputs: Erstellen von Nested Components mit Signal Inputs und Model Outputs f\u00fcr einen nahtlosen Datenfluss.\n- View Queries: viewChild, viewChildren: Zugriff auf Elemente innerhalb des Templates einer Component mithilfe von View Queries und deren Manipulation.\nRouting & Lazy Loading\n\nDieses 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\u00fcr Modules und Components implementiert, um die Anwendungsleistung zu verbessern, indem nur ben\u00f6tigte Ressourcen bei Bedarf geladen werden. Zus\u00e4tzlich werden Data Preloading-Techniken behandelt.\n\n\n- Routing & Navigation Basics: Einrichten von Routes und Navigation mithilfe des Angular Routers.\n- Working with Parameterized Routes: Erstellen von Routes mit dynamischen Parametern zur Verarbeitung datengesteuerter Navigation.\n- Component Input Bindings: Binden von Component Inputs an Routenparameter f\u00fcr dynamisches Component-Verhalten.\n- Modules vs Standalone Components: Verst\u00e4ndnis der Unterschiede zwischen Modules und Standalone Components in Angular und wann man welches verwendet.\n- Lazy Loading Components and Modules: Implementierung von Lazy Loading f\u00fcr Modules und Components zur Verbesserung der Anwendungsleistung.\n- Data Preloading: Vorladen von Daten w\u00e4hrend der Navigation zur Verbesserung der User Experience.\nDesigning a responsive User Interface\n\nDieses 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\u00fcr responsives Design und das Erstellen von Layouts mit Flexbox, CSS Grid und Areas. Die Teilnehmer lernen die Grundlagen von Angular Material, die Integration g\u00e4ngiger Controls und die Verwendung des Angular CDK zusammen mit 3rd-Party-Components f\u00fcr umfangreiche Anwendungserlebnisse.\n\n\n- Implementing a CSS Reset: Implementierung eines CSS Resets, um eine konsistente Gestaltung \u00fcber verschiedene Browser hinweg sicherzustellen.\n- Global & Component Styles: Anwenden globaler und Component-spezifischer Styles f\u00fcr eine gut gestaltete Anwendung.\n- Responsive Web Design using Media Queries: Verwendung von Media Queries zur Erstellung eines responsiven User Interfaces, das sich an verschiedene Bildschirmgr\u00f6ssen anpasst.\n- Layout using Flexbox, CSS Grid and Areas: Implementieren von Layouts mithilfe von CSS Flexbox, Grid und Areas f\u00fcr komplexe User Interfaces.\n- Angular Material Overview: Einf\u00fchrung in Angular Material und seine Components zum Erstellen von User Interfaces.\n- Common controls: Tables, Dialogs & Form Controls ...: Verwenden g\u00e4ngiger Angular Material Components wie Tables, Dialogs und Form Controls.\n- Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...): Erkundung des Angular CDK und von 3rd-Party-Components f\u00fcr erweiterte Funktionalit\u00e4ten wie Virtual Lists, Drag & Drop und Markdown-Rendering.\nReactive Forms Design & Validation\n\nDieses 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\u00fcr reaktives Datenmanagement.\n\n\n- Forms Introduction: Eine Einf\u00fchrung in Forms in der Webentwicklung und die verschiedenen Ans\u00e4tze, die in Angular verwendet werden.\n- Template Driven Forms vs Reactive (Model Based) Forms: Unterschiede zwischen Template-Driven Forms und Reactive (Model-Based) Forms in Angular.\n- 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.\n- FormControl, FormGroups & FormArrays: Verst\u00e4ndnis und Verwendung von FormControl, FormGroup und FormArray zum Erstellen komplexer Forms.\n- Form Validation Basics (Synchronous \/ Asynchronous): Implementierung synchroner und asynchroner Validation f\u00fcr Form Controls.\n- Custom- & Code-Based Validators: Erstellen von Custom Validators und Code-Based Validators f\u00fcr spezifische Validationsszenarien.\n- Signals & FormControls: Integration von Signals mit FormControls f\u00fcr reaktives Formdatenmanagement.\nReactive Programming using Signals & RxJS\n\nDieses Modul f\u00fchrt 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\u00e4ngige RxJS-Operatoren, das Erfassen von DOM-Events als Observables und die Einf\u00fchrung von Signals f\u00fcr die Reaktivit\u00e4t. Die Teilnehmer lernen, Computed Signals, Linked Signals und Effects zu verwenden, sowie die Interoperabilit\u00e4t zwischen Observables und Signals zu verstehen.\n\n\n- What is Reactive Programming \/ Benefits: Verst\u00e4ndnis des Reactive Programming und seiner Vorteile in modernen Webanwendungen.\n- Imperative vs Reactive Programming Styles: Unterscheidung zwischen Imperative und Reactive Programming-Stilen.\n- Observable, Observer, Async pipe & Unsubscribing: Verst\u00e4ndnis von Observables, Observers, dem Async Pipe und korrekten Unsubscription-Techniken.\n- Common RxJS Operators: Erkundung g\u00e4ngiger RxJS-Operatoren zur Manipulation und Transformation von Datenstr\u00f6men.\n- Capturing Mouse & DOM Events as Observables: Wie man Mouse- und DOM-Events als Observables f\u00fcr interaktive Anwendungen erfasst.\n- Introduction to Signals: Einf\u00fchrung in Signals in Angular, einem neuen Ansatz f\u00fcr reaktives State Management.\n- Computed-, Linked-Signals & Effects: Verwendung von Computed Signals, Linked Signals und Effects f\u00fcr komplexe reaktive Szenarien.\n- Observable & Signal Interoperability: Verst\u00e4ndnis der Interoperabilit\u00e4t zwischen Observables und Signals.\nManaging Client State & Sharing Events\n\nDieses 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\u00fchrung in den Signal Store als robuste State Management-L\u00f6sung.\n\n\n- What is State Management: Verst\u00e4ndnis des Konzepts des State Managements in Angular-Anwendungen.\n- State Management Options: Signals vs Observables: Vergleich der State Management-Optionen mit Signals gegen\u00fcber Observables.\n- Stateful Services using Signals: Verwalten des States mithilfe von Stateful Services mit Signals f\u00fcr reaktives Datenmanagement.\n- Sharing Events between Components: Methoden zum Teilen von Events zwischen Components in einer Angular-Anwendung.\n- Introduction to Signal Store: Einf\u00fchrung in Signal Store als State Management-L\u00f6sung.\nTesting Angular Applications\n\nDieses Modul befasst sich mit den verschiedenen Testing-Strategien f\u00fcr Angular-Anwendungen, einschliesslich Unit- und Component Testing. Die Teilnehmer lernen, wie man Classes, Directives und Pipes testet, sowie wie man Component Injections f\u00fcr isoliertes Testing mocken und spionieren kann. Es behandelt DOM Testing mithilfe von Test IDs und Component Interaction Testing. Dar\u00fcber 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.\n\n\n- Angular Testing Options: \u00dcberblick \u00fcber die Testing-Optionen, die f\u00fcr Angular-Anwendungen verf\u00fcgbar sind.\n- Testing Classes, Directives and Pipes: Schreiben von Tests f\u00fcr Classes, Directives und Pipes mithilfe der Angular Testing Utilities.\n- Component Injections, Mocks & Spies: Verwenden von Dependency Injection, Mocks und Spies in Tests, um das Component-Verhalten zu isolieren.\n- Component DOM testing & Test Ids: Testen der DOM-Struktur der Component und der Zug\u00e4nglichkeit mit Test IDs.\n- Testing Component Interaction (Read, Write, Inputs, Events): Testen der Interaktionen mit Component Inputs, Outputs und Events.\n- Testing Nested Components: Strategien zum Testen von Nested Components und deren Interaktionen.\n- Material Testing using Component Harnesses: Testen von Material Components mithilfe von Component Harnesses.\n- Implement Tests using GitHub Copilot: Nutzung von GitHub Copilot f\u00fcr die effiziente Implementierung von Tests.\n- Using GitHub Copilot TestGeneration Instructions: So verwenden Sie GitHub Copilot, um Testspezifikationen f\u00fcr Code Snippets zu erstellen.\nSecuring & Publishing Angular\n\nDieses 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\u00fcgen von Authentication Tokens zu verwenden, Route Guards zu implementieren und verschiedene Hosting-Optionen sowie den Ver\u00f6ffentlichungsprozess f\u00fcr Angular-Apps zu verstehen.\n\n\n- Authentication \/ Authorization Basics in Spa\u2019s: Verst\u00e4ndnis von Authentication und Authorization in Single Page Applications.\n- Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect: Token-basierte Authentication und die Verwendung von JWT, OAuth 2.0 und OpenID Connect.\n- Observe Response and Setting Custom Http Headers: Beobachten von Responses und Setzen benutzerdefinierter HTTP-Header.\n- Using Interceptors to add Authentication Tokens: Verwenden von Interceptors zum Hinzuf\u00fcgen von Authentication Tokens zu HTTP-Anfragen.\n- Angular Routes & Functional Route Guards: Sch\u00fctzen von Routes mit Functional Route Guards.\n- Hosting Options Overview: \u00dcberblick \u00fcber verschiedene Hosting-Optionen zum Bereitstellen von Angular-Anwendungen.\n- Publishing Angular Apps: So erstellen und ver\u00f6ffentlichen Sie Angular-Anwendungen f\u00fcr Produktionsumgebungen.","comments_plain":"Im Training \u201cAngular Single Page Application Development\u201d vermitteln wir die grundlegenden F\u00e4higkeiten, um \u201cSingle Page Applications\u201d (SPAs) mit Angular implementieren zu k\u00f6nnen. Dabei legen wir grossen Wert darauf, in den Demos und Labs aktuelle Coding-Styles und Patterns zu verwenden.\n \nWir 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-\u00d6kosystems. Dazu geh\u00f6ren Routing, responsives UI-Design, reaktive Programmierung, Testing, Authentifizierung und Ver\u00f6ffentlichung.","summary_plain":"Dieser umfassende Kurs wurde entwickelt, um angehenden Angular-Entwicklern die F\u00e4higkeiten und Kenntnisse zu vermitteln, die sie zum Erstellen robuster und skalierbarer Webanwendungen ben\u00f6tigen. Der Kurs deckt ein breites Spektrum an Themen ab, von den Grundlagen von Angular und TypeScript bis hin zu fortgeschrittenen Konzepten wie reactive programming, State Management und Security. Er bietet einen tiefen Einblick in moderne Angular-Entwicklungspraktiken. Die Teilnehmer lernen, responsive User Interfaces zu erstellen, Daten effektiv zu verwalten, umfassende Testing-Strategien zu implementieren sowie ihre Anwendungen zu sichern und zu deployen. Zus\u00e4tzlich befasst sich der Kurs mit der Optimierung von Development-Workflows mithilfe von Tools wie GitHub Copilot.","skill_level":"Beginner","version":"1.0","duration":{"unit":"d","value":5,"formatted":"5 Tage"},"pricelist":{"List Price":{"DE":{"country":"DE","currency":"EUR","taxrate":19,"price":3190},"SE":{"country":"SE","currency":"EUR","taxrate":25,"price":3190},"CH":{"country":"CH","currency":"CHF","taxrate":8.1,"price":3830},"IL":{"country":"IL","currency":"ILS","taxrate":17,"price":11070},"AT":{"country":"AT","currency":"EUR","taxrate":20,"price":3190}}},"lastchanged":"2025-10-20T09:26:48+02:00","parenturl":"https:\/\/portal.flane.ch\/swisscom\/json-courses","nexturl_course_schedule":"https:\/\/portal.flane.ch\/swisscom\/json-course-schedule\/23413","source_lang":"de","source":"https:\/\/portal.flane.ch\/swisscom\/json-course\/training-ngbasics"}}