Angular Router In Depth (Angular 17)

What you'll learn
Code in Github repository with downloadable ZIP files per section
In-depth guided tour to the Angular Router
Angular Router Best Practices
Leverage Lazy-loading to the maximum
Master-Detail with Detail to Detail Navigation
Preloading In Depth
Router Guards In Depth
Advanced Router Concepts
Requirements
Some Angular is essential, but not at an advanced level
Description
This Course in a Nutshell
In this course, we are going to learn in detail the advantages of building a frontend UI as a
single-page application
, as opposed to a traditional multi-page application.
Single-page applications (or SPAs) have been around for years now, and are today
more popular than ever
as a simplified way to build enterprise frontends or internet product dashboards.
SPAs typically give the end-user a
much better user experience
, due to their better-perceived performance and responsiveness. In this course, we will learn how to use the Angular Router to turn our Angular application into a SPA.
Course Overview
We are going take as a starting point a small Angular application that does not have any routing yet. We are then going to learn how to
configure the Angular Router from scratch
. We will assume no prior Angular Router knowledge, as we explain everything from first principles.
We will start by introducing the
essential router concepts
such as route configuration, paths, router outlets, and router navigation links. From these essential concepts, will build a much more advanced routing scenario.
We will learn how to build a master-detail with detail-to-detail navigation scenario, and we will use this example to introduce all the
advanced routing concepts
and powerful features that the Angular Router offers us.
This will include lazy loading modules, data pre-fetching with Resolvers, protecting route access with Guards, custom pre-loading strategies, secondary outlets (auxiliary routes), and much more.
Table of Contents
This course covers the following topics
What is a single page application?
Best practices for router configuration: home route, page not found route, etc.
Essential Router configurations concepts: paths, components, and outlets
Essential Router navigation concepts; the routerLink and routerLinkActive directives
Relative vs Absolute routing best practices
Understanding Path matching and router configuration order
Router Path and Query parameters
Router redirects
Deep linking with the Angular router: master-detail with detail-to-detail navigation scenario
Understanding router snapshots vs router observables
Lazy loaded routes
Route data pre-loading with Resolvers
Router module pre-loading strategies, building a custom preloading strategy
Router Guards - CanActivate and CanActivateChild Authentication Guards
Preventing route exits with CanDeactivate guards
Checking if a lazy-loaded module can be loaded with CanLoad
Router Loading Indicator
Understanding Router Hash location strategy
Secondary router outlets and auxiliary routes
The router module extra configuration options: enableTracing, scrollPositionRestoration, paramsInheritanceStrategy, etc
What Will You Learn In this Course?
At the end of this course, you will feel comfortable setting up the Angular Router from scratch in an existing Angular application
You will know not only the essentials of the router together with all its most advanced features, but most importantly you will know exactly when to use each feature and why, and you will know numerous best practices that will help you to make the most out of the Angular Router
Have a look at the course free lessons below, and please enjoy the course!
Who this course is for
Angular developers, looking to learn more about the Angular Router
Homepage