Defining routes array in Angular - Mini Project: Build & Apply

Defining routes array

📖 Scenario: You are building a simple Angular app that has multiple pages. To navigate between pages, you need to set up routes.

🎯 Goal: Create a routes array that defines paths and their corresponding components for navigation in an Angular app.

📋 What You'll Learn

Create a routes array with exactly three routes

Each route must have a path and a component

Use the exact paths: '', 'about', and 'contact'

Use the exact component names: HomeComponent, AboutComponent, and ContactComponent

💡 Why This Matters

🌍 Real World

Routing is essential in Angular apps to navigate between different pages or views without reloading the page.

💼 Career

Understanding how to define and export routes is a fundamental skill for Angular developers working on single-page applications.

1

Create routes array with home route

Create a constant called routes and assign it an array with one route object. The route object should have path set to an empty string '' and component set to HomeComponent.

Angular

# Your code here

Need a hint?

Remember to use square brackets [] for the array and curly braces {} for the route object.

2

Add about route to routes array

Add a second route object to the routes array. This route should have path set to 'about' and component set to AboutComponent.

Angular

const routes = [
  { path: '', component: HomeComponent },
  // Add about route here
]

Need a hint?

Separate route objects with commas inside the array.

3

Add contact route to routes array

Add a third route object to the routes array. This route should have path set to 'contact' and component set to ContactComponent.

Angular

const routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // Add contact route here
]

Need a hint?

Make sure to add a comma after the second route object before adding the third.

4

Export routes array

Add an export statement to export the routes array so it can be used in the Angular module.

Angular

const routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];
// Export routes array here

Need a hint?

Use export const to make the routes array available outside this file.