Angular Router Advanced

Angular-ல் மேம்பட்ட ரவுட்டிங் inject() உடன் செயல்பாட்டு காவல்கள்/தீர்வாளர்கள், பல பார்வைகளுக்கான துணை outlets, மற்றும் முன்-ஏற்றும் உத்திகளை உள்ளடக்கியது; திருப்பி அனுப்புவதற்கு ஒரு UrlTree வழங்கவும்.

Angular Router என்பது ஒரு சக்திவாய்ந்த டீம்-அக உருவாக்கும் கருவியாகும், இது பயன்பாடுகளில் சிக்கலான வழிசெலுத்தல் தேவைகளைக் கையாள அனுமதிக்கிறது. இது லேசான லோடிங், பாதை காவல்கள், தரவு தீர்வு மற்றும் மேம்பட்ட வழிசெலுத்தல் வடிவங்களை ஆதரிக்கிறது.

Router Advanced Essentials

செயல்பாட்டு காவல்கள்/தீர்வாளர்கள்: வகை-பாதுகாக்கப்பட்ட வழிசெலுத்தலுக்கு inject() உடன் செயல்பாடுகளைப் பயன்படுத்தவும்.

துணை outlets: பெயரிடப்பட்ட RouterOutlets பல பார்வைகளை வழங்குகின்றன (எ.கா., /inbox(compose:modal)).

முன்-ஏற்றுதல் & தரவு: நிலையான கொடிகளுக்கு (தலைப்புகள், அனுமதிகள்) பாதை தரவைப் பயன்படுத்தவும் மற்றும் வழிசெலுத்தலை மேம்படுத்த முன்-ஏற்றும் உத்திகளைப் பயன்படுத்தவும்.

Advanced Router Setup

import { inject } from '@angular/core';
import { Router, Routes, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';

function canActivate() {
  const router = inject(Router);
  return /* condition */ true || router.createUrlTree(['/']);
}

const routes: Routes = [
  { path: 'feature', loadComponent: () => import('./feature').then(m => m.Feature), data: { title: 'Feature' }, canActivate: [canActivate] },
  { path: 'inbox', loadComponent: () => import('./inbox').then(m => m.Inbox) },
  { path: 'compose', outlet: 'modal', loadComponent: () => import('./compose').then(m => m.Compose) }
];

provideRouter(routes, withPreloading(PreloadAllModules));

🔍குறியீடு விளக்கம்:

inject(Router): ஒரு காவல் செயல்பாட்டிற்குள் Router-ஐ அணுகுகிறது.

UrlTree திருப்பி அனுப்புதல்: கட்டாயமாக வழிசெலுத்துவதற்குப் பதிலாக திருப்பி அனுப்புவதற்கு router.createUrlTree(['/']) வழங்கவும்.

துணை outlet: outlet: 'modal' உடன் ஒரு பாதை ஒரு பெயரிடப்பட்ட RouterOutlet-ஐ இலக்காகக் கொண்டுள்ளது.

முன்-ஏற்றுதல்: withPreloading(PreloadAllModules) ஆரம்ப ஏற்றலுக்குப் பிறகு லேசான லோட் செய்யப்பட்ட தொகுதிகளை முன்கூட்டியே ஏற்றுகிறது.

💡Jassif Team குறிப்புகள்:

Router, Services, மற்றும் App Bootstrap பற்றி காண்க.

inject() உடன் செயல்பாட்டு காவல்களைப் பயன்படுத்தவும்.

காவல் வகைகள்: canActivate, canDeactivate, canMatch (ஒரு பாதை கட்டமைப்பு பொருந்துமா என முடிவு செய்ய), canLoad (சோம்பேறி உள்ளடக்கத்தை ஏற்றுவதைத் தடுக்க).

திருப்பி அனுப்புதல்களுக்கு ஒரு UrlTree வழங்கவும்.

Advanced Guard Types

import { CanDeactivateFn, CanMatchFn } from '@angular/router';

// canDeactivate: confirm navigation away
const canDeactivate: CanDeactivateFn<any> = (component, curr, currState, nextState) => confirm('Leave this page?');

// canMatch: decide if a route config should match current URL
const canMatch: CanMatchFn = (route, segments) => segments[0]?.path === 'secret';

🔒Guard Types Explained:

CanDeactivateFn: விலகிச் செல்ல அனுமதிக்கப்படுகிறதா என முடிவு செய்யவும் (எ.கா., உறுதிப்படுத்தும் உரையாடல்).

CanMatchFn: ஒரு பாதை வரையறை தற்போதைய URL பகுதிகளுடன் பொருந்த வேண்டுமா என முடிவு செய்யவும்.

Functional Guards with inject()

Complete Example

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, inject } from '@angular/core';
import { Routes, provideRouter, Router, RouterOutlet } from '@angular/router';

