Angular Routes என்றால் என்ன?

ஒரு component-ல் இருந்து மறறொரு component-க்கு அழைத்து செல்வதுதான் router-இன் வேலை ஆகும்.

STEP 1:

இங்கு என்னிடம் HomeComponent,AboutComponent,ContactComponent உள்ளது.இங்கு இருக்கும் ஒவ்வொரு component-க்கும் ஒவ்வொரு path கொடுக்க வேண்டும்.
முதலில் நமக்கு தேவையான path-யை உருவாக்க வேண்டும்.

//இதனை path list என்று அழைப்பார்கள்.  

const routes:Routes =[

  {path:'home',component:HomeComponent},

  {path:'about',component:AboutComponent},

  {path:'contact',component:ContactComponent},

  {path:'',component:HomeComponent}

];

இங்கு path:’home’ என்பதை கிளிக் செய்தால் HomeComponent-க்கு போக வேண்டும்.
Path:’about’ என்பதை கிளிக் செய்தால் AboutComponent-க்கு போக வேண்டும்.path:’contact’ என்பதை கிளிக் செய்தால் Contact Component-க்கு போக வேண்டும்.

நான் கடைசியாக இருக்கும் path-ல் எந்தவொரு மதிப்பும் கொடுக்காமல் empty-ஆக(path:’’)கொடுத்து உள்ளேன்.ஆனால்,இந்த path ஆனது HomeComponent-க்கு போக வேண்டும் என்று கொடுத்து இருப்பேன்.
அதற்கு காரணம், என்னுடைய application-யை open செய்யும்பொழுது அது default-ஆக HomeComponent-இல் தான் இருக்க வேண்டும் என்பதை குறிக்கின்றது. இங்கு path அனைத்தும் array-இல் கொடுக்கப்பட்டுள்ளது.
இந்த path list அனைத்தையும் நான் routes என்கிற variable-லில் சேமிக்கப்பட்டுள்ளது.

STEP 2:

இப்பொழுது நான் உருவாக்கிய இந்த routes-யை Router Module-லில் assign பண்ண வேண்டும்.
routes என்பதில் நாம் உருவாக்கிய path list இருக்கின்றது.

const routing=RouterModule.forRoot(routes);

RouterModule.forRoot(routes) இந்த statement-இன் வேலை என்னவென்றால் நாம் உருவாக்கிய path list-யை RouterModule-லில் assign பண்ணுவது ஆகும்.
இந்த RouterModule-யை routing என்ற variable-லில் சேமிக்கிறோம்.

STEP 3:

இப்பொழுது app.module.ts-இல் import செய்ய வேண்டும்.

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

.

.

.

.

 imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule ,

    routing   //routing என்பது RouterModule-யை குறிக்கின்றது.

  ],

  

STEP 4:

நான் app.component.html-லில் தான் பயன்படுத்த போகிறேன்.

<a routerLink='/home' >Home</a>

<a routerLink='/about'>About Us</a>

<a routerLink='/contact'>Contact</a>

anchor tag-இல் href என்ற attributes-யை பயன்படுத்த கூடாது.அதற்கு பதிலாக roterLink-யை பயன்படுத்த வேண்டும்.
இங்கு "/home"என்பது path ஆகும். இந்த "/home" என்பது app.module.ts-இல் இருக்கும் {path:'home',component:HomeComponent} இந்த path-யை குறிக்கின்றது.
இதேபோல் தான் "/about","/contact" என்பது அதனுடைய path-யை குறிக்கின்றது.

STEP 5:

இப்பொழுது ஏதேனும் ஒரு link-யை click செய்தால் அதனுடைய component இந்த router-outlet-இல் தான் load ஆகும்.

<router-outlet></router-outlet>

<router-outlet>என்பது ஒரு directory ஆகும்.இதனுடைய வேலை என்னவென்றால்,user ஒரு URL-யை click செய்து உள் நுழையும்போது அந்த url-இல் இருக்கும் component-யை எடுத்து இதன் உள்ளே வைத்துக் கொள்ளும்.
ex:
user about-யை click செய்து உள்நுழையும்போது அந்த url-இல் இருக்கும் component-யை எடுத்து இதன் உள்ளே வைத்துக் கொள்ளும்.
இப்பொழுது user Contact link-யை click செய்யும்பொழுது ஏற்கனவே இதனுள் இருக்கும் about component-யை எடுத்து வெளியே வைத்து விட்டு இப்பொழுது click செய்த contact url-ல் இருக்கும் contact component-யை எடுத்து உள்ளே வைத்து கொள்ளும்.இப்படி dynamic-ஆக வேலை செய்யும்.

Sample Code:



app.component.html:


<a routerLink='/home' >Home</a>

<a routerLink='/about'>About Us</a>

<a routerLink='/contact'>Contact</a>




<router-outlet></router-outlet>








app.Module.ts:


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms'; 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AddFivePipe } from './add-five.pipe';

import{AdditionService} from './addition.service';

import { FirstComponent } from './first/first.component';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

import { ContactComponent } from './contact/contact.component';

import { Route } from '@angular/compiler/src/core';

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






const routes:Routes =[

  {path:'home',component:HomeComponent},

  {path:'about',component:AboutComponent},

  {path:'contact',component:ContactComponent},

  {path:'',component:HomeComponent}

];






const routing=RouterModule.forRoot(routes);



@NgModule({

  declarations: [

    AppComponent,

    AddFivePipe,

    FirstComponent,

    HomeComponent,

    AboutComponent,

    ContactComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule ,

 routing

  ],



  providers: [AdditionService],

  

  bootstrap: [AppComponent]



})

export class AppModule { }