YoVDO

Learn Angular Router for Real-World Applications

Offered By: egghead.io

Tags

Angular Courses Web Development Courses Routing Courses Lazy Loading Courses

Course Description

Overview

One of the fundamental concepts for building a successful large-scale application is breaking it down into smaller, potentially independent, but mainly more controllable and maintainable parts. This starts at the component level, the module level, and finally the application routing level. Routing is a core part of every application—it should be part of every developer’s tool belt.
This course will guide you step-by-step from understanding the basic concepts of routing to mastering expert-level topics. We'll start by setting up and configuring the router, then define simple routes and child routes and best practices of organizing them using the Routing Module pattern.
You'll learn about the supported URL types and its segments, how to define them, and how to leverage RxJS Observables for subscribing to route updates. We'll also learn how to secure routes with various types of guards and about performance tuning with the router’s lazy loading and preloading capabilities.

Syllabus

  • Define and configure a route with the Angular router
  • Create a redirect rule with the Angular router
  • Catch an invalid route navigation with the Angular router
  • Organize routes using the Routing Modules pattern in Angular
  • Define and read route parameters with the Angular router
  • Define and read query parameters with the Angular router
  • Forward URL parameters to an Angular Service to retrieve the desired data
  • Create a hyperlink to an Angular route using RouterLink
  • Highlight the currently active route with the `routerLinkActive` directive in Angular
  • Resolve data as part of the route transition in Angular
  • Pass static data to a component as part of the route transition in Angular
  • Navigate to another route from within my Angular component code
  • Preserve the current route’s query parameters when navigating with the Angular Router
  • Create a side-by-side navigation between a list and its detail with the Angular Router
  • Navigate to a component relative location with the Angular router
  • Lazy load a route with the Angular router
  • Avoid delays for lazy modules by applying a preloading strategy with the Angular router
  • Define a custom preloading strategy for the Angular router
  • Prevent a route activation based on user permissions with the Angular router
  • Prevent a route from being lazy loaded based on user permissions with the Angular router
  • Notify user about unsaved data when leaving a component using the Angular Router

Taught by

Juri Strumpflohner

Related Courses

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru