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

Detailed Course Outline

Angular Introduction

This module introduces the Angular framework, its technology stack, and the essential tools needed for development. It covers setting up the development environment, using the Angular CLI, debugging applications, and understanding the configuration and bootstrapping process. Additionally, this module includes guidance on maintaining, updating, and optimizing Angular projects with the help of GitHub Copilot.

  • Angular Introduction & Technology Stack: Overview of the Angular framework, its architecture, and the surrounding ecosystem of tools and libraries.
  • Angular & CLI Essentials: Setting up a development environment, creating new projects, using the Angular CLI for common tasks.
  • Debugging Angular: Techniques for identifying and fixing issues in Angular applications, using browser developer tools and Angular specific debuggers.
  • Configuration and Bootstrapping: Understanding the configuration files and the process of bootstrapping an Angular application.
  • Maintaining & Updating projects: Best practices for maintaining and updating Angular projects to keep them running efficiently and securely.
  • Use and optimize GitHub Copilot in Angular Projects: Utilizing GitHub Copilot for improved development productivity, code suggestions, and generating code snippets in Angular projects.
TypeScript in the Angular Ecosystem

This module explores the TypeScript language, a superset of JavaScript, and how it's used within the Angular ecosystem. It delves into the specifics of TypeScript syntax including constants, variables, and utility functions. Participants will learn to create client-side models using classes, interfaces, and types, as well as best practices for handling immutability and asynchronous operations using Promises, Observables, and Signals.

  • TypeScript Overview, ECMA Script Standards: Introduction to TypeScript, its benefits, and how it relates to ECMAScript standards.
  • Const, Variables, Utility Functions: Understanding the proper use of constants, variables, and utility functions in TypeScript.
  • Client Side Models: Classes, Interfaces & Types: Creating client-side models using classes, interfaces, and types to structure application data.
  • Immutability, Cloning & Object Composition: Techniques for handling immutability, cloning, and object composition in TypeScript.
  • Async Operations using Promises, Observables, Signals: Managing asynchronous operations using Promises, Observables, and Signals.
Services, Dependency Injection & Databinding

This module focuses on the core concepts of dependency injection, services, and data binding within Angular. Participants will learn how to create and inject services to manage data requests, work with templates, directives, and event binding. It covers different forms of data binding including interpolation, expressions, attribute binding, and two-way binding, as well as the basics of change detection.

  • Dependency Injection & Provides: Understanding the concept of dependency injection and how to configure providers in Angular.
  • Services & Data Request: Creating services to handle data requests and business logic, promoting code reusability and separation of concerns.
  • Injecting Providers to Components: How to inject services into Angular components and use them to share data and functionality.
  • Templates & Directives & Event Binding: Understanding Angular templates, directives, and event binding for creating interactive user interfaces.
  • Interpolation, Expressions, Attribute- & Two-Way Binding: Different types of data binding in Angular, including interpolation, expressions, attribute binding, and two-way binding.
  • Data binding Observables & Signals: Data binding in Angular, specifically when working with Observables and Signals.
  • Introduction to Change Detection: Understanding change detection mechanisms in Angular and how they affect the rendering of the user interface.
Completing Basic Tasks & Implementing Nested Components

This module covers essential building blocks for creating dynamic Angular applications, focusing on control flow, pipes, directives, and the implementation of nested components. Participants will learn to use built-in control flow structures and deferrable views, create custom pipes and directives, and understand the benefits of nested components. This module also covers how to properly structure components using container and presentation components, nesting them with signal inputs and model outputs, and accessing view elements with View Queries.

  • Built-in Control Flow & Deferrable Views: Using built-in control flow directives and deferrable views for conditional rendering and optimized loading.
  • Built-in and Custom Pipes & Directives: Creating and using built-in and custom pipes and directives to enhance template functionality.
  • Benefits of Nested Components: Understanding the benefits of creating nested components for a more organized and maintainable application.
  • Container vs Presentational Components: How to structure components using container and presentation patterns for separation of concerns.
  • Nesting Components using Signal inputs & model outputs: Creating nested components using signal inputs and model outputs for seamless data flow.
  • View Queries: viewChild, viewChildren: Accessing and manipulating elements within a component's template using view queries.
