This tutorial lesson demonstrates how to add routes to your app.
Time required: expect to spend about 25 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
At the end of this lesson your application will have support for routing.
This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In single page applications (SPA), only parts of the page is updated to represent the requested view for the user.
The Angular Router enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application.
In this lesson, you will enable routing in your application to navigate to the details page.
Perform these steps on the app code in your IDE.
From the terminal, enter the following command to create the DetailsComponent
:
ng generate component details --standalone --inline-template --skip-tests
This component will represent the details page that provides more information on a given housing location.
In the src/app
directory, create a file called routes.ts
. This file is where we will define the routes in the application.
In main.ts
, make the following updates to enable routing in the application:
Import the routes file and the provideRouter
function:
import { provideRouter } from '@angular/router'; import routeConfig from './app/routes';
Update the call to bootstrapApplication
to include the routing configuration:
bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), provideRouter(routeConfig) ] } ).catch(err => console.error(err));
In src/app/app.component.ts
, update the component to use routing:
Add a file level import for RoutingModule
:
import { RouterModule } from '@angular/router';
Add RouterModule
to the @Component
metadata imports
imports: [ HomeComponent, RouterModule, ],
In the template
property, replace the <app-home></app-home>
tag with the <router-outlet>
directive and add a link back to the home page. Your code should match this code:
template: ` <main> <a [routerLink]="['/']"> <header class="brand-name"> <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true"> </header> </a> <section class="content"> <router-outlet></router-outlet> </section> </main> `,
In the previous step you removed the reference to the <app-home>
component in the template. In this step, you will add a new route to that component.
In routes.ts
, perform the following updates to create a route.
Add a file level imports for the HomeComponent
, DetailsComponent
and the Routes
type that you'll use in the route definitions.
import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { DetailsComponent } from './details/details.component';
Define a variable called routeConfig
of type Routes
and define two routes for the app:
const routeConfig: Routes = [ { path: '', component: HomeComponent, title: 'Home page' }, { path: 'details/:id', component: DetailsComponent, title: 'Home details' } ]; export default routeConfig;
The entries in the routeConfig
array represent the routes in the application. The first entry navigates to the HomeComponent
whenever the url matches ''
. The second entry uses some special formatting that will be revisited in a future lesson.
Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.
In this lesson, you enabled routing in your app as well as defined new routes. Now your app can support navigation between views. In the next lesson, you will learn to navigate to the "details" page for a given housing location.
You are making great progress with your app, well done.
If you are having any trouble with this lesson, you can review the completed code for it in the live example.
For more information about the topics covered in this lesson, visit:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-10