Angular Router In Depth (Angular 18)

Angular Router In Depth (Angular 18), available at $89.99, has an average rating of 4.61, with 34 lectures, based on 1420 reviews, and has 16273 subscribers.

You will learn about 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 This course is ideal for individuals who are Angular developers, looking to learn more about the Angular Router It is particularly useful for Angular developers, looking to learn more about the Angular Router.

Enroll now: Angular Router In Depth (Angular 18)

Summary

Title: Angular Router In Depth (Angular 18)

Price: $89.99

Average Rating: 4.61

Number of Lectures: 34

Number of Published Lectures: 34

Number of Curriculum Items: 34

Number of Published Curriculum Objects: 34

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Angular developers, looking to learn more about the Angular Router

Target Audiences

Angular developers, looking to learn more about the Angular Router

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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Angular Router In Depth Course – Helicopter View

Lecture 2: Download the Angular Router Jumpstart E-Book

Lecture 3: IMPORTANT

Lecture 4: Angular Router In Depth – Development Environment Setup

Lecture 5: What are Single Page Applications? Advantages and Downsides

Lecture 6: What is the Angular Router? Essential Concepts (Routes, Paths and Outlets)

Lecture 7: Router Essential Concepts – The routerLink and routerLinkActive Directives

Chapter 2: Angular Router Essentials

Lecture 1: How to setup Lazy Loading with the Angular Router

Lecture 2: Angular Router Lazy Loaded Modules – Runtime Demo

Lecture 3: Angular Router Configuration – Best Practices

Lecture 4: Router Path Variables – Variable Target Routes with the Router Link Directive

Lecture 5: Angular Router Resolver Services – Building a Linkable Page in a SPA

Lecture 6: Angular Router Loading Indicator – Detecting Route Transitions and Lazy Loading

Chapter 3: Angular Router Master Detail with Detail to Detail Navigation

Lecture 1: Angular Router Child Routes – Step-by-Step Explanation

Lecture 2: Angular Router Child Routes Demo – The Lessons List Component

Lecture 3: Master Detail Implementation – Routing from the Master to the Detail Component

Lecture 4: Implementing the Lesson Detail Resolver

Lecture 5: Programmatic Router Navigation with the Router Service

Lecture 6: Understanding Route Snapshots vs Route Observables – When to Use Each and Why

Chapter 4: Angular Router Guards In Depth

Lecture 1: Router Guards Section Introduction – Authentication Store Review

Lecture 2: CanActivate Router Guards – Authentication Guards

Lecture 3: Understanding CanActivateChild Guards

Lecture 4: CanDeactivate Router Guards – A Practical Example

Lecture 5: Angular Router CanLoad Guards

Chapter 5: Angular Router In Depth – Other Topics

Lecture 1: What is an Angular Router Preloading Strategy?

Lecture 2: Angular Router Custom Preloading Strategy

Lecture 3: Angular Router Query Parameters – Demo

Lecture 4: Configuring routing behaviour with routerLinkActiveOptions

Lecture 5: Angular Router Secondary Outlets – Step-by-Step Explanation

Lecture 6: Angular Router Secondary Outlets – Some Known Issues to be aware of

Lecture 7: Angular Router Module Extra Options – enableTracing and useHash

Lecture 8: Angular Router Extra Options – Recommended Settings

Chapter 6: Conclusion

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Angular Router In Depth – Conclusions and Key Takeaways

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 8 votes

2 stars: 13 votes

3 stars: 80 votes

4 stars: 471 votes

5 stars: 848 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!