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.
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.
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.
app folder is the application root, as it is for the sample application, set the
href value exactly as shown here.
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>
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>
GitHub Project Link: – https://github.com/Sagar-Jaybhay/angular9