Angular Routing A Complete Guide for Beginners

In this article, we discuss Angular Routing A Complete Guide for Beginners

Angular Routing A Complete Guide for Beginners

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

Angular Routing A Complete Guide for Beginners

Routing helps in navigating from one page to another page in a web application. In Angular, it is commonly known as Angular Routing. However, if you are not aware of it yet, here is an article to help you learn Angular Routing in detail.

In this article, I will be going over the following topics:

  • Introduction to Angular Routing
  • Angular Routing Installation
  • Routing between App and First Components
  • Component-to-Component Routing

Angular Routing A Complete Guide for Beginners

Introduction to Angular Routing

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.

Angular Routing

Angular Routing borrows from this model to navigate through different pages in the application. It interprets a browser URL as an instruction to navigate to a client-generated view. You can bind the router to links on a page that helps in navigating to the appropriate application view when the user clicks a link. You can also navigate requisitely when the user clicks a button or selects an option from a dropbox. The router also keeps an activity log in the browser’s history journal, so the forward and back buttons function as well.

Angular Routing Installation

Now, let’s start with a quick tutorial on how to install Angular Routing to an application. First things first, make sure you have Angular installed in your system. If you are not familiar with Angular, refer to the link on Angular CLI Installation. Once you have everything set up, let’s build a new Angular Project.

if you create routing you can create at the time of new application.

First, you need to create a directory where you want to create your project. Later, you need to change your path to that directory using the cd command on your Windows Command Prompt or any other CLI you are using. Suppose you have a directory named ‘ routing ‘ which is located on F Drive, you need to type the following command to navigate into that directory. 

F:\Angular_new\routing

Later, you need to type the following command to create your new Angular project.

ng new angular-routing

First, it will ask you whether to add Angular Routing to your project which goes on something like this:

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

You need to choose y i.e., yes to add routing to your project. Next, it will ask you which stylesheet format you would like to use as shown below:

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

You need to click on CSS to install default CSS stylesheet on your application which includes all the other stylesheets.
Subsequently, this will create a new project named angular-routing in your directory. You can navigate into your project with the following command:

cd routing

In case, you already have an Angular project and would like to add routing to it, you can simply type the following command on your Command Prompt. 

ng generate module app-routing --flat --module=app

This will add routing to your project and generates app-routing.module.ts file into your src/app directory. The generated file will look something like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
  
const routes: Routes = [ ];
  
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
  
export class AppRoutingModule { }

Routing between App and First Components

First, you need to generate a component named first-component using the following command:

ng g c first-component

This will create the component named ‘first component in your src/app directory. This consists of the following sub-components:

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners
  1. first-component.component.css
  2. first-component.component.html
  3. first-component.component.spec.ts
  4. first-component.component.ts

Now, let’s say you want to add routing from app.component to your first-component. First, you need to go to the app.component.html file on your application and erase all the existing code. Next, you need to write the new code as follows: 


<span>Angular Routing Tutorial</span>
 
<router-outlet></router-outlet>

<router-outlet> is a router directive from the router library which is used for directing the router where to display the routed views. To use this directive, you need to first import it in the app.module.ts file from the angular router directory using the following command:

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

Later, you need to also add this module in the imports:[ ] section located in the app.module.ts file.

imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   MatToolbarModule,
   RouterModule.forRoot(routes)
],

For Routes, you need to add “RouterModule.forRoot(routes)”. 

Now, let’s serve your project using the following command:

	
ng serve -o

This will open your project on the default browser of your system as shown below:

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

Let’s say, now you want to create a root for your first-component. First, let’s write a code to display the contents of the first-component page, in the first-component.component.html file. 

<h3>Welcome to the First Component!</h3>

Next, let’s head on to the app.module.ts file and create a path for first-component in Routes=[ ] section.

const routes: Routes = [
   { path: 'first-component', component: FirstComponentComponent }
];

This will create a route for first-component and you can view this component using the following URL on your browser:

<a href="http://localhost:4200/first-component">http://localhost:4200/first-component</a>

This will display the contents of the first-component file as follows:

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

Component-to-Component Routing

Suppose you want to navigate from component-to-component. First things first, you need to generate another component in your application. Later, you need to add a router link on your first-component.html file to your second-component.html file which is as follows: 

<h3>Welcome to the First Component!</h3>
<p>Click the link below to navigate into second component</p>
<nav>
   <a routerLink = "/second-component">Second Component</a>
</nav>

Next, you need to follow the same procedure to create a route for second-component just like you did for first-component in the app.module.ts file. Once your second-component path is created, you can view it on your browser. 

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

You need to click on the “Second Component” link to navigate to the second-component page and display the contents of it.

Angular Routing A Complete Guide for Beginners
Angular Routing A Complete Guide for Beginners

With this, I would like to end my blog. I hope you are clear about the fundamentals of Angular Routing. If you have any doubts or queries regarding this article, do not hesitate to post them in the comments section below.

Source: Various

Also Checkout How to communicate between a component and a service file

If you interested in the Entertainment genre please check this also thebiographys.com

angular 8,angular 8 routing,angular 8 routing example,angular 9 routing,angular 9 routing example,angular js routes,angular js routing,angular router,angular router link,angular router module,angular router navigate,angular router navigate with params,angular router params,angular routes,angular routing,angular routing not working,angular routing tutorial,how to install angular router,how to install angular routing,javascript codes,need for angular js routing,one page routing,page routing with angular js,program for js routing,routing in javascript,what is angular router,what is angular routing,would you like to add angular routing

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *