This tutorial describes how you can build a single-page application, SPA that uses multiple Angular routes.
\nIn a Single Page Application (SPA), all of your application's functions exist in a single HTML page.\nAs users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page. This pattern can significantly improve your application's user experience.
\nTo define how users navigate through your application, you use routes. You can add routes to define how users navigate from one part of your application to another.\nYou can also configure routes to guard against unexpected or unauthorized behavior.
\nTo explore a sample app featuring the contents of this tutorial, see the
To complete this tutorial, you should have a basic understanding of the following concepts:
\nYou might find the Tour of Heroes tutorial helpful, but it is not required.
\nUsing the Angular CLI, create a new application, angular-router-sample. This application will have two components: crisis-list and heroes-list.
\nCreate a new Angular project, angular-router-sample.
\nWhen prompted with Would you like to add Angular routing?, select N.
When prompted with Which stylesheet format would you like to use?, select CSS.
After a few moments, a new project, angular-router-sample, is ready.
From your terminal, navigate to the angular-router-sample directory.
Create a component, crisis-list.
\nIn your code editor, locate the file, crisis-list.component.html and replace\nthe placeholder content with the following HTML.
Create a second component, heroes-list.
\nIn your code editor, locate the file, heroes-list.component.html and replace the placeholder content with the following HTML.
In your code editor, open the file, app.component.html and replace its contents with the following HTML.
Verify that your new application runs as expected by running the ng serve command.
Open a browser to http://localhost:4200.
You should see a single web page, consisting of a title and the HTML of your two components.
\nRouterModule from @angular/routerlinkRouting allows you to display specific views of your application depending on the URL path.\nTo add this functionality to your sample application, you need to update the app.module.ts file to use the module, RouterModule.\nYou import this module from @angular/router.
From your code editor, open the app.module.ts file.
Add the following import statement.
In this section, you'll define two routes:
\n/crisis-center opens the crisis-center component./heroes-list opens the heroes-list component.A route definition is a JavaScript object. Each route typically has two properties. The first property, path, is a string\nthat specifies the URL path for the route. The second property, component, is a string that specifies\nwhat component your application should display for that path.
From your code editor, open the app.module.ts file.
Locate the @NgModule() section.
Replace the imports array in that section with the following.
This code adds the RouterModule to the imports array. Next, the code uses the forRoot() method of the RouterModule to\ndefine your two routes. This method takes an array of JavaScript objects, with each object defining the proprties of a route.\nThe forRoot() method ensures that your application only instantiates one RouterModule. For more information, see\nSingleton Services.
router-outletlinkAt this point, you have defined two routes for your application. However, your application\nstill has both the crisis-list and heroes-list components hard-coded in your app.component.html template. For your routes to\nwork, you need to update your template to dynamically load a component based on the URL path.
To implement this functionality, you add the router-outlet directive to your template file.
From your code editor, open the app.component.html file.
Delete the following lines.
\nAdd the router-outlet directive.
View your updated application in your browser. You should see only the application title. To\nview the crisis-list component, add crisis-list to the end of the path in your browser's\naddress bar. For example:
Notice that the crisis-list component displays. Angular is using the route you defined to dynamically load the\ncomponent. You can load the heroes-list component the same way:
Currently, your application supports two routes. However, the only way to use those routes\nis for the user to manually type the path in the browser's address bar. In this section, you'll\nadd two links that users can click to navigate between the heroes-list and crisis-list\ncomponents. You'll also add some CSS styles. While these styles are not required, they make\nit easier to identify the link for the currently-displayed component. You'll add that functionality\nin the next section.
Open the app.component.html file and add the following HTML below the title.
This HTML uses an Angular directive, routerLink. This directive connects the routes\nyou defined to your template files.
Open the app.component.css file and add the following styles.
If you view your application in the browser, you should see these two links. When you click\non a link, the corresponding component appears.
\nWhile users can navigate your application using the links you added in the previous section,\nthey don't have an easy way to identify what the active route is. You can add this functionality\nusing Angular's routerLinkActive directive.
From your code editor, open the app.component.html file.
Update the anchor tags to include the routerLinkActive directive.
View your application again. As you click one of the buttons, the style for that button updates\nautomatically, identifying the active component to the user. By adding the routerLinkActive\ndirective, you inform your application to apply a specific CSS class to the active route. In this\ntutorial, that CSS class is activebutton, but you could use any class that you want.
In this step of the tutorial, you add a route that redirects the user to display the /heroes-list component.
From your code editor, open the app.module.ts file.
In the imports array, update the RouterModule section as follows.
Notice that this new route uses an empty string as its path. In addition, it replaces the component property with two new ones:
redirectTo. This property instructs Angular to redirect from an empty path to the\nheroes-list path.pathMatch. This property instructs Angular on how much of the URL to match. For this\ntutorial, you should set this property to full. This strategy is recommended when\nyou have an empty string for a path. For more information about this property,\nsee the Route API documentation.Now when you open your application, it displays the heroes-list component by default.
It is possible for a user to try to access a route that you have not defined. To account for\nthis behavior, the best practice is to display a 404 page. In this section, you'll create a 404 page and\nupdate your route configuration to show that page for any unspecified routes.
\nFrom the terminal, create a new component, PageNotFound.
From your code editor, open the page-not-found.component.html file and replace its contents\nwith the following HTML.
Open the app.module.ts file. In the imports array, update the RouterModule section as follows.
The new route uses a path, **. This path is how Angular identifies a wildcard route. Any route\nthat does not match an existing route in your configuration will use this route.
Try navigating to a non-existing route on your application, such as http://localhost:4200/powers.\nThis route doesn't match anything defined in your app.module.ts file. However, because you\ndefined a wildcard route, the application automatically displays your PageNotFound component.
At this point, you have a basic application that uses Angular's routing feature to change\nwhat components the user can see based on the URL address. You have extended these features\nto include a redirect, as well as a wildcard route to display a custom 404 page.
\nFor more information about routing, see the following topics:
\n\n\n \n