Angular Router In Depth (Angular 17)

Focused View

Angular University

4:46:45

5 View

1 - Introduction

1 - Angular Router In Depth Course Helicopter View.mp4

05:28

2 - Angular-Router-Jumpstart-Ebook-Udemy.pdf

2 - Download the Angular Router Jumpstart EBook.html

3 - IMPORTANT.html

4 - Angular Router In Depth Development Environment Setup.mp4

10:55

5 - What are Single Page Applications Advantages and Downsides.mp4

14:31

6 - What is the Angular Router Essential Concepts Routes Paths and Outlets.mp4

09:10

7 - Router Essential Concepts The routerLink and routerLinkActive Directives.mp4

07:00

2 - Angular Router Essentials

8 - How to setup Lazy Loading with the Angular Router.mp4

09:28

9 - Angular Router Lazy Loaded Modules Runtime Demo.mp4

09:23

10 - Angular Router Configuration Best Practices.mp4

10:21

11 - Router Path Variables Variable Target Routes with the Router Link Directive.mp4

07:59

12 - Angular Router Resolver Services Building a Linkable Page in a SPA.mp4

16:42

13 - Angular Router Loading Indicator Detecting Route Transitions and Lazy Loading.mp4

09:55

3 - Angular Router Master Detail with Detail to Detail Navigation

14 - Angular Router Child Routes StepbyStep Explanation.mp4

09:08

15 - Angular Router Child Routes Demo The Lessons List Component.mp4

08:04

16 - Master Detail Implementation Routing from the Master to the Detail Component.mp4

04:39

17 - Implementing the Lesson Detail Resolver.mp4

12:21

18 - Programmatic Router Navigation with the Router Service.mp4

09:16

19 - Understanding Route Snapshots vs Route Observables When to Use Each and Why.mp4

12:09

4 - Angular Router Guards In Depth

20 - Router Guards Section Introduction Authentication Store Review.mp4

12:34

21 - CanActivate Router Guards Authentication Guards.mp4

11:30

22 - Understanding CanActivateChild Guards.mp4

07:01

23 - CanDeactivate Router Guards A Practical Example.mp4

07:07

24 - Angular Router CanLoad Guards.mp4

09:38

5 - Angular Router In Depth Other Topics

25 - What is an Angular Router Preloading Strategy.mp4

07:50

26 - Angular Router Custom Preloading Strategy.mp4

07:17

27 - Angular Router Query Parameters Demo.mp4

06:37

28 - Configuring routing behaviour with routerLinkActiveOptions.mp4

06:31

29 - Angular Router Secondary Outlets StepbyStep Explanation.mp4

10:06

30 - Angular Router Secondary Outlets Some Known Issues to be aware of.mp4

04:59

31 - Angular Router Module Extra Options enableTracing and useHash.mp4

06:08

32 - Angular Router Extra Options Recommended Settings.mp4

10:48

6 - Conclusion

33 - Bonus Lecture.html

34 - Angular Router In Depth Conclusions and Key Takeaways.mp4

12:10

Description

Build large-scale Angular 17 Single Page Applications (SPAs) with the powerful Angular Router

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

Who is this for?

Angular developers, looking to learn more about the Angular Router

What You Need to Know?

Some Angular is essential, but not at an advanced level

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Angular

Angular University

Instructor's Courses

Hello, I'm Vasco Cavalheiro and I'm an online instructor at the Angular University.Over the years I have helped over 100k developers to learn the Angular framework and its surrounding ecosystem of technologies.Check out my Linkedin in the links section on the top right.About the Angular University:The Angular University aims to be the one place that you go in order to learn and keep up with the whole Angular ecosystem. We provide premium quality video tutorials, screencast style.No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.More about me:I'm a Software Developer with many years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years. I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. I also love to teach, write and talk about technology. I am looking forward to be your Angular instructor,Kind Regards,Vasco

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.