Guides

Routes Demo

Image NYC Metro

Launch Demo Application

Description

The Routes Angular application demonstrates the uses of routes as well as lazy loaded child routes. The application also makes use of multiple router outlets.

The application contains 10 components and 2 modules. The root module app.module.ts contains the following components:

  • AppComponent
  • HomeComponent
  • ParksComponent
  • ParkOneComponent
  • ParkTwoComponent
  • ParkThreeComponent

The city module city.module.ts contains:

  • CityComponent
  • CityOneComponent
  • CityTwoComponent
  • CityThreeComponent

Architecture

The component code is simple, the AppComponent has a single router outlet. When the ParksComponent or CityComponent component is loaded, a second router outlet becomes available. Components from the child route get loaded into the second router outlet.

The root module app.module.ts provides routes for root and parks, which are:

Routes Component (View)
/ AppComponent
/home HomeComponent
/parks ParksComponent
/parks/park1 ParkOneComponent
/parks/park2 ParkTwoComponent
/parks/park3 ParkThreeComponent

The root path / gets redirected to /home. Also the lazy loaded route for cities is defined in the root module.

The city module city.module.ts contains the routes for cities below:

Routes Component (View)
/cities/city1 CityOneComponent
/cities/city2 CityTwoComponent
/cities/city3 CityThreeComponent

Opening Augury

To use Augury, we need to open DevTools.

Ctrl + Shift + I (Cmd + Opt + I on Mac)

When DevTools opens, select the Augury tab located on the far right.

Router outlet

With Augury opened, in the Component Tree AppComponent shows router-outlet as a child element, this makes sense since it is declared in the template.

Image Component Tree

In the browser, click on the Parks button. This will load the ParksComponent and update the Component Tree view. You will notice a second router-outlet that appears under ParksComponent, this is where each of the park components will load into.

Images Routes Parks

Try clicking on each of the links labeled:

  • Park 1
  • Path 2
  • Park 3

Notice how each child component is loaded under ParksComponent just underneath router-outlet. This is how Angular inserts a component into the DOM, as a sibling element of router-outlet.

Routes

To see the current routes for the application, click on the Router Tree tab. This will show all the defined routes that are currently loaded in the application. The routes shows the path to each component (think view). The AppComponent path is the root /. The path to HomeComponent is /home, likewise the path to the child component ParkThreeComponent is /parks/park3.

Image Route tree

Take a look at the bottom of the router tree, you will notice cities [Lazy], this is a lazy loaded route. This means that the child components for the path /cities will be loaded on demand, this takes place when the Cities button is clicked. Let us see this in action, click on the Cities button and pay attention to how the lazy route is updated when the feature Angular module is loaded.

Image Lazy routes

That is all there is to Angular routes. We have looked at router-outlet, router tree and how it represents the path to the view and finally noticing lazy loaded routes.