const isLoggedIn = signal(false);

function canActivate() {
  const router = inject(Router);
  return isLoggedIn() || router.createUrlTree(['/']);
}

@Component({ selector: 'home-page', standalone: true, template: `<p>Home</p> <button (click)="login()">Login</button>` })
class Home { login() { isLoggedIn.set(true); } }

@Component({ selector: 'secret-page', standalone: true, template: `<p>Top Secret</p>` })
class Secret {}

const routes: Routes = [
  { path: '', component: Home },
  { path: 'secret', component: Secret, canActivate: [canActivate] }
];

@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], template: `<a [routerLink]="['/']">Home</a> | <a [routerLink]="['/secret']">Secret</a> <router-outlet></router-outlet>` })
class App {}

bootstrapApplication(App, { providers: [provideRouter(routes)] });

🔍Example Explained:

செயல்பாட்டு காவல்: canActivate() inject(Router) பயன்படுத்துகிறது மற்றும் தடுக்கப்படும்போது ஒரு UrlTree வழங்குகிறது.

சிக்னல் நிலை: isLoggedIn signal காவலின் அனுமதி/மறுப்பு முடிவை இயக்குகிறது.

இணைப்புகள் + outlet: வழிசெலுத்தல் routerLink பயன்படுத்துகிறது மற்றும் <router-outlet> செயலில் உள்ள பாதையை வழங்குகிறது.

செயல்பாடுகளைப் பயன்படுத்தவும்: காவல்களை தூய செயல்பாடுகளாக எழுதவும் மற்றும் சேவைகளை அணுக inject() பயன்படுத்தவும்

திருப்பி அனுப்புதல்கள்: கட்டாயமாக வழிசெலுத்துவதற்குப் பதிலாக ஒரு UrlTree வழங்கவும்

அவற்றை விரைவாக வைத்திருங்கள்: காவல்களில் கனரக வேலையைத் தவிர்க்கவும்; சேவைகளுக்கு ஒப்படைக்கவும் மற்றும் முடிந்தவரை கேச் செய்யவும்

ஒருங்கிணைப்பு: காவல்களை சேவைகள் மற்றும் வழங்குநர்களுடன் ஒருங்கிணைக்கவும் முறையான பாதுகாப்பை உறுதி செய்ய

Preloading and Route Data

நிலையான கொடிகளுக்கு (தலைப்புகள், அனுமதிகள்) பாதை தரவைப் பயன்படுத்தவும்.

சோம்பேறி அம்சங்களை ஏற்றவும் மற்றும் வழிசெலுத்தலை மேம்படுத்த முன்-ஏற்றலை இயக்கவும்.

Preloading Configuration

provideRouter(routes, withPreloading(PreloadAllModules));
// Route with data
{ path: 'feature', loadComponent: () => import('./feature').then(m => m.Feature), data: { title: 'Feature' } }

⚡குறியீடு விளக்கம்:

withPreloading(PreloadAllModules): ஆரம்ப ஏற்றலுக்குப் பிறகு பின்னணியில் சோம்பேறி பாதைகளை முன்-ஏற்றுகிறது.

தரவு: நிலையான பாதை தரவு மறுபயன்பாட்டிற்கான தலைப்புகள்/கொடிகள் போன்ற மெட்டாடேட்டாவை வைத்திருக்கிறது.

🚀Best Practices:

பாதை தரவு: கூறுகளில் கடினக் குறியீடு செய்வதை விட நிலையான கொடிகளுக்கு (தலைப்புகள், அனுமதிகள்) தரவைப் பயன்படுத்தவும்.

முன்-ஏற்றுதல்: அடுத்து வரக்கூடிய தொகுதிகளை பின்னணியில் பெற உத்திகளைப் பயன்படுத்தவும்.

