Add Routing in Angular 10 App Tutorial

This is a step by step PHP 7 & MySQL REST API tutorial, In this tutorial i am going to apportion with you how to engender a PHP 7 CRUD (Engender, Read, Update, Expunge) RESTful API with MySQL database.
If you aspire to hold a fundamental understanding of PHP frameworks, then you must check out our anterior tutorial where we described How to Engender a PHP Laravel 6 CRUD Web App with MySQL.

This tutorial is going to cover how to build simple CRUD REST API in PHP and MySQL, Test PHP RESTful API with Postmen and Setup PHP development environment on your local development system from scratch.

The Angular 10 Routing Module

Basically, the CLI will create a src/app/app-routing.module.ts file with the following code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

It’s an Angular module that imports a RouterModule with routes and exports a RouterModule. You only need to add your application routes in the routes array.

The routes array will contain all the routes of the application. After creating the components, you'll need to add the corresponding routes to this array.

The Angular 10 Router Outlet

The CLI will also add a router outlet to the src/app/app.component.html file:

<router-outlet></router-outlet>

The Router outlet is where the Router inserts the component that matches the current route.

Adding Angular 10 Component Routes to The Router Configuration

Now, let's add components to our router configuration and navigation links in our template.

Here, we'll assume we have already generated the following components using the ng g component command:

• AccountListComponent
• AccountCreateComponent
• ContactListComponent
• ContactCreateComponent
• ActivityListComponent
• ActivityCreateComponent

Open the src/app/app-routing.module.ts file and start by adding the following imports to the components:

import { AccountListComponent } from './account-list/account-list.component';
import { AccountCreateComponent } from './account-create/account-create.component';
import { ContactListComponent } from './contact-list/contact-list.component';
import { ContactCreateComponent } from './contact-create/contact-create.component';
import { ActivityListComponent } from './activity-list/activity-list.component';
import { ActivityCreateComponent } from './activity-create/activity-create.component';

Adding a Redirect Route

For now, we want to redirect the visitor to the /contacts path when the home URL is visited so the first route we'll add is an empty path route:

{ path:  '', redirectTo:  'contacts', pathMatch:  'full' },

Here we used a combination of the path and redirectTo properties to create a route. The path property takes the string that represents the route’s segment that we need to match and the redirectTo property takes another path where the router should redirect the user.

What’s the Path Match Strategy?

The pathMatch property specifies the matching strategy. The full value means that we want to fully match the path. We can also use the prefix matching strategy which matches the path if the route starts with that path but doesn’t require to be exact match.

Next let's add the other paths:

{
    path: 'accounts',
    component: AccountListComponent
  },
  {
    path: 'create-account',
    component: AccountCreateComponent
  },
  {
    path: 'contacts',
    component: ContactListComponent
  },
  {
    path: 'create-contact',
    component: ContactCreateComponent
  },
  {
    path: 'activities',
    component: ActivityListComponent
  },
  {
    path: 'create-activity',
    component: ActivityCreateComponent
  }

In these examples we used a combination of the path and component properties to create the routes.

We didn’t specify a matching strategy with the pathMatch property which means the router will use the default strategy which is the prefix strategy.

This is a screenshot of our unstyled UI at ths point:

In the next tutorial, we'll style this UI with Material Design.

Adding Angular 10 Navigation Using routerLink

Let’s now see how we can add navigation using the routerLink directive

Go ahead and open the src/app/app.component.html file where the router outlet exists and let’s add the navigation links before the router outlet:

<a [routerLink]="'/accounts'"> Accounts </a>
<a [routerLink]="'/create-account'"> Create Account </a>
<a [routerLink]="'/contacts'"> Contacts </a>
<a [routerLink]="'/create-contact'"> Create Contact </a>
<a [routerLink]="'/activities'"> Activities </a>
<a [routerLink]="'/create-activity'"> Create Activity </a>
<div>
  <router-outlet></router-outlet>
</div>

Conclusion

In this tutorial, we’ve learned about Angular 10 routing and we’ve added navigation to our simple CRM application.

See you in the next part where we’ll be adding Angular Material to our application to build a professional-looking UI.