How angular routing works?

Angular Routing to helps in navigating from one page to another page in a web application.

Introduction to Angular Routing

The Angular router allows developers to build Single Page Applications with multiple states and views using routes and components and allows client side navigation and routing between the various components.

It’s built and maintained by the core team behind Angular development and it’s contained in the @angular/router package.

A routed Angular application has one singleton instance of the Router service. When the browser's URL changes, that router looks for a corresponding Route from which it can determine the component to display.

A browser generally follows a well-known model of navigation in a web application like:

• Suppose, you enter a URL in the address bar, the browser navigates to a corresponding page.
• If you click a link on the page, the browser navigates to a new page.
• If you click on browser’s back and forward buttons, the browser navigates backward and forward respectively through the history of pages you’ve visited.

More details on angular router

Creating a router module

Create new angular project using a command like this:

TRT-IOS-02s-iMac:angular trt-ios-02$ ng new routingDemo

It will ask to add an angular router in your project:

TRT-IOS-02s-iMac:angular trt-ios-02$ ng new routingDemo
? Would you like to add Angular routing? (y/N)

If press “y” to add a router in your application. Next, ask which stylesheet format to use:

TRT-IOS-02s-iMac:angular trt-ios-02$ ng new routingDemo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  Sass   [ http://sass-lang.com   ] 
  Less   [ http://lesscss.org     ] 
  Stylus [ http://stylus-lang.com ]

You choose CSS to install default CSS stylesheet on your project

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

const routes: Routes = [];

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

<div style="text-align:center">
 <h1>
   Welcome to {{ title }}!
 </h1>
</div>
<router-outlet></router-outlet>

Now run your application

$ npm start

Basic Routing

Basic routing is called app to the component, so we create a new component named Home using bellow command:

$ ng g c home

TRT-IOS-02s-iMac:routingDemo trt-ios-02$ ng g c home
CREATE src/app/home/home.component.css (0 bytes)
CREATE src/app/home/home.component.html (23 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
UPDATE src/app/app.module.ts (467 bytes)

Now goto app.module.ts file and see update code for HomeComponent:

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';

@NgModule({
 declarations: [
   AppComponent,
   HomeComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Now set home page as root our project go to app.router.module.ts file:

const routes: Routes = [
 {
   path: 'home',
   component: HomeComponent,
 },
];

You can see in browser with http://localhost:4200/home

Component to component Routing

Now you need to generate other components in your application. You need route like set in home.component.html file:

<p>
 home works!
</p>
<div>
   <p>Click the link below to navigate into component</p>
 <a routerLink="/about">About</a>
</div>

Next, you need the same procedure to create a route for about component in app.router.module file. Once you create a route you can check in the browser.

You need to click on the “About” link to navigate to the about component page and display the contents of it.

Add Router Outlet and Navigation to App Component

The app component includes a main navigation that will be displayed at the top of the page, and a main content area that will display the page component that is mapped to the current path in the browser address bar.

The routerLink Angular directive enables navigation between different routes, and the <router-outlet></router-outlet> Angular directive displays the component for the current route.

Update app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
 <h1>
   Welcome to {{ title }}!
 </h1>
</div>
<nav>
   <div>
       <a class="p-10" routerLink="/">Home</a>
       <a class="p-10" routerLink="/about">About</a>
       <a class="p-10" routerLink="/contact">Contact Us</a>
   </div>
</nav>
<router-outlet></router-outlet>

Update app.router.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';
import { ContactUsComponent } from './contact-us/contact-us.component';

const routes: Routes = [
 {
   path: '',
   component: HomeComponent,
 },
 {
   path: 'about',
   component: AboutComponent,
 },
 {
   path: 'contact',
   component: ContactUsComponent,
 },
];

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

Run the command

$ npm start

Conclusion

I hope that this post helps with getting started with the fundamentals of Angular Routing and that you enjoyed it!

If you have some questions or comments please let me know in the comments below and I will get back to you.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.