#angular routing

When you are going through any website, have you ever wondered why and how you are redirected to the Home page and not the About Us page while clicking the home link? The whole mechanism that decides what should be displayed when the user takes action is termed routing. You might be familiar with the jargon if you have already worked with any front-end frameworks. Even if you haven’t, then that’s completely fine; because this blog will help you with steps to implement Angular routing and a Github repo also to come out of your ‘beginner zone.’  

Let’s get started with How Routing Works in Angular 11.

Table of Index

1. Goal

2. Github Repository for Angular routing example

3. Install Angular CLI

4. Create and configure the Angular project

5. Implement Basic Angular Routing in Angular Version 11

6. Nested Angular Routing and Angular Routing with Params in Angular v11

7. Conclusion

Goal

Before knowing how to build, let’s know what to build. Here’s the video of demo which we would be developing in this blog-

Github Repository for Angular v11 Routing Example

Click here to visit the Github Repository OR Open Terminal and run this command to clone the repositorygit clone https://github.com/architanayak/angular-routing.git

Okay, so now you’re aware of what are we developing, and as a bonus, you have a github repository to clone and play around with the demo. Let’s start the steps from installing the Angular project to implement the Angular routing in Angular version 11.

Install Angular CLI

Use the below-mentioned command to install the latest version of Angular CLI in your system. Globally-npm install -g @angular/cli Locally-npm install @angular/cli To verify the installation, run the following command-ng --version

The command will show you the version of Angular that you’ve just installed. You will see something like this on your terminal.

Create and Configure Angular project

After the installation is done, we will create a brand new Angular project and configure it accordingly.

⦿ Create an Angular project.

ng new demo-app

NOTE- You can name it whatever you want instead of demo-app Answer the series of questions, and you will successfully create your project. Make sure that you choose YES for – Would you like to add Angular routing?

Need support for routing and navigation in Angular 11?

Hire Angular developers from us to keep your Angular project up-to-date, implementing latest features to the stable release.

⦿ Configure your project

Project structure-  Generate components for Home, Marvel movies, and DC movies using these commands, respectively.ng g c home ng g c marvel-movies ng g c dc-movies

After running the commands, check your src/app. The project structure will look like this- src/app  NOTE- The project structure can vary according to demo.

Key Features

In this book, the reader will be able to focus on one concept of Angular in deep. Some of the concepts of Routing discussed are:

Lazy Loading

Routing Parameters

Route Guards

The examples in the book talk us through building an e-commerce website which helps the reader to connect to the real-life business scenarios.

The book commences with an introduction to the important concepts of Angular to understand in general and then moves to how Routing helps us build our applications much effectively.

The tools I use in the explanation of concepts are Angular CLI, Visual Studio Code.

By the end of this book, you should be able to understand Routing perfectly being able to perform all the operations using Routing.

New Post has been published on https://sagarjaybhay.net/what-is-routing-angular-how-routing-works-angular/

How Angular Routing Works and What is Routing?

In this article, we will understand How Angular Routing Works and What is the Meaning Of routing In Angular By Sagar Jaybhay.`

What is the Meaning Of routing In Angular

Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page.

The Angular Router enables you to show different components and data to the user based on where the user is in the application. The router enables navigation from one view to the next as users perform tasks.

Angular Routing

Routing Collection is a place where we specify the URLs and components where loaded.

If you create an angular project using cli command then it will automatically add your_app_name-routing.module.ts file where we can define routes.

import NgModule from '@angular/core'; import Routes, RouterModule from '@angular/router'; import HomeComponent from "./home/home.component"; import LeftmenuComponent from "./leftmenu/leftmenu.component"; import SupplierComponent from "./supplier/supplier.component"; import CustomerComponent from './Customer.component'; const routes: Routes = [ path:'Home',component:HomeComponent, path:'Customer',component:CustomerComponent, path:'Supplier',component:SupplierComponent, path:'',component:HomeComponent ]; @NgModule( imports: [RouterModule.forRoot(routes)], exports: [RouterModule] ) export class AppRoutingModule

This file needs to add in our main module file by default it is added but if it is not added by default you can go add this in this location.

But for this path, we need to modify some of the Html code like below.

<p>home works!</p> <a [routerLink]="['Home']">Home</a> <br/> <a [routerLink]="['Customer']">Customer</a> <br/> <a [routerLink]="['Supplier']">Supplier</a> <br/> <hr> <br/> <br/> <br/> <div> <router-outlet></router-outlet> </div>

In the above code, we use 2 different directives routerLink and router-outlet.

base href

Most routing applications should add an <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.

If the app folder is the application root, as it is for the sample application, set the href value exactly as shown here.

src/index.html (base-href)

content_copy<base href="/">

routerLink

This is used to generate a router link. In our case  http://localhost:4200/Home you can pass a parameter to the route by using the following way.

a [routerLink]="['/user/bob']" [queryParams]="debug: true" fragment="education"> link to the user component </a>

If you want to preserve state in the browser you can use state variable.

<a [routerLink]="['/user/bob']" [state]="tracingId: 123"> link to the user component </a>

router-outlet

It is used to placed dynamically added content in our case it is a component that is associated with view. Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, the default value is “primary”.

<router-outlet></router-outlet> <router-outlet name='left'></router-outlet> <router-outlet name='right'></router-outlet>

A router outlet emits an activate event when a new component is instantiated, and a deactivate event when a component is destroyed.

<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>

Angular Routing Example – In this article i have to share how to create angular 8 form routing in normal registration form using the Visual Studio Editor. Angular routing is the big concept because its generate the user path clickable link for end users. In HTML we use a hreffor create the link but in angular we use Routing concept (routerLink) used for create the link from one page to another…