Angular Routing

This course is all about Angular version 2+'s routing features. You'll learn how to define multiple routes, pass data to routes, preload data for your views, and more.
Course info
Rating
(310)
Level
Intermediate
Updated
Mar 30, 2017
Duration
4h 47m
Table of contents
Course Overview
Introduction
Routing Basics
Routing to Features
Route Parameters
Prefetching Data Using Route Resolvers
Child Routes
Grouping and Component-less Routes
Styling, Animating, and Watching Routes
Secondary Routes
Route Guards
Lazy Loading
Final Words
Description
Course info
Rating
(310)
Level
Intermediate
Updated
Mar 30, 2017
Duration
4h 47m
Description

There is more to routing in Angular version 2+ than just moving the user between multiple views of an application. In this course, Angular Routing, you'll discover how to define multiple routes and pass data to routes. Next, you'll explore how to preload data for your views and group your routes. Then, you'll learn how to guard your routes. Finally, you'll go through how to add styling and animation, and even improve performance by asynchronously loading your routes. When you are finished with this course, you'll have the knowledge you need to leverage more sophisticated routing features and support more real-world routing scenarios.

About the author
About the author

Deborah Kurata is a software developer, consultant, Pluralsight author, Google Developer Expert (GDE) and Microsoft Most Valuable Professional (MVP). Follow her on twitter: @deborahkurata

More from the author
Angular NgRx: Getting Started
Beginner
4h 4m
25 Jun 2018
Angular Component Communication
Intermediate
3h 39m
30 Jan 2018
Angular Reactive Forms
Intermediate
3h 54m
12 Jan 2017
More courses by Deborah Kurata
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello. My name is Deborah Kurata. Welcome to my course, Angular Routing, from Pluralsight. This course is for Angular version 2 and above. There is more to routing in Angular than just moving the user between multiple views of an application. After covering the basics, this course details how to configure child routes to build a tabbed edit form and secondary routes to display multiple routable panels. Sometimes you need to pass a little data to your routes with parameters. You'll see how to use required, optional, and query parameters. To make your app more visually appealing, you'll walk through how to style and animate routes, and react to route events to display a spinner while a route is loading. You'll learn how to pre-fetch data required for a route and guard routes to add permissions or prevent the user from leaving a route without confirmation. And you'll discover how to improve your application startup time by asynchronously loading your routes using lazy loading. By the end of this course, you will have the knowledge you need to leverage more sophisticated routing features and support more real-world routing scenarios. I hope you'll join me on this journey through Angular Routing from Pluralsight.

Introduction
Ah, routing, we often just use you to move the user between multiple views of an application. But you can do so much more. Welcome to Angular Routing from Pluralsight. My name is Deborah Kurata, and this course moves quickly beyond the basics to cover more sophisticated routing features to support more real-world routing scenarios. With routing, we have the tools we need to set up navigation through our application. We can define multiple routes, pass data to routes, reload data for our views, group our routes, guard our routes, add styling and animation, and even improve performance by asynchronously loading our routes. This introduction module explores the sample application, details how routing works, suggests several tips for getting the most from this course, and outlines the topics we'll cover in the remainder of this course. Let's get started.

Routing Basics
You have to know where you are to get where you're going, so we begin at the beginning with routing basics. Welcome back to Angular Routing from Pluralsight. My name is Deborah Kurata, and in this module, we walk through the basics of routing. As we design and build our application, we provide ways for the user to navigate its pages and features. This is the purpose of routing. With routing, we define the paths through the application and the user actions required to access each path. In this module, we examine how to set up basic routing in an Angular application. And we look at the differences between HTML5 and hash-based URLs used for routing. By the end of this module, we'll have the basic application routes defined including the route to the Welcome page, the default route, and a wildcard route to the 404 Not Found page. Let's get started.

Route Parameters
Sometimes we need to just pass a little data to our routes. Welcome back to Angular Routing from Pluralsight. My name is Deborah Kurata, and in this module, we pass data to our routes with route parameters. One component may have data that another component needs. We can swiftly pass that data as we route from one component to the next using route parameters. Parameters are best suited for little bits of data just like a runner would not want to pass a kettle bell, we don't want to use parameters to pass large amounts of data. Instead, we pass simple Id's or keywords. As an example, a Product List component displays a list of products, each with a unique product Id. To navigate to the Product Detail component, the Product List component must pass the Id of the product to display. We pass data as part of the route using route parameters. In this module, we start with required parameters. We look at how to configure a route with required parameters, how to populate the required parameters, and how to read the parameters from the route. We then look at optional parameters and query parameters. By the end of this module, we'll have configured the parameters and routed to the Product Detail and Product Edit routes. And we'll improve the Product List route to retain its filter by and image display settings as query parameters. Let's get started.

Styling, Animating, and Watching Routes
When working on client-side code, simply implementing features is often not enough. The app must also be user friendly and visually appealing. Welcome back to Angular Routing from Pluralsight. My name is Deborah Kurata, and in this module, we explore how to style, animate, and watch our routes. Oh my! We don't have to go over the top with our route styling or animation. A little goes a long way. In this module, we learn how to style the selected route to provide a visual indication of where the user is in the application. We look at ways to animate our route transitions to add some polish to the display. We discover how to watch our route events to better resolve routing issues. And we examine how to react to routing events to display a spinner while the route is loading. We won't add any new routes in this module. Rather, we'll polish the ones we have. Let's get started.

Secondary Routes
Multiple routes displayed at the same time and at the same level of the hierarchy are referred to as peer, sibling, auxiliary, or secondary routes. Regardless of what we call them, they are useful for building more complex user interfaces. Welcome back to Angular Routing from Pluralsight. My name is Deborah Kurata, and this module is about secondary routes. Secondary routes make it easy to display multiple panels or panes on the page, each containing different content and supporting independent navigation such as for a dashboard like this. If each of these panels displayed a single component, then using nested components is sufficient. But imagine that each panel supports independent navigation. For example, click on a chart to show its details or click on a country to drill down. Then each panel needs its own routing supported by one primary and any number of secondary routes. In this module, we begin with an overview of secondary routes, what they are, and when to use them. We then look at defining a named RouterOutlet to place the secondary views, configuring secondary routes, and activating secondary routes. Lastly, we examine how to clear secondary outlets. In our sample application, we'll add a name secondary outlet to define a popup area on the page. Then we'll add a secondary route to display a message log in that outlet. Let's get started.

Final Words
As you have seen throughout this course, Angular routing can do so much more than just move the user between multiple views of an application. Welcome back to Angular Routing from Pluralsight. My name is Deborah Kurata, and the final words in this course include a recap of our journey and a few pointers to additional information. We've come a long way. Remember when we started?