About the course
Angular has entered a new "Renaissance." With the introduction of Signals, Standalone components, and a shift away from complex NgModules, the framework is now more performant and easier to begin using in production than ever before. This 4-day intensive course is designed to take developers from zero to "Modern Angular" proficiency.
We focus on the most stable and forward-looking features of the framework. You will learn to architect applications using a Signals-based reactivity model, build modular UI with Standalone Components, and implement robust testing using Vitest and Playwright. Beyond just syntax, this course emphasizes professional best practices: accessibility (A11y), clean dependency injection, and efficient state management using the new NgRX Signal Store. By the end of this course, you will have a complete mental model of how to build, test, and deploy production-ready Angular applications in the modern era.
Online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Build Standalone Apps: Structure applications without legacy NgModules for better performance.
- Master Signals: Implement reactive data flows using signal, computed, and effect.
- Design Reusable Components: Communication via modern input() and output() functions.
- Navigate Complex Routing: Implement lazy-loading and protected routes with modern functional guards.
- Handle Data Efficiently: Use HttpClient and the new Resource API for clean asynchronous data fetching.
- Test with Confidence: Write unit tests with Vitest and end-to-end tests with Playwright.
-
Our Angular training course is aimed at:
Web Developers: Transitioning from other frameworks (React, Vue) or vanilla JavaScript.
Backend Developers: Needing to build robust, type-safe enterprise frontends.
UI/UX Engineers: Wanting to understand how to implement accessible, component-based designs in Angular.
-
To fully benefit from this course you should have good working knowledge of:
Modern JavaScript / ES6 proficiency: Comfort with ES6+ features (arrow functions, destructuring, modules).
HTML & CSS basics: Understanding of semantic markup and styling.
Basic TypeScript: Knowledge of types and interfaces is helpful, though core concepts will be covered.
We can build a custom syllabus for you that prepares your team for modern Angular development with primers / refreshers of the pre-requisite skills, or stretch goals with topics from our Advanced Angular workshop.
-
This Modern Angular course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Angular Architecture & Environment
The Modern Angular Ecosystem: Architecture overview (Components, Services, and Signals).
Release Cycles: Understanding stable vs. developer-preview features in the six-monthly release program.
Tooling: Setting up a modern development environment and getting the most from Angular documentation.
TypeScript for Angular: Interfaces, Classes, and Decorators essential for the framework.
Accessibility (A11y): Ensuring inclusivity is built into the project from the start.
Components & Templates in Depth
Hierarchy Design: Designing the user experience as a tree of components.
Data Flow: Using Signals, Inputs, and Outputs for reactive communication.
Modern Templates: Utilizing the new control flow syntax (@if, @for, @switch).
Styling: Component-specific styles (CSS/SCSS) and shadow DOM encapsulation.
Lifecycle: Using lifecycle hooks effectively in a signals-based world.
Performance & The Angular CLI
The Standalone Era: Why modules are being phased out and the performance benefits of standalone architecture.
Lazy Loading: Dynamically loading components and routes to improve initial load times.
CLI Mastery: Generating boilerplate, serving, and the new production build process (Esbuild/Vite).
Debugging: Using Angular Developer Tools to inspect signals and change detection.
Dependency Injection & Services
The DI System: Understanding providers, injectors, and working within Injection Contexts.
Business Logic: Creating services for data sharing and external API interaction via HttpClient.
Modern Data Fetching: A preview of the future: Resource and HttpResource.
Error Handling: Catching and managing exceptions gracefully in services.
Routing, Navigation & Forms
Client-Side Routing: Setting up routes, parameters, and lazy-loaded modules.
Functional Guards: Modern techniques for authentication and authorization.
Interactive Forms: Template-driven vs. Reactive forms; when to use FormsModule vs. data-driven approaches.
Validation: Techniques that provide immediate feedback without frustrating the user.
Signals-Based Reactivity & State
The Signal Revolution: Understanding signal, computed, and linkedSignal.
Async Streams: Handling asynchronous operations and data streams without excessive boilerplate.
State Management: Deciding where data should live (Services vs. LocalStorage).
NgRX Signal Store: Implementing the lightweight, signals-native state management solution.
Testing & Deployment
Unit Testing with Vitest: Moving away from Karma/Jasmine to high-performance Vitest tools.
E2E with Playwright: Installing Playwright and writing user story-driven tests.
Automated Quality: Recording actions to create tests and using traces for reproducibility.
Final Deployment: Building for production and ensuring "High Quality of Service" (QoS).
-
https://angular.dev/ - the home of Angular
https://nodejs.org/en - To get started with Angular, you need npm (included with Node)
https://www.jetbrains.com/webstorm/ - popular JS and TypeScript editor from JetBrains
https://code.visualstudio.com/ - popular JS and TypeScript editor from Microsoft
Trusted by
