Routes Demo

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 TreeAppComponent shows router-outlet as a child element, this makes sense since it is declared in the template.

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.

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.

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.

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.