Overview Of Location Strategies And Child Route In Routing

In my previous article, we have learned about routing. In this article, we will learn about location strategies and child routes.

Routing and wildcard route in Angular

Location Strategies

Location Strategies are also called browser URL styles. Location strategy is a process to define how the URL will look in the browser.

Angular supports the concept of SPAs. In a single page application, the application will not send the URL to the server and will also not reload the page. In a single page application when the user requests for a new page the application will not send the URL to the server every time and the page will not reload every time. The URL is local in an Angular application. The Angular router makes navigation between the components and renders its view and updates the URL. The entire process happens on a local browser. In Angular, this process is managed by location strategies.

Types of Location Strategies

HashLocation
PathLocation

HashLocation

You can use Hash location strategies by adding the following lines in the Appmodule.

Hashlocationstrategy RouterModule.forRoot(appRoutes, { useHash: true }

PathLocation

You can use PathLocation strategies by adding <base href=”/”> in the index.html page in your application. It is always better to use Path location strategies,

<base href="/">

Child/Nested Route

When a route uses another route inside it or a route within a route it is called Nested Route. The Child route is used for creating route hierarchy.

How to configure child routes?

Step 1

Create a Project with name AngularRouting using the below command,

ng new AngularRouting --routing

Step 2

Now, we have to add some component to the project. To add component open the integrated terminal in vs code. Open the terminal by pressing Ctrl, + and ~ button.

Now, add the below command to create components,

ng g c Home -it -is
ng g c About -it -is

Step 3 - Configure the Routes

First open the index.html file and add <base href="/"> in the head section. We add this file to construct the URL style while navigating the views.

Now, create a file app-routing.module.ts for configuring the different routes and create a constant route which is strongly typed to Route from the Router Package. The object has a path which is displayed in the URL and component which will render when we click on the corresponding component’s View.

App-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{path:'Home',component:HomeComponent},
{path:'About',component:AboutComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Step 5

Now, add a file app.component.html and add the following lines.

App.component.html

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<nav>
<a class="button" routerLink="/Home">Home</a>
<a class="button" routerLink="/About">About </a>
</nav>
<router-outlet></router-outlet>

Step 6

Open App.module.ts file and import the component and AppRoutingModule.

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 7

Let us Implement the child route in our Project. First, create a new component,

ng g c career -it -is

We want to create a page inside Home route. For adding route, Angular provides Children components. Let's open the app.routing.module.ts and add child routes,

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { CaererComponent } from './caerer/caerer.component';
import { ErrorComponent } from './error/error.component';
const routes: Routes = [
{path:"About",component:AboutComponent},
{path:"Home",component:HomeComponent,
children:
[
{
path:'Home/Career',component:CaererComponent
}
]},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Now, make some change in the Home.component.ts and make the following changes,

import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-home',
template: `
<p>
Home Page
</p>
<a routerLink="Home/Career">Career</a>
<div>
<router-outlet></router-outlet>
</div>
`,
styles: []
})
export class HomeComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

Now, run the project and check,

Summary

In this article, we have learned about Location Strategies and child routes.