Angular Router In Depth
4.7 (32 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,695 students enrolled

Angular Router In Depth

Build large-scale Angular Single Page Applications (SPAs) with the powerful Angular Router
Hot & New
4.7 (32 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,695 students enrolled
Last updated 8/2020
English [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 3 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 35 lectures 04:50:49
+ Introduction
7 lectures 47:26
Download the Angular Router Jumpstart E-Book
What are Single Page Applications? Advantages and Downsides
Router Essential Concepts - The routerLink and routerLinkActive Directives
+ Angular Router Essentials
6 lectures 01:03:47
Angular Router Lazy Loaded Modules - Runtime Demo
Angular Router Configuration - Best Practices
Router Path Variables - Variable Target Routes with the Router Link Directive
Angular Router Resolver Services - Building a Linkable Page in a SPA
Angular Router Loading Indicator - Detecting Route Transitions and Lazy Loading
+ Angular Router Master Detail with Detail to Detail Navigation
6 lectures 55:36
Angular Router Child Routes Demo - The Lessons List Component
Master Detail Implementation - Routing from the Master to the Detail Component
Implementing the Lesson Detail Resolver
Programmatic Router Navigation with the Router Service
Understanding Route Snapshots vs Route Observables - When to Use Each and Why
+ Angular Router Guards In Depth
5 lectures 47:49
Router Guards Section Introduction - Authentication Store Review
Understanding CanActivateChild Guards
CanDeactivate Router Guards - A Practical Example
Angular Router CanLoad Guards
+ Angular Router In Depth - Other Topics
8 lectures 01:00:16
What is an Angular Router Preloading Strategy?
Angular Router Custom Preloading Strategy
Angular Router Query Parameters - Demo
Configuring routing behaviour with routerLinkActiveOptions
Angular Router Secondary Outlets - Step-by-Step Explanation
Angular Router Secondary Outlets - Some Known Issues to be aware of
Angular Router Module Extra Options - enableTracing and useHash
Angular Router Extra Options - Recommended Settings
+ Conclusion
3 lectures 15:54
Other Courses
Bonus Lecture
Angular Router In Depth - Conclusions and Key Takeaways
  • Some Angular is essential, but not at an advanced level

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.

Who this course is for:
  • Angular developers, looking to learn more about the Angular Router