Angular Development Essentials

This workshop provides a comprehensive introduction to modern Angular development, covering essential concepts such as Angular related TypeScript fundamentals, dependency injection, and component architecture.

Participants will learn best practices for building responsive user interfaces, managing state, and implementing reactive programming with Signals and RxJS.

The curriculum also includes hands-on guidance for testing, securing, and publishing Angular applications.

By the end, attendees will be equipped to develop robust, maintainable, and scalable Angular projects using current industry standards.

Angular Introduction

• Angular Introduction & Technology Stack
• Angular & CLI Essentials
• Debugging Angular
• Configuration and Bootstrapping
• Maintaining & Updating projects
• Use and optimize GitHub Copilot in Angular Projects

TypeScript in the Angular Ecosystem

• TypeScript Overview, ECMA Script Standards
• Const, Variables, Utility Functions
• Client Side Models: Classes, Interfaces & Types
• Immutability, Cloning & Object Composition
• Async Operations using Promises, Observables, Signals

Services, Dependency Injection & Databinding

• Dependency Injection & Provides
• Services & Data Request
• Injecting Providers to Components
• Templates & Directives & Event Binding
• Interpolation, Expressions, Attribute- & Two-Way Binding
• Data binding Observables & Signals
• Introduction to Change Detection

Completing Basic Tasks & Implementing Nested Components

• Built-in Control Flow & Deferrable Views
• Built-in and Custom Pipes & Directives
• Benefits of Nested Components
• Container vs Presentational Components
• Nesting Components using Signal inputs & model outputs
• View Queries: viewChild, viewChildren

Routing & Lazy Loading

• Routing & Navigation Basics
• Working with Parameterized Routes
• Component Input Bindings
• Modules vs Standalone Components
• Lazy Loading Components and Modules
• 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
• Capturing Mouse & DOM Events as Observables
• Introduction to Signals
• Computed-, Linked-Signals & Effects
• 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
• Introduction to Signal Store

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)
• Testing Nested Components
• Material Testing using Component Harnesses
• Implement Tests using GitHub Copilot
• Using GitHub Copilot TestGeneration Instructions

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 add Authentication Tokens
• Angular Routes & Functional Route Guards
• Hosting Options Overview
• Publishing Angular Apps