Introduction to Angular Routing

 

What is Routing in Angular?

Routing in Angular is a core concept that enables you to navigate between different components or views in a single-page application (SPA) without refreshing the entire page. It allows users to move between different parts of the application by changing the URL, while maintaining a seamless user experience.

1) Before Angular 17, we need to add all our components to the global registration module called as app.module.ts with routes constant.And we will import Both Router Module and Routes Constant from angular/Router Package. In the Import we will instruct angular to load the Router Module with our values, i.e. RouterModule.forRoot(<ourroutings declaration>)

2)In Angular17, we already have a file app.route.ts 

==> Here we will write all our components declaration here and this file will be already loaded by Angular in app.config.ts in the Providers Section ==> providers: [provideRouter(routes)]

3) We are going to develop a mini project with 6 components with the below hierarchy

1) Home Menu ==> While loads the Home Component (Home.*ts,html, CSS) 

2)Product Menu ==> It will load Products List Component (products.*.ts,.html,.CSS)

                ==> View Product Menu ==> Loads the Product Component (product.*.ts,.html,.CSS)

               ==> Edit Product Menu ==> Loads the Edit Product Component(editproduct.*.ts,*.html,*.css)

3) Users Menu ==> Loads the Users Component (users.*.ts, *html,*.css)

                    ==> Loads the user Component (user.*.ts, *.html,*.css)

4) Define the above definitions in app.route.ts file which is loaded by app.config.ts

Inside Routes Constant file ==>

{path:",component:HomeComponent}, //http://localhost:4200 ==> It should Load Home Component

{path:'users', component:UsersComponent}, //http://localhost:4200/users ==> It should Load Users Component

{path:'products', component: ProductsComponent} //http://localhost:4200/products ==> It should Load products Component

5) Navigate to app.component.html ==> Remove all the bootstrap entries with home,users and product component mappings and write <router-outlet></router-outlet> which has dynamic bootstrapping with component given by Routing

6) When we refer our routing path in href tag like <a href="/customers"> <a href="/products"> 

     ==> By default server side rendering will happen which will voilate the angular default behaviour. In place of href, if we use <routerLink> option which stop the server side rendering

7) routerLinkActive="active" this option will set the li tag with active tab indicator properly. If we are in customers

     ==> customer tab will be highlighted, if we are in products 

    ==> products tab will be highlighted. At the same time for the first option like Home along with routerLinkActive, we need to use routerLinkActiveOptions ={exact:true} which will override the default behaviour

8) Router.Navigate is the option availble in ts file if we want to change the current routing to new path this.route.navigate(['/products']) 

    ==> where products should be defined in angular routes file

9) ActivatedRoute is an internal angular implemenation which will give current routing path on the browser. When we mention relative path in our angular routings always you need to go to home path and map accordingly

Assume if we reload the products page

     ==> this.route.navigate([../product],{relativeTo:this.activatedRoute});

10) If we wan to have dynamic parameters in routing path 

       ==> You can initialize with ":"

       ==> /users/:id/:name 

       ==> id and name are dynamic 

11) If we wan to read the dynamic values in the URL 

    ==> We can use Activated Route here. Activated Route is the current path which is displayed here and to read the dynamic variables we can use snapshot object

     ==> this.Activated route.snapshot.params['<variable1>']; 

12) If we want to construct the dynamic URL from HTML, we can use RouterLink Option 

     ==> if we want to construct URL

     ==> http://localhost:4200/users/10/Rahul | 

    ==> <a [routerLink]=['/users',10,'Rahul']>

13) When there is change in Routing values which requires page to be reloaded ==> By default routing will not push the latest data to component and developer need to subscribe the routing interface and on subscription we need to assign latest data