Advanced Angular

This 3-day instructor led course is designed to help mid-level or senior Angular developers understand, identify, and implement patterns in Angular for applications that are written by a team of software developers.

Statistically speaking, new Angular applications usually have high velocity, but that trends downwards over time. This course will help level that line for consistent delivery of features your company needs.

Features that are easy to implement early in the application, over time, become more challenging. Internal coupling in the application, shoddy state management and API policies start to collide. Your tests become brittle.

This course shows you patterns to avoid that.

Buzzwords Covered

• State Management with Angular Signals
• User State in an application
• Angular Components and Angular Directives: How to Choose
• Designing reusable component and directive libraries
• RXJS and Observables
• API Access Patterns including caching, validation, and Authentication / Authorization
• Advanced Routing: Route Guards, Lazy Loading
• Branch by Abstraction for Angular in a CI/CD environment with feature flags.
• Additional technologies demonstrated:
  • Zod for data validation
  • Angular (Tanstack) Query for secure, efficent API access
  • NGRX Store / NGRX Signal Store

Prerequisites

For this course, you are expected to have experience with Angular. You should know the general ontology of Angular - components, routing, services, etc.

You should be comfortable with TypeScript and the Angular CLI.

We will use Visual Studio Code as our development environment in this course.

You should also have at least beginner understanding of source code control with Git.

Objectives

The objectives of this course are to help you create Angular applications that have some internal logic and resiliency. All code has churn - we make changes all the time. User-facing applications like we build with Angular tend to have a high rate of change and they have to accomodate the changes on the backing services they use that may or may not be maintained by the same team.

Refactoring for Consistency

We will start the course with an existing Angular application. We will explore the code base for code smells and weaknesses, including:

API Access

• Hidden side effects (API Access, etc.) and inconsistent validation
• Duplicated API access and performance impacts

Rendering and State

• Rendering and other performance issues
• Confusing or incorrect routing configuration
• Inability to hydrate state per-route
• Misaligned security policies

Component And UI / UX

• Accessibility issues and inconsistent UI/UX

Source Code Management

• Configuring for Branch By Abstraction
• Developing Features and Experiments
• Sharing Code Between Features

For each of these we will explore solutions and refactor the code.

Centralizing Side Effects (API Calls, Etc.)

• Using Angular Query to optimize data from APIs
• Validating data from APIs and handling errors
• The use of a centralized "Store" for shared data in your application.

Rendering and State

• Using Observables and Angular Signals to keep the UI in synch
• Maintaining and protecting application user state
• Maintaining and protection application API state
• Routes in Angular as the primary source of state
• Planning API access around routes
• Securing routes with route guards, and their limitations

Components and Directives: Creating our Own Business Language with Angular

• Using components to clarify the design of the application
• Creating component hierarchies
• Centralizing concerns for consistency with components and directives

Working with your team to create conventions in your application

• How to safely share code between features
• How to implement CI using Branch Per Abstraction to avoid merge conflicts
• How to have a plan for versioning and keeping your applications dependencies up to date.

Expected Outcome of this Training

After completing this course, developers will have a good understanding of the affordances within Angular for building secure, performant, resilient, and evolving Angular applications.

Just as importantly, developers will understand how to structure an Angular application that doesn't become more brittle and "bog down" as the application grows over time.