10.Routing

In a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. Routing in Angular refers to the mechanism used to navigate between different views or pages in a single-page application (SPA). It allows users to interact with different components of the application without the need for a full page reload. Angular provides a powerful routing module that enables developers to define and handle routes in a declarative manner.

To handle the navigation from one view to the next, you use the Angular Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view.

The Router module

Angular’s routing is managed by the RouterModule, which is part of the @angular/router package. It is a module that adds directives and providers for in-app navigation among views defined in an application. Use the Angular Router service of the RouterModule to declaratively specify application states and manage state transitions.

Importing the Router module

If an application is created with the –routing flag using the CLI as shown below, it automatically creates a routing module called AppRoutingModule.

ng new my-project –routing

The AppRoutingModule needs to be imported into the AppModule. 

The RouterModule and Routes need to be imported into the AppRoutingModule. The Angular CLI performs this step automatically. The CLI also sets up a Routes array for your routes and configures the imports and exports arrays for @NgModule(). 

import { NgModule } from ‘@angular/core’;

import { Routes, RouterModule } from ‘@angular/router’;

const routes: Routes = [];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Configuration

To configure the routing, you need to define the routes in the Routes array.

Each route in this array is a JavaScript object that contains two properties. The first property, path, defines the URL path for the route. The second property, component, defines the component Angular should use for the corresponding path.

const routes: Routes = [

  { path: ‘first-component’, component: FirstComponent },

  { path: ‘second-component’, component: SecondComponent },

];

Now that you have defined your routes, you can add them to your application. First, add links to the two components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include <router-outlet>. This element informs Angular to update the application view with the component for the selected route.

<h1>Angular Router App</h1>

<nav>

  <ul>

    <li><a routerLink=”/first-component”>First Component</a></li>

    <li><a routerLink=”/second-component”>Second Component</a></li>

  </ul>

</nav>

<router-outlet></router-outlet>

Child routes

As your application grows more complex, you may want to create routes that are relative to a component other than your root component. These types of nested routes are called child routes. This means you’re adding a second <router-outlet> to your app, because it is in addition to the <router-outlet> in AppComponent.

In this example, there are two additional child components, child-a, and child-b. Here, FirstComponent has its own <nav> and a second <router-outlet> in addition to the one in AppComponent.

<h2>First Component</h2>

<nav>

  <ul>

    <li><a routerLink=”child-a”>Child A</a></li>

    <li><a routerLink=”child-b”>Child B</a></li>

  </ul>

</nav>

<router-outlet></router-outlet>

A child route is like any other route, in that it needs both a path and a component. The one difference is that you place child routes in a children array within the parent route.

const routes: Routes = [

  {

    path: ‘first-component’,

    component: FirstComponent,

    children: [

      {

        path: ‘child-a’,

        component: ChildAComponent,

      },

      {

        path: ‘child-b’,

        component: ChildBComponent,

      },

    ],

  },

];