Defining routes array in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the routes array in Angular?

The routes array defines the paths and their corresponding components for navigation in an Angular app. It tells Angular which component to show when a user visits a specific URL.

beginner

How do you define a simple route for a HomeComponent with path 'home'?

You add an object like { path: 'home', component: HomeComponent } inside the routes array.

beginner

What does the empty string path ('') represent in the routes array?

It represents the default or root path of the app, usually shown when the user visits the base URL.

intermediate

How can you define a route that redirects from one path to another?

Use an object with path, redirectTo, and pathMatch properties, like { path: '', redirectTo: 'home', pathMatch: 'full' }.

intermediate

Why is the order of routes in the routes array important?

Angular matches routes in order. More specific routes should come before less specific ones to avoid incorrect matches.

What property in a route object specifies which component to display?

A path

B redirectTo

C component

D loadChildren

The 'component' property tells Angular which component to show for that route.

How do you define a route that redirects from '' to 'home'?

A { path: '', redirectTo: 'home', pathMatch: 'full' }

B { path: '', loadChildren: 'home.module' }

C { path: 'home', redirectTo: '' }

D { path: '', component: HomeComponent }

Redirect routes use 'redirectTo' and 'pathMatch' to specify the redirect behavior.

What does the 'pathMatch: "full"' option mean in a redirect route?

A Match the full URL path exactly

B Match any part of the URL

C Ignore the URL path

D Match only the first segment

'full' means the entire URL path must match for the redirect to happen.

Where should you place wildcard routes (like '**') in the routes array?

A In the middle

B At the end

C At the beginning

D Anywhere

Wildcard routes should be last because Angular checks routes in order.

Which Angular module uses the routes array to configure routing?

A BrowserModule

B HttpClientModule

C FormsModule

D RouterModule

RouterModule.forRoot(routes) sets up routing using the routes array.

Explain how to define a routes array in Angular and what each route object needs.

Think about how Angular knows which component to show for a URL.

Describe why the order of routes in the routes array matters and give an example.

Consider what happens if a wildcard route is first.