அளவிடவும்: முன்-ஏற்றலை இயக்குவதற்கு முன்னும் பின்னும் தொகுப்பு அளவுகள் மற்றும் வழிசெலுத்தல் நேரத்தை சுயவிவரப்படுத்தவும்.

தனிப்பயன் உத்திகள்: குறிப்பிட்ட பயன்பாட்டு தேவைகளுக்காக உங்கள் சொந்த முன்-ஏற்றல் உத்திகளை உருவாக்கவும்.

Router Features Comparison

அம்சம்	விளக்கம்	பயன் கூறு
செயல்பாட்டு காவல்கள்	inject() உடன் வகை-பாதுகாக்கப்பட்ட காவல்கள்	அங்கீகாரம், அங்கீகாரம்
துணை Outlets	பல பெயரிடப்பட்ட RouterOutlets	மாடல்கள், பக்கப்பட்டிகள், பல-பார்வை உருவரை
முன்-ஏற்றல் உத்திகள்	சோம்பேறி பாதைகளின் பின்னணி ஏற்றுதல்	வழிசெலுத்தல் செயல்திறனை மேம்படுத்துதல்
பாதை தரவு	பாதைகளுடன் இணைக்கப்பட்ட நிலையான மெட்டாடேட்டா	பக்கம் தலைப்புகள், அனுமதி கொடிகள்
UrlTree திருப்பி அனுப்புதல்கள்	விவரிக்கும் வழிசெலுத்தல் திருப்பி அனுப்புதல்கள்	காவல்-அடிப்படையிலான வழிசெலுத்தல் கட்டுப்பாடு
CanMatch காவல்கள்	பாதை பொருத்துதல் தர்க்கம்	அம்சம் கொடிகள், நிபந்தனை ரவுட்டிங்
இலக்கு பாதைகள்	இலக்குகளுக்கான பாதைகள் மூலம் இணைப்பு	உட்புற மற்றும் வெளிப்புற இணைப்புகள்

📊ரவுட்டர் அம்சங்கள் பயன்பாடு:

Angular Router-ன் மேம்பட்ட அம்சங்கள் நவீன வலை பயன்பாடுகளின் சிக்கலான வழிசெலுத்தல் தேவைகளைக் கையாள உதவுகின்றன:

செயல்பாட்டு காவல்கள்: உள்நுழைவு மற்றும் அங்கீகாரத்திற்கு சிறந்தது
துணை outlets: சிக்கலான பக்க தளவமைப்புகளுக்கு
முன்-ஏற்றுதல்: பயனர் அனுபவத்தை மேம்படுத்துதல்
பாதை தரவு: மெட்டாடேட்டா மேலாண்மை

Router Advanced Quiz

❓செயல்பாட்டு காவலில், எந்த மீட்டெடுக்கும் மதிப்பு ஒரு திருப்பி அனுப்புதலுக்கு காரணமாகிறது?

UrlTree

✓ சரி! ஒரு காவலில் இருந்து UrlTree-ஐ வழங்குவது அந்த URL-க்கு திருப்பி அனுப்புதலுக்கு காரணமாகிறது

undefined

✗ தவறு! undefined வழிசெலுத்தல் தொடர அனுமதிக்கிறது, திருப்பி அனுப்பாது

HttpResponse

✗ தவறு! HttpResponse HTTP பதில்களுக்கு, ரவுட்டர் வழிசெலுத்தலுக்கு அல்ல

❓Angular-ல் சோம்பேறி ஏற்றப்பட்ட தொகுதிகளை பின்னணியில் ஏற்றுவதற்கு எது பயன்படுத்தப்படுகிறது?

Preloading Strategies

✓ சரி! Preloading Strategies சோம்பேறி ஏற்றப்பட்ட தொகுதிகளை பின்னணியில் ஏற்ற பயன்படுகிறது

Lazy Loading

✗ தவறு! Lazy Loading தொகுதிகளை தாமதமாக ஏற்றுகிறது, பின்னணியில் ஏற்றாது

Eager Loading

✗ தவறு! Eager Loading ஆரம்பத்தில் அனைத்து தொகுதிகளையும் ஏற்றுகிறது

முந்தைய அடுத்தது