Routing & Lazy Loading

This module delves into navigation and component loading strategies in Angular. Participants will learn how to set up routes, work with parameterized routes, and bind component inputs to route data. This section also covers the difference between modules and standalone components and how to implement lazy loading for modules and components, improving application performance by loading only required resources on demand. Additionally, the module touches on data preloading techniques.

  • Routing & Navigation Basics: Setting up routes and navigation using the Angular Router.
  • Working with Parameterized Routes: Creating routes with dynamic parameters to handle data-driven navigation.
  • Component Input Bindings: Binding component inputs to route parameters for dynamic component behavior.
  • Modules vs Standalone Components: Understanding the differences between modules and standalone components in Angular and when to use each.
  • Lazy Loading Components and Modules: Implementing lazy loading for modules and components to improve the application's performance.
  • Data Preloading: Preloading data during navigation to enhance the user experience.
Designing a responsive User Interface

This module covers the techniques for creating responsive user interfaces using CSS and Angular Material. It includes implementing a CSS reset, applying global and component styles, using media queries for responsive design, and creating layouts with Flexbox, CSS Grid, and Areas. Participants will learn the basics of Angular Material, incorporating common controls, and utilizing the Angular CDK alongside 3rd party components for rich application experiences.

  • Implementing a CSS Reset: Implementing a CSS reset to ensure consistent styling across different browsers.
  • Global & Component Styles: Applying global and component specific styles for a well-designed application.
  • Responsive Web Design using Media Queries: Using media queries for creating a responsive user interface that adapts to different screen sizes.
  • Layout using Flexbox, CSS Grid and Areas: Implementing layouts using CSS Flexbox, Grid, and Areas for complex user interfaces.
  • Angular Material Overview: Introduction to Angular Material and its components for building user interfaces.
  • Common controls: Tables, Dialogs & Form Controls ...: Using common Angular Material components such as tables, dialogs, and form controls.
  • Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...): Exploring Angular CDK and 3rd party components for advanced functionality like virtual lists, drag and drop, and markdown rendering.
Reactive Forms Design & Validation

This module focuses on creating and managing forms in Angular using the reactive approach. It covers the differences between template-driven and reactive forms, and dives into the specifics of reactive forms with FormBuilder and Typed Forms. Participants will learn to build complex forms using FormControl, FormGroups, and FormArrays, and implement both synchronous and asynchronous form validation including custom and code-based validators. The module will also cover integration of forms with Signals for reactive data management.

  • Forms Introduction: An introduction to forms in web development and the different approaches used in Angular.
  • Template Driven Forms vs Reactive (Model Based) Forms: Differences between template-driven forms and reactive (model-based) forms in Angular.
  • FormBuilder & Typed Forms (Nullability, Nested Objects, Arrays): Creating reactive forms using FormBuilder and handling typed forms with nullability, nested objects, and arrays.
  • FormControl, FormGroups & FormArrays: Understanding and using FormControl, FormGroup, and FormArray for building complex forms.
  • Form Validation Basics (Synchronous / Asynchronous): Implementing synchronous and asynchronous validation for form controls.
  • Custom- & Code-Based Validators: Creating custom validators and code-based validators for specific validation scenarios.
  • Signals & FormControls: Integrating Signals with FormControls for reactive form data management.
Reactive Programming using Signals & RxJS

This module introduces the concepts of reactive programming and how to implement them using Signals and RxJS in Angular. Participants will learn about the differences between imperative and reactive programming styles, and how to use Observables, Observers, and the Async pipe. It covers common RxJS operators, capturing DOM events as Observables, and introducing Signals for reactivity. Participants will learn to use Computed Signals, Linked Signals, and Effects, as well as understand interoperability between Observables and Signals.

  • What is Reactive Programming / Benefits: Understanding reactive programming and its benefits in modern web applications.
  • Imperative vs Reactive Programming Styles: Differentiating between imperative and reactive programming styles.
  • Observable, Observer, Async pipe & Unsubscribing: Understanding Observables, Observers, the Async pipe, and proper unsubscription techniques.
  • Common RxJS Operators: Exploring common RxJS operators for manipulating and transforming streams of data.
  • Capturing Mouse & DOM Events as Observables: How to capture mouse and DOM events as Observables for interactive applications.
  • Introduction to Signals: Introduction to Signals in Angular, a new approach for reactive state management.
  • Computed-, Linked-Signals & Effects: Utilizing Computed Signals, Linked Signals, and Effects for complex reactive scenarios.
  • Observable & Signal Interoperability: Understanding the interoperability between Observables and Signals.
Managing Client State & Sharing Events

This module explores state management in Angular applications, focusing on options using Signals and Observables. Participants will learn to manage state using stateful services with Signals. It covers sharing events between components, and provides an introduction to Signal Store as a robust state management solution.

  • What is State Management: Understanding the concept of state management in Angular applications.
  • State Management Options: Signals vs Observables: Comparing state management options using Signals versus Observables.
  • Stateful Services using Signals: Managing state using stateful services with Signals for reactive data management.
  • Sharing Events between Components: Methods for sharing events between components in an Angular application.
  • Introduction to Signal Store: Introduction to Signal Store as a state management solution.
Testing Angular Applications

This module delves into the various testing strategies for Angular applications, including unit and component testing. Participants will learn how to test classes, directives, and pipes, as well as how to mock and spy on component injections for isolated testing. It covers DOM testing using Test IDs and component interaction testing. Additionally, this module explores testing nested components and material components using component harnesses. It also focuses on using GitHub Copilot to generate and improve tests.

  • Angular Testing Options: Overview of the testing options available for Angular applications.
  • Testing Classes, Directives and Pipes: Writing tests for classes, directives, and pipes using the Angular testing utilities.
  • Component Injections, Mocks & Spies: Using dependency injection, mocks, and spies in tests to isolate component behavior.
  • Component DOM testing & Test Ids: Testing the component's DOM structure and accessibility with test IDs.
  • Testing Component Interaction (Read, Write, Inputs, Events): Testing interactions with component inputs, outputs, and events.
  • Testing Nested Components: Strategies for testing nested components and their interactions.
  • Material Testing using Component Harnesses: Testing Material components using component harnesses.
  • Implement Tests using GitHub Copilot: Leveraging GitHub Copilot for the efficient implementation of tests.
  • Using GitHub Copilot TestGeneration Instructions: How to use GitHub Copilot to create test specifications for code snippets.
Securing & Publishing Angular

This module focuses on securing and deploying Angular applications. It covers authentication and authorization basics in SPAs (Single Page Applications), token-based authentication using JWT, OAuth 2.0, and OpenID Connect. Participants will learn to observe responses, set custom HTTP headers, use interceptors for adding authentication tokens, implement route guards, and understand various hosting options and the publishing process for Angular apps.

  • Authentication / Authorization Basics in Spa’s: Understanding authentication and authorization in Single Page Applications.
  • Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect: Token based authentication and the use of JWT, OAuth 2.0, and OpenID Connect.
  • Observe Response and Setting Custom Http Headers: Observing responses and setting custom HTTP headers.
  • Using Interceptors to add Authentication Tokens: Using interceptors to add authentication tokens to HTTP requests.
  • Angular Routes & Functional Route Guards: Protecting routes with functional route guards.
  • Hosting Options Overview: Overview of various hosting options for deploying Angular applications.
  • Publishing Angular Apps: How to build and publish Angular applications for production environments.