Explain Routing in Angular

Routing is simply switching between pages. Routing lets Angular users develop single-page apps with several views and transition between them. Users can move between these views without changing the app's features or state.

The Angular router is the main foundation of the the platform. It lets developers create Single Page Applications with several views and switch between them. The @angular/router package contains Angular Router, is sophisticated routing library with multiple router outlets, path matching algorithms, easy route parameter access, and route guards to protect components.

Routes and PathsRoutes 
Routes and PathsRoutes are objects consisting at least of a component (or redirectTo path) property and a path.

• Path in the URL indicates the view to display.
• The "component" is an Angular component that needs a path.

Based on a route specification we provide,  the Router can guide the user to a certain view. Every Route links a component to a URL path.

 

Default Path: Usually the end of the routing list, the path can be empty, indicating the default route of an application.The path may include wildcard strings (**). The router will select this route if the specified URL does not fit any paths for the specified routes i.e. ‘no match found’, this can either indicate a "Not Found" view or redirect to a specific view.

{ path: '', component: HomeComponent },
{ path: 'accounts', component: AccountListComponent}, 

AccountListComponent will be rendered by the router when the web application's browser URL turns /accounts.

Explain Routing in Angular

Bootstrapping /Starting the Router: The Angular bootstrap system also has to integrate the router's directives and injectables to finish the router configuration. Importing the RouterModule into the application root module helps us to do this

 

Set up an index route and a fallback route :

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

const appRoutes: Routes = [
{ path: "", component: HomeComponent },
{ path: "articles", component: ArticelsComponent },
{ path: "article/:id/:name", component: ArticleComponent },
{ path: "**", redirectTo: "/not-found" },
];

@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
})

export class AppRoutingModule {}

 

How Routing works in Angular

User can change navigation or view by clicking a link, button, or entering a URL into the browser's address bar. Each view changeover transfers data parameters from the preceding view. 

 

Other type of Routing

• Link certain app sections with RouterLink directives.
• Navigation link: Our Component needs RouterModule or AppRoutingModule in @NgModule to use routerLink.

Angular Routing