রাউটিং এবং নেভিগেশন

Angular-এ রাউটিং এবং নেভিগেশন খুবই গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ব্যবহারকারীদের এক পেজ থেকে অন্য পেজে নেভিগেট করার সুযোগ দেয়। এটি Single Page Application (SPA) তৈরি করতে ব্যবহৃত হয়, যেখানে অ্যাপ্লিকেশনটির একটিমাত্র পেজ লোড হয় এবং শুধুমাত্র প্রয়োজনীয় অংশ পুনরায় লোড বা পরিবর্তন হয়। Angular রাউটার ব্যবহৃত হয় ইউআরএল এবং কম্পোনেন্টের মধ্যে সম্পর্ক স্থাপন করতে এবং ইউআই তে ভিন্ন ভিন্ন ভিউ রেন্ডার করতে।

রাউটিং কনফিগারেশন

Angular-এ রাউটিং কনফিগারেশন শুরু করার জন্য প্রথমে RouterModule ইম্পোর্ট করতে হয় এবং অ্যাপ্লিকেশনের রাউট কনফিগারেশন সেট করা হয়। এর মাধ্যমে ইউআরএল প্যাটার্ন নির্ধারণ করা হয় এবং এই প্যাটার্নের সঙ্গে সম্পর্কিত কম্পোনেন্ট লোড করা হয়।

রাউটিং কনফিগারেশন তৈরি করা

প্রথমে, AppRoutingModule তৈরি করতে হয়:

ng generate module app-routing --flat --module=app

এখন, app-routing.module.ts ফাইলে রাউট কনফিগারেশন হবে:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },  // Default path
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }  // Wildcard for unknown routes
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' হল ডিফল্ট রুট, অর্থাৎ অ্যাপ্লিকেশন লোড হলে হোম পেজটি দেখাবে।
• path: 'about' হল /about পেজের জন্য রাউট, যেখানে AboutComponent লোড হবে।
• path: '**' wildcard রুট হিসেবে ব্যবহৃত হয়, যা অজানা বা ভুল URL-এর জন্য 404 পেজ (যেমন NotFoundComponent) প্রদর্শন করবে।

রাউটিং মডিউল অ্যাপ মডিউলে ইম্পোর্ট করা

এখন, AppRoutingModule কে AppModule-এ অন্তর্ভুক্ত করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule  // Import the routing module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখন রাউটিং কনফিগারেশন কার্যকরী হবে।

রাউটিং-এ নেভিগেশন

Angular-এ নেভিগেশন হলো রাউটার ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়ার প্রক্রিয়া। Angular রাউটার ব্যবহার করে ইউআরএল পরিবর্তন, হ্যান্ডলিং এবং কম্পোনেন্ট রেন্ডার করা যায়।

১. রাউটিং লিঙ্ক তৈরি করা

এতে HTML টেমপ্লেটে routerLink অ্যাট্রিবিউট ব্যবহার করে রাউট লিঙ্ক তৈরি করা হয়। উদাহরণস্বরূপ:

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>

এখানে, routerLink="/" হোম পেজের জন্য এবং routerLink="/about" অ্যাবাউট পেজের জন্য ব্যবহৃত হয়।

২. রাউটারের আউটলেট (Router Outlet)

Angular রাউটারের মাধ্যমে নেভিগেট করার জন্য <router-outlet> ট্যাগ ব্যবহার করা হয়, যা এখানে রেন্ডার হওয়া কম্পোনেন্টকে ধরবে। এটি সাধারণত অ্যাপের মূল কম্পোনেন্টের টেমপ্লেটে রাখা হয়।

<router-outlet></router-outlet>

এখানে, রাউটিং অনুযায়ী বিভিন্ন কম্পোনেন্ট router-outlet এর মধ্যে রেন্ডার হবে।

রাউটিং নেভিগেশন প্রোগ্রামেটিকালি

Angular-এ আপনি রাউটার ইন্সট্যান্স ব্যবহার করে প্রোগ্রামেটিকালি নেভিগেটও করতে পারেন। এটি Router সার্ভিসের navigate() মেথড ব্যবহার করে করা হয়।

প্রোগ্রামেটিক নেভিগেশন

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `<button (click)="goToAbout()">Go to About</button>`
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

এখানে, goToAbout() মেথডটি ব্যবহারকারী যখন বাটনে ক্লিক করবে, তখন তাকে /about রুটে নেভিগেট করবে।

রাউটিং গার্ডস

রাউট গার্ডস Angular-এ একটি গুরুত্বপূর্ণ ফিচার, যা রাউট পরিবর্তন হওয়ার আগে কিছু শর্ত পরীক্ষা করতে ব্যবহৃত হয়। যেমন, ইউজার অথেন্টিকেশন চেক, ডেটা লোড, এবং অন্যান্য কাস্টম যাচাই।

গার্ড ব্যবহার করা

ধরা যাক, একটি AuthGuard তৈরি করা হয় যা চেক করবে ব্যবহারকারী লগ ইন হয়েছে কিনা:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false;  // Assume the user is not authenticated

    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

এবং routes কনফিগারেশনে গার্ডটি যুক্ত করা হয়:

const routes: Routes = [
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
  // other routes
];

এখন, ব্যবহারকারী যদি অথেন্টিকেশন না করে থাকে, তবে সে /about রুটে যেতে পারবে না এবং তাকে লগইন পেজে রিডিরেক্ট করা হবে।

সারাংশ

Angular রাউটিং এবং নেভিগেশন ব্যবস্থাপনা অ্যাপ্লিকেশন গুলোর মধ্যে ইউজার ইন্টারঅ্যাকশন সহজ করে এবং স্পষ্টভাবে বিভিন্ন ভিউ রেন্ডার করে। এটি Single Page Application (SPA) তৈরি করার জন্য খুবই কার্যকর, এবং রাউটিং কনফিগারেশন, নেভিগেশন, গার্ডস, এবং প্রোগ্রামেটিক নেভিগেশন এর মাধ্যমে Angular অ্যাপ্লিকেশন খুবই শক্তিশালী এবং স্কেলেবল হয়।

Angular অ্যাপ্লিকেশন গুলিতে রাউটিং ব্যবহার করে একাধিক ভিউ বা পেজ তৈরি করা হয়। RouterModule এর মাধ্যমে Angular অ্যাপ্লিকেশনগুলিতে URL ভিত্তিক নেভিগেশন পরিচালনা করা হয়। রাউটিং কনফিগার করা হয় যাতে নির্দিষ্ট URL-এর জন্য নির্দিষ্ট কম্পোনেন্ট বা ভিউ রেন্ডার করা যায়।

1. রাউটিং মডিউল তৈরি

প্রথমে, Angular অ্যাপ্লিকেশনে রাউটিং কনফিগার করতে AppRoutingModule তৈরি করতে হবে। আপনি CLI ব্যবহার করে এটি তৈরি করতে পারেন:

ng generate module app-routing --flat --module=app

এটি একটি app-routing.module.ts ফাইল তৈরি করবে, যেখানে রাউটিং কনফিগারেশন করা হবে।

2. রাউট কনফিগারেশন

app-routing.module.ts ফাইলে রাউট কনফিগারেশন করতে হবে। এখানে আপনি যেসব কম্পোনেন্ট URL এর সাথে যুক্ত করতে চান, সেগুলোর রুটের পাথ এবং সংশ্লিষ্ট কম্পোনেন্ট উল্লেখ করবেন।

উদাহরণস্বরূপ, ধরুন আমাদের দুটি কম্পোনেন্ট আছে: HomeComponent এবং AboutComponent।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default Route
  { path: 'about', component: AboutComponent }, // About Page Route
  { path: '**', component: NotFoundComponent } // Wildcard Route for 404
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],  // Configuring RouterModule
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' এই রুটটি ডিফল্ট রুট হিসেবে ব্যবহৃত হয় (যখন ইউআরএল / হবে, তখন এটি HomeComponent রেন্ডার করবে)।
• path: 'about' /about ইউআরএল-এ গিয়ে AboutComponent রেন্ডার করবে।
• path: ''** এই রুটটি ওয়াইল্ডকার্ড রুট, যা সব অজানা ইউআরএল-এর জন্য NotFoundComponent রেন্ডার করবে (404 পেজ হিসেবে কাজ করবে)।

3. রাউটার মডিউল অ্যাপ্লিকেশন মডিউলে ইম্পোর্ট করা

রাউটিং কনফিগারেশন তৈরি করার পর, এই মডিউলটি app.module.ts ফাইলে ইম্পোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; // Importing the routing module

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule  // Adding routing module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, AppRoutingModule কে imports অ্যারে তে যোগ করা হয়েছে, যা রাউটিং কার্যকর করে।

4. রাউটিং লিংক তৈরি করা

এখন, আপনি অ্যাপ্লিকেশনে বিভিন্ন পেজে নেভিগেট করতে routerLink ডিরেক্টিভ ব্যবহার করতে পারেন। এই ডিরেক্টিভের মাধ্যমে ইউজার একটি নির্দিষ্ট রুটে নেভিগেট করবে।

উদাহরণ:

<nav>
  <a routerLink="/">Home</a> | 
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

এখানে:

• routerLink অ্যাট্রিবিউট ব্যবহার করে ইউজারকে একটি রুটে নেভিগেট করা হচ্ছে।
• router-outlet এলিমেন্টটি অ্যাপ্লিকেশনের রুট কম্পোনেন্টে যেখানে ডাইনামিকভাবে ভিউ রেন্ডার হবে তা নির্দেশ করে।

5. নেভিগেট করা প্রোগ্রাম্যাটিকভাবে

Angular-এ আপনি প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে Router সার্ভিস ব্যবহার করতে পারেন। এতে আপনি কোনো ইভেন্ট বা অ্যাকশন ঘটলে রাউট পরিবর্তন করতে পারেন।

উদাহরণ:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `<button (click)="navigateToAbout()">Go to About</button>`
})
export class AppComponent {

  constructor(private router: Router) {}

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

এখানে, navigateToAbout() মেথডটি about রুটে নেভিগেট করবে।

6. রাউট প্রটেকশন (Optional)

কিছু রুটের জন্য আপনি Guards ব্যবহার করে রাউট অ্যাক্সেস কন্ট্রোল করতে পারেন। যেমন CanActivate গার্ড ব্যবহার করে আপনি কোনো রুট অ্যাক্সেস করার আগে শর্ত চেক করতে পারেন। এটি Authentication বা Authorization চেক করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // Add your authentication check logic here
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে AuthGuard গার্ড ব্যবহার করে একটি রুটের আগে অ্যাক্সেস চেক করা হচ্ছে। যদি ইউজার লগইন না থাকে, তবে সে লগইন পেজে রিডিরেক্ট হবে।

সারাংশ

• Angular অ্যাপ্লিকেশনগুলিতে RouterModule এর মাধ্যমে রাউটিং কনফিগার করা হয়।
• RouterModule.forRoot(routes) ব্যবহার করে অ্যাপ্লিকেশনের রাউট কনফিগারেশন সেট করা হয়।
• routerLink ডিরেক্টিভ দিয়ে ইউজারকে নির্দিষ্ট রুটে নেভিগেট করা হয়।
• router-outlet ব্যবহার করে কম্পোনেন্টের মধ্যে রেন্ডারিং কন্টেন্ট দেখা যায়।
• প্রোগ্রাম্যাটিক্যালি Router সার্ভিস ব্যবহার করে রাউট পরিবর্তন করা যায়।

Angular অ্যাপ্লিকেশনগুলিতে রাউটিং ব্যবস্থাপনা করতে RouterModule এবং Route Configuration ব্যবহার করা হয়। এই ডিরেক্টিভ এবং কনফিগারেশনগুলো Angular অ্যাপ্লিকেশনকে একাধিক পেজ বা ভিউতে নেভিগেট করতে সহায়ক হয়, এবং Single Page Application (SPA) এর কাঠামোকে সহজ করে তোলে।

RouterModule

Angular-এর RouterModule একটি মডিউল, যা অ্যাপ্লিকেশনকে রাউটিং কনফিগারেশনের সাথে সংযোগ করতে সাহায্য করে। এর মাধ্যমে বিভিন্ন রুট এবং সেগুলোর কম্পোনেন্ট ম্যাপিং করা যায়, যেগুলি ব্যবহারকারী URL অনুযায়ী অ্যাক্সেস করতে পারে। RouterModule সাধারণত AppRoutingModule-এ অন্তর্ভুক্ত করা হয় এবং তারপর এটি AppModule-এ ইম্পোর্ট করা হয়।

Route Configuration

Route Configuration হলো সেই পদ্ধতি যেখানে আপনি URL এবং কম্পোনেন্টের মধ্যে সম্পর্ক নির্ধারণ করেন। এতে রাউটের URL পাথ এবং সংশ্লিষ্ট কম্পোনেন্টের ম্যাপিং করা হয়। Angular রাউটারের সাহায্যে URL পরিবর্তনের উপর ভিত্তি করে নির্দিষ্ট কম্পোনেন্টগুলো লোড করা হয়।

Route Configuration উদাহরণ

প্রথমে AppRoutingModule তৈরি করতে হবে, যেখানে রাউট কনফিগার করা হবে। Angular CLI ব্যবহার করে এই মডিউলটি তৈরি করা যেতে পারে:

ng generate module app-routing --flat --module=app

এখন, app-routing.module.ts ফাইলে রাউট কনফিগারেশন সংজ্ঞায়িত করা হবে:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },  // Default Route
  { path: 'about', component: AboutComponent }, // About Page Route
  { path: '**', component: NotFoundComponent } // Wildcard Route (404)
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' হল ডিফল্ট রুট, যা প্রথমে লোড হবে, সাধারণত হোম পেজ।
• path: 'about' ইউআরএল /about কে AboutComponent কম্পোনেন্টের সাথে ম্যাপ করে।
• path: '**' একটি wildcard রাউট যা যেকোন অজানা বা অপ্রত্যাশিত রুটের জন্য ব্যবহার করা হয়, যা সাধারণত একটি 404 পেজ হিসেবে ব্যবহৃত হয়।

RouterLink এবং Navigation

Angular অ্যাপ্লিকেশনের মধ্যে পেইজে নেভিগেট করার জন্য RouterLink ডিরেক্টিভ ব্যবহার করা হয়। এর মাধ্যমে, ইউজার যখন একটি লিংক ক্লিক করবে, তখন তা নির্দিষ্ট রুটে নেভিগেট করবে। এটি প্রথাগত HTML <a> ট্যাগের মতো কাজ করে, তবে পেজ রিফ্রেশ না করে অ্যাঙ্গুলারের ভিতরে থাকা নতুন কম্পোনেন্ট লোড করে।

উদাহরণ

1. RouterLink ব্যবহার করা:

<!-- Home Page Link -->
<a routerLink="/">Home</a>

<!-- About Page Link -->
<a routerLink="/about">About</a>

এখানে, routerLink="/" হোম পেজে এবং routerLink="/about" অ্যাবাউট পেজে নেভিগেট করবে।

2. RouterLinkActive ব্যবহার করা:

RouterLinkActive ডিরেক্টিভটি ব্যবহৃত হয় রাউট লিংকটির অ্যাক্টিভ অবস্থার উপর ভিত্তি করে CSS ক্লাস যোগ করতে। এটি সাধারণত লিঙ্কে সিএসএস স্টাইল অ্যাড করার জন্য ব্যবহৃত হয় যখন তা অ্যাক্টিভ থাকে।

<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>

এখানে, যখন একটি রুট অ্যাক্টিভ হবে, তখন active ক্লাসটি ওই লিঙ্কে যোগ করা হবে।

রাউট নেভিগেশন

Router.navigate() পদ্ধতি ব্যবহার করে প্রোগ্রাম্যাটিকালি রাউট করা যেতে পারে। এটি একটি কম্পোনেন্ট বা সার্ভিস থেকে URL পরিবর্তন করতে ব্যবহৃত হয়।

উদাহরণ

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-nav',
  template: `
    <button (click)="goToHome()">Go to Home</button>
  `
})
export class NavComponent {

  constructor(private router: Router) { }

  goToHome() {
    this.router.navigate(['/']);
  }
}

এখানে, goToHome() মেথডটি Router.navigate() ব্যবহার করে / রুটে নেভিগেট করবে, অর্থাৎ হোম পেজে যাবে।

রাউট প্যারামিটার

Angular রাউটিং এ আপনি ডাইনামিক প্যারামিটার পাঠাতে পারেন। এটি বিভিন্ন ইউজার ইনপুট বা ডেটার উপর ভিত্তি করে রাউট পরিবর্তন করতে সাহায্য করে।

উদাহরণ

// রাউট কনফিগারেশন
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

// URL: '/user/123'

এখানে, :id প্যারামিটার ব্যবহার করা হয়েছে, যা URL থেকে ডাইনামিকভাবে একটি মান গ্রহণ করবে (যেমন 123)। এই প্যারামিটারটি কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যেতে পারে।

প্যারামিটার গ্রহণ করা

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User ID: {{ userId }}</h1>`
})
export class UserComponent implements OnInit {
  userId: string | null = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

এখানে, ActivatedRoute ব্যবহার করে URL প্যারামিটার id গ্রহণ করা হচ্ছে এবং তা কম্পোনেন্টে প্রদর্শন করা হচ্ছে।

Conclusion

Angular-এর RouterModule এবং Route Configuration অ্যাপ্লিকেশনে বিভিন্ন পেজ বা ভিউ নেভিগেট করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ব্যবহার করে, আপনি URL এর সাথে কম্পোনেন্ট ম্যাপিং করতে পারেন এবং Angular-এর ডায়নামিক রাউটিং ও নেভিগেশন সুবিধা উপভোগ করতে পারেন।

Angular অ্যাপ্লিকেশনে Route Parameters এবং Query Parameters ব্যবহার করে বিভিন্ন ধরণের ডেটা পাস করা যায়, যা এক পৃষ্ঠার মধ্যে বিভিন্ন কম্পোনেন্ট বা ভিউয়ের মধ্যে নেভিগেশন করতে সাহায্য করে। এটি Single Page Applications (SPA) এ ডেটা ট্রান্সফার এবং ইউআরএল (URL) দ্বারা অ্যাপ্লিকেশনের নির্দিষ্ট স্টেট রেটেন করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Route Parameters

Route Parameters URL-এর অংশ হিসেবে ব্যবহারকারীর কাছ থেকে ডেটা গ্রহণ করার পদ্ধতি। এটি সাধারণত dynamic routing বা parameterized routes-এ ব্যবহৃত হয়। উদাহরণস্বরূপ, যখন আপনি একটি আইডি বা অন্য কোনো মান URL-এ পাস করতে চান, তখন Route Parameters ব্যবহার করা হয়।

Route Parameters কিভাবে কাজ করে?

আপনি URL প্যাটার্নের মধ্যে নির্দিষ্ট প্যারামিটার ব্যবহার করতে পারেন, যেগুলি ডাইনামিকভাবে URL-এর মাধ্যমে পাওয়া যাবে। যেমন:

/user/:id

এখানে :id হল একটি route parameter, যা URL-এর মধ্যে ডাইনামিক মান গ্রহণ করবে। উদাহরণস্বরূপ, /user/123 অথবা /user/456 এই ধরনের URL এ id প্যারামিটারটি পাস হবে।

Route Parameter এর সাথে রাউটিং কনফিগারেশন

রাউটিং কনফিগারেশনে Route Parameters ব্যবহার করতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে :id হলো Route Parameter, যেটি UserComponent কম্পোনেন্টে পাস হবে।

Route Parameter Access

Route Parameter-কে Angular কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যায়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: '<h1>User ID: {{ userId }}</h1>',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id')!;
  }
}

এখানে, this.route.snapshot.paramMap.get('id') ব্যবহার করে id প্যারামিটারটি নেওয়া হচ্ছে। snapshot হলো রাউটের বর্তমান স্টেট, এবং paramMap হলো URL থেকে প্যারামিটারগুলোর মান ধারণ করে।

Query Parameters

Query Parameters URL এর অংশ হিসেবে ব্যবহার করা হয় যেখানে ডেটার কিওয়ারি প্যারামিটারগুলি পাস করা হয়। সাধারণত, URL-এর শেষে ?key=value প্যাটার্নে query parameters থাকে। এই প্যারামিটারগুলো সাধারণত ঐতিহ্যগত ওয়েব অ্যাপ্লিকেশনের URL-এ দেখা যায় যেমন ?page=1&sort=desc।

Query Parameters কিভাবে কাজ করে?

Query parameters URL-এর শেষে ?key=value এর মাধ্যমে যুক্ত হয়। একাধিক query parameters থাকলে এগুলোর মধ্যে & দিয়ে আলাদা করা হয়।

যেমন:

/search?term=angular&page=1

এখানে, term এবং page হচ্ছে query parameters।

Query Parameters এর সাথে রাউটিং কনফিগারেশন

Angular-এ Query Parameters ব্যবহার করতে, রাউটিং কনফিগারেশনে পরিবর্তন করতে হবে না, কারণ query parameters URL-এ পাস করা হয় এবং তা আলাদা ভাবে রাউট কনফিগারেশনের অংশ হয় না।

Query Parameters Access

Query Parameters অ্যাক্সেস করতে ActivatedRoute এর queryParamMap ব্যবহার করা হয়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search',
  template: '<h1>Search Term: {{ searchTerm }}</h1>',
})
export class SearchComponent implements OnInit {
  searchTerm: string = '';
  page: number = 1;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.searchTerm = params.get('term')!;
      this.page = +params.get('page')!;  // convert to number
    });
  }
}

এখানে:

• this.route.queryParamMap.subscribe() ব্যবহার করা হয়েছে query parameters নেওয়ার জন্য।
• params.get('term') এবং params.get('page') ব্যবহার করে query parameters অ্যাক্সেস করা হয়েছে।

Route Parameters এবং Query Parameters এর মধ্যে পার্থক্য

উপসংহার

Route Parameters এবং Query Parameters উভয়ই Angular অ্যাপ্লিকেশনের রাউটিং ব্যবস্থায় ডেটা পাস করার জন্য ব্যবহৃত হয়, তবে এগুলোর ব্যবহারের ক্ষেত্রে কিছু মৌলিক পার্থক্য রয়েছে। Route Parameters সাধারণত URL এর অংশ হিসেবে ব্যবহৃত হয় যেখানে আপনি যেকোনো ডাইনামিক ডেটা পাস করতে পারেন। Query Parameters URL এর শেষে ?key=value প্যাটার্নে থাকা কিওয়ারি প্যারামিটার দিয়ে ডেটা পাস করতে ব্যবহৃত হয় এবং তা ঐচ্ছিক থাকে।

Angular-এ চাইল্ড রাউটস একটি শক্তিশালী রাউটিং কনফিগারেশন যা একটি রুটের (প্যারেন্ট রুট) অধীনে সাব-রুট (চাইল্ড রুট) তৈরি করতে সাহায্য করে। এটি Nested Routing বা Nested Views তৈরি করার একটি উপায়, যার মাধ্যমে আপনি একটি পেজের মধ্যে একাধিক ভিউ লোড করতে পারেন।

এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনাকে একাধিক কম্পোনেন্ট একে অপরের মধ্যে লোড করতে হয়, এবং একে অপরের সাথে সম্পর্কিত কনটেন্ট শো করতে হয়।

চাইল্ড রাউটস কী?

চাইল্ড রাউটস হলো মূল রুটের অধীনে সাব-রুটের সংজ্ঞা, যেগুলিকে মূল রুটের ভিউতে নেস্টেড (nested) হিসেবে দেখানো হয়। চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি কম্পোনেন্টের মধ্যে আরও অনেক কম্পোনেন্ট লোড করতে পারবেন, যেমন ড্যাশবোর্ডে বিভিন্ন সেকশন (Overview, Reports, Settings) থাকতে পারে, যেগুলোর প্রতিটির জন্য আলাদা রাউট কনফিগারেশন থাকবে।

চাইল্ড রাউটস কনফিগারেশন

চাইল্ড রাউটস তৈরি করতে হলে, প্রথমে আপনাকে প্যারেন্ট রাউট তৈরি করতে হবে এবং তারপরে সেটির অধীনে চাইল্ড রাউটস কনফিগার করতে হবে। উদাহরণস্বরূপ:

প্যারেন্ট রাউট কনফিগারেশন

ধরা যাক, আমাদের একটি ড্যাশবোর্ড পেজ রয়েছে এবং তার অধীনে বিভিন্ন চাইল্ড রাউটস রয়েছে, যেমন "Overview", "Reports", এবং "Settings"।

1. প্রথমে, AppRoutingModule এ প্যারেন্ট রাউট এবং চাইল্ড রাউট কনফিগার করতে হবে।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './dashboard/overview/overview.component';
import { ReportsComponent } from './dashboard/reports/reports.component';
import { SettingsComponent } from './dashboard/settings/settings.component';

const routes: Routes = [
  {
    path: 'dashboard', component: DashboardComponent, children: [
      { path: '', component: OverviewComponent },      // Default child route
      { path: 'overview', component: OverviewComponent },
      { path: 'reports', component: ReportsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• DashboardComponent হলো প্যারেন্ট রুট, এবং এটি চাইল্ড রাউটগুলিকে ধারণ করবে।
• children অ্যারে ভিতরে চাইল্ড রাউটস কনফিগার করা হয়েছে:
  • /dashboard/overview এর জন্য OverviewComponent
  • /dashboard/reports এর জন্য ReportsComponent
  • /dashboard/settings এর জন্য SettingsComponent

DashboardComponent এর HTML (টেমপ্লেট)

প্যারেন্ট কম্পোনেন্টে router-outlet ব্যবহার করতে হবে যেখানে চাইল্ড কম্পোনেন্টগুলো লোড হবে।

<!-- dashboard.component.html -->
<h2>Welcome to the Dashboard!</h2>
<nav>
  <a routerLink="overview">Overview</a>
  <a routerLink="reports">Reports</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

এখানে, routerLink এর মাধ্যমে চাইল্ড রাউটসের মধ্যে নেভিগেট করা হচ্ছে এবং router-outlet এর মাধ্যমে সেই কম্পোনেন্টটি রেন্ডার হবে।

চাইল্ড রাউটসের সুবিধা

1. Nested Views: চাইল্ড রাউটস ব্যবহার করে আপনি একাধিক ভিউকে একই পেজে নেস্ট করতে পারেন। যেমন, একটি ড্যাশবোর্ডে বিভিন্ন সেকশন বা ট্যাব।
2. ইন্টারনাল নেভিগেশন: চাইল্ড রাউটস সাধারণত প্যারেন্ট রাউটের সাথে সম্পর্কিত থাকে, ফলে ভিন্ন ভিন্ন পেজের মধ্যে সহজে নেভিগেট করা সম্ভব হয়।
3. অলিম্পিক স্ট্রাকচার: চাইল্ড রাউটস ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের রাউটিং কাঠামো আরও পরিষ্কার এবং কাঠামোবদ্ধ হয়। এতে কম্পোনেন্টের হায়ারার্কি স্পষ্ট থাকে।
4. Lazy Loading: চাইল্ড রাউটসের সাথে lazy loading কনফিগার করাও সম্ভব, যা অ্যাপ্লিকেশনের পারফরমেন্স উন্নত করতে সাহায্য করে। শুধুমাত্র যখন চাইল্ড রাউটটি অ্যাক্সেস করা হবে, তখনই সেই কম্পোনেন্ট বা মডিউল লোড হবে।

চাইল্ড রাউটসের উদাহরণ

এখানে আরও একটি উদাহরণ দেওয়া হলো যেখানে, একটি প্যারেন্ট কম্পোনেন্ট ProductComponent এবং তার অধীনে কয়েকটি চাইল্ড রাউট রয়েছে, যেমন "Product List", "Product Detail" ইত্যাদি।

const routes: Routes = [
  {
    path: 'products', component: ProductComponent, children: [
      { path: '', component: ProductListComponent },       // Default route
      { path: 'list', component: ProductListComponent },
      { path: 'detail/:id', component: ProductDetailComponent }
    ]
  }
];

এখানে ProductComponent প্যারেন্ট কম্পোনেন্ট হিসেবে কাজ করবে এবং তার অধীনে ProductListComponent এবং ProductDetailComponent চাইল্ড রাউট হিসেবে কনফিগার করা হয়েছে।

চাইল্ড রাউটসে ডাইনামিক প্যারামিটার

চাইল্ড রাউটসেও আপনি ডাইনামিক প্যারামিটার ব্যবহার করতে পারেন, যেমন :id এর মাধ্যমে একটি নির্দিষ্ট প্রোডাক্টের ডিটেইলস দেখানো যেতে পারে।

{ path: 'detail/:id', component: ProductDetailComponent }

এটি ProductDetailComponent কে id প্যারামিটার গ্রহণ করার অনুমতি দেয়, এবং সেই প্যারামিটার ব্যবহার করে উপযুক্ত ডেটা লোড করা সম্ভব হয়।

উপসংহার

Angular-এ চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি প্যারেন্ট রুটের অধীনে একাধিক সাব-রুট (চাইল্ড রুট) কনফিগার করতে পারেন। এটি nested views তৈরি করতে সাহায্য করে এবং অ্যাপ্লিকেশনের রাউটিং কাঠামোকে আরও মডুলার এবং স্কেলেবল করে তোলে।

Lazy loading হলো একটি প্রযুক্তি যা Angular অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। Lazy loading-এর মাধ্যমে Angular শুধুমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করে যখন সেগুলো ব্যবহার করা হয়। এর ফলে অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময় কম সময় নেয় এবং পেজের মধ্যে unnecessary কোড লোড না হয়ে শুধু প্রয়োজনীয় কোডই লোড হয়।

Angular-এ Lazy Loading রাউটিংয়ের মাধ্যমে বিভিন্ন ফিচারের জন্য আলাদা আলাদা মডিউল তৈরি করা হয়, যেগুলো ইউজারের নেভিগেশন অনুযায়ী ডাইনামিক্যালি লোড হয়। এর ফলে অ্যাপ্লিকেশনটি দ্রুত লোড হয় এবং স্কেলেবল থাকে।

Lazy Loading রাউটিং কনফিগারেশন

Lazy loading কনফিগার করার জন্য Angular-এ কিছু নির্দিষ্ট পদক্ষেপ অনুসরণ করতে হয়। এখানে পুরো প্রক্রিয়াটি ব্যাখ্যা করা হয়েছে:

1. মডিউল তৈরি করা

প্রথমে আপনাকে একটি নতুন মডিউল তৈরি করতে হবে যেটি Lazy Loading এর মাধ্যমে লোড হবে। CLI ব্যবহার করে মডিউল তৈরি করতে পারেন:

ng generate module feature --route feature --module app-routing

এটি একটি feature মডিউল তৈরি করবে এবং সেই মডিউলটি app-routing.module.ts-এ রাউটিং কনফিগারেশনে যুক্ত হবে।

2. রাউটিং কনফিগারেশন

Lazy loading কাজ করার জন্য আপনার AppRoutingModule এ মডিউলটি loadChildren দিয়ে লোড করতে হবে।

উদাহরণ:

ধরা যাক, আপনার অ্যাপ্লিকেশন দুটি রাউট রয়েছে, একটি হোম পেজ এবং একটি ফিচার পেজ। ফিচার পেজটিকে lazy load করা হবে।

// app-routing.module.ts

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

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে, loadChildren প্যারামিটারটি একটি ফাংশন নেয়, যা ডাইনামিকভাবে FeatureModule মডিউলটি লোড করবে। import() সিঙ্ক্রোনাস ভাবে মডিউল লোড করতে সহায়তা করে।

3. Feature Module এ Routing কনফিগারেশন

ফিচার মডিউলের নিজস্ব রাউটিং কনফিগারেশন থাকতে হবে যাতে feature পেজের জন্য প্রয়োজনীয় কম্পোনেন্ট লোড করা যায়।

// feature-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';

const routes: Routes = [
  { path: '', component: FeatureComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FeatureRoutingModule { }

এখানে, RouterModule.forChild(routes) ব্যবহার করা হয়েছে, কারণ এটি একটি child route কনফিগারেশন। মূল রাউট মডিউলটি AppRoutingModule এবং FeatureModule এর জন্য পৃথকভাবে রাউটিং কনফিগার করা হয়েছে।

4. Feature Module তৈরির পর FeatureModule লোড করা

এখন আপনার ফিচার মডিউলটি AppRoutingModule তে Lazy Load হতে প্রস্তুত। ফিচার মডিউলটি সাধারণত কম্পোনেন্ট এবং পরিষেবা দিয়ে গঠিত হবে:

// feature.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature/feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})
export class FeatureModule { }

এখানে, FeatureRoutingModule এ feature-routing.module.ts এর রাউটিং কনফিগারেশন ইনক্লুড করা হয়েছে, এবং FeatureComponent কম্পোনেন্ট যুক্ত করা হয়েছে।

Lazy Loading এর সুবিধা

1. প্লাগ অ্যান্ড প্লে: আপনি নতুন ফিচার বা মডিউল অ্যাড করার সময় পূর্ববর্তী কোডে কোনো পরিবর্তন ছাড়াই তা আলাদাভাবে লোড করতে পারেন।
2. পারফরম্যান্স উন্নয়ন: অ্যাপ্লিকেশনটি প্রথমে দ্রুত লোড হয় কারণ শুধু প্রয়োজনীয় কোড লোড হয়। অন্যান্য মডিউলগুলো পরে ইউজারের চাহিদা অনুযায়ী লোড হয়।
3. বড় অ্যাপ্লিকেশন ম্যানেজমেন্ট: বড় Angular অ্যাপ্লিকেশনগুলোর জন্য Lazy loading ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও বেশি স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য হয়।

Lazy Loading এর জন্য কিছু পরামর্শ

• নামকরণ স্ট্রাটেজি: মডিউলগুলো এবং রাউটের নামকরণ যেন পরিষ্কার থাকে, যাতে ব্যবস্থাপনায় সুবিধা হয়।
• ব্যবহারকারীর অভিজ্ঞতা: আপনি অ্যাপ্লিকেশনের যে অংশগুলোর জন্য lazy loading ব্যবহার করবেন তা ভাবুন। যেমন, সাধারণত অ্যাপ্লিকেশনের প্রথমে প্রয়োজনীয় মডিউলগুলো আগেই লোড করতে হবে, যেগুলি ব্যবহারকারী খুব দ্রুত দেখতে চান।

Lazy loading, Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং স্কেলেবিলিটি বাড়াতে অত্যন্ত কার্যকর একটি কৌশল।

রাউট গার্ডস Angular অ্যাপ্লিকেশনের গুরুত্বপূর্ণ একটি ফিচার যা রাউট পরিবর্তনের পূর্বে কিছু শর্ত যাচাই করে। এটি ব্যবহারকারীর অ্যাপ্লিকেশন বা রাউটের নির্দিষ্ট অংশে প্রবেশের অনুমতি বা বাধা দিতে ব্যবহৃত হয়। রাউট গার্ডস মূলত CanActivate, CanDeactivate, CanLoad, Resolve, এবং CanActivateChild নামে কয়েকটি গার্ড প্রদান করে যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়।

রাউট গার্ডসের প্রকারভেদ

1. CanActivate

CanActivate গার্ডটি একটি রাউট এক্সেস করার আগে রিটার্ন করা একটি শর্ত চেক করে। যদি শর্তটি পূর্ণ হয়, তবে রাউটটি অ্যাক্সেস করা যাবে, নতুবা ব্যবহারকারী অন্য কোথাও রিডিরেক্ট হবে। এটি সাধারণত ইউজার অথেনটিকেশন বা অথোরাইজেশনের জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Example: Check if user is logged in
    if (localStorage.getItem('userLoggedIn')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে, AuthGuard গার্ডটি ইউজার যদি লগইন না করে থাকে তবে /login পেজে রিডিরেক্ট করবে।

2. CanDeactivate

CanDeactivate গার্ডটি তখন ব্যবহার করা হয় যখন একটি ব্যবহারকারী কোনো কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে যেতে চায়, এবং আপনি চাইলে তার আগে কিছু নিশ্চিতকরণ (confirmation) বা শর্ত পরীক্ষা করতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা পেজের পরিবর্তন পূর্বে কোনো সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

এখানে, CanComponentDeactivate ইন্টারফেসটি সুনির্দিষ্টভাবে canDeactivate() মেথডের জন্য কন্ট্রোল প্রদান করে, যা ফর্ম বা পেজের পরিবর্তন পূর্বে যাচাই করবে।

3. CanLoad

CanLoad গার্ডটি নির্দিষ্ট মডিউল লোড হওয়ার আগে চেক করে। এটি সাধারণত lazy-loaded মডিউল লোড করার আগে ব্যবহৃত হয়, যাতে শুধুমাত্র সঠিক ইউজাররা সেই মডিউল অ্যাক্সেস করতে পারে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanLoad {
  constructor(private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('userRole') === 'admin') {
      return true;
    } else {
      this.router.navigate(['/not-authorized']);
      return false;
    }
  }
}

এখানে, AdminGuard মডিউল লোড হওয়ার আগে ইউজারের রোল চেক করবে এবং যদি ইউজার admin না হয় তবে তাকে not-authorized পেজে রিডিরেক্ট করবে।

4. CanActivateChild

CanActivateChild গার্ডটি সাব-রাউটগুলোর জন্য ব্যবহৃত হয়। এটি মূলত কোনো প্যারেন্ট রাউটের অধীনে থাকা চাইল্ড রাউটগুলোর জন্য রেগুলেশন সেট করতে ব্যবহৃত হয়।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminChildGuard implements CanActivateChild {

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('userRole') === 'admin') {
      return true;
    } else {
      return false;
    }
  }
}

এখানে, AdminChildGuard গার্ডটি চাইল্ড রাউটগুলোর জন্য ইউজারের রোল যাচাই করবে এবং শুধুমাত্র admin রোলধারী ইউজারকে সেগুলি অ্যাক্সেস করতে দেবে।

রাউট গার্ডস কনফিগারেশন

রাউট গার্ড ব্যবহার করার জন্য আপনাকে রাউট কনফিগারেশন-এ গার্ড যুক্ত করতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './guards/auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে, canActivate: [AuthGuard] ব্যবহার করে, হোম পেজে যাওয়ার আগে AuthGuard গার্ডটি চেক করবে।

সারাংশ

Angular রাউট গার্ডস আপনাকে রাউট এবং কম্পোনেন্ট পরিবর্তনের আগে বিভিন্ন শর্ত পরীক্ষা করার সুযোগ দেয়। এটি ইউজার অথেনটিকেশন, অথোরাইজেশন, ফর্ম সাবমিশন, এবং নির্দিষ্ট রাউট বা মডিউল লোডে শর্তাবলী নির্ধারণ করতে সহায়তা করে, যা অ্যাপ্লিকেশনকে নিরাপদ এবং ব্যবহারযোগ্য রাখে।

Angular-এ রাউট রেজলভার (Route Resolver) হল একটি বিশেষ ধরনের Angular সার্ভিস যা রাউটিং সিস্টেমের সাথে সংযুক্ত থাকে এবং রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা ফেচিং বা অ্যাসিনক্রোনাস অপারেশন সম্পন্ন করে। এটি একটি অ্যাঙ্গুলার রাউটের সাথে যুক্ত থাকে, যাতে ইউজার রাউটের টার্গেট কম্পোনেন্টে পৌঁছানোর আগেই প্রয়োজনীয় ডেটা লোড হয়ে যায়।

রাউট রেজলভার সাধারণত সেই ক্ষেত্রে ব্যবহার করা হয় যখন আপনার কম্পোনেন্টের জন্য কোন ডেটা সার্ভিস বা API কলের মাধ্যমে আসতে হবে এবং আপনি নিশ্চিত করতে চান যে কম্পোনেন্টটি শুধু ডেটা পাওয়ার পরই রেন্ডার হবে।

রাউট রেজলভার কিভাবে কাজ করে?

যখন Angular রাউটার কোন নতুন রাউট লোড করতে চায়, তখন আপনি একটি রেজলভার তৈরি করেন যা প্রয়োজনীয় ডেটা ফেচিং সম্পন্ন করবে। এই ডেটা ফেচিং সম্পন্ন হওয়ার পর রাউট রেন্ডার হবে।

রাউট রেজলভার সাধারণত resolve মেথডের মাধ্যমে কাজ করে যা একটি প্রমিস (Promise) বা Observable রিটার্ন করে। Angular রাউটার অপেক্ষা করবে যতক্ষণ না ডেটা লোড হয়ে যাবে এবং তারপর কম্পোনেন্টে নেভিগেট করবে।

রাউট রেজলভার তৈরি করা

১. রেজলভার সার্ভিস তৈরি করুন: প্রথমে একটি সার্ভিস তৈরি করতে হবে যেটি রেজলভার ফাংশনালিটি প্রদান করবে।

Angular CLI দিয়ে রেজলভার সার্ভিস তৈরি করতে:

ng generate service resolvers/data

এটি একটি data.resolver.ts নামক ফাইল তৈরি করবে।

২. রেজলভার সার্ভিসের কোড লিখুন: Resolve ইন্টারফেসটি ইমপ্লিমেন্ট করুন এবং resolve মেথডে ডেটা ফেচিং লজিক লিখুন।

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service'; // আপনার ডেটা সার্ভিস

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData(); // এখানে আপনার API কল বা ডেটা ফেচিং কোড থাকবে
  }
}

এখানে:

• resolve মেথডটি একটি Observable বা Promise রিটার্ন করবে।
• DataService হল একটি সার্ভিস যা ডেটা ফেচিংয়ের জন্য ব্যবহার করা হবে (এটি আপনার API কল বা অন্য যেকোনো ডেটা রিটার্ন করতে পারে)।

রাউট কনফিগারেশন এবং রেজলভার ব্যবহার

একবার রেজলভার তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে ব্যবহার করতে হবে যাতে রাউটের লোড হওয়ার সময় ডেটা ফেচিং হয়।

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DataResolver } from './resolvers/data.resolver';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    resolve: { data: DataResolver }  // রেজলভার যুক্ত করা হল
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• resolve প্রপার্টি ব্যবহার করে DataResolver রেজলভার অ্যাসাইন করা হয়েছে। এটি data নামে একটি প্রোপার্টি হিসাবে ডেটা রিটার্ন করবে।

কম্পোনেন্টে রেজলভড ডেটা ব্যবহার করা

এখন, HomeComponent-এ আমরা রেজলভড ডেটা ব্যবহার করতে পারি। Angular রাউটার স্বয়ংক্রিয়ভাবে এই ডেটা ActivatedRoute এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করবে।

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data['data']; // রেজলভড ডেটা অ্যাক্সেস করা
  }
}

এখানে, ActivatedRoute.snapshot.data['data'] থেকে আমরা DataResolver এর মাধ্যমে রিটার্ন করা ডেটা অ্যাক্সেস করছি।

রাউট রেজলভার এর সুবিধা

• এনটার্পাইজ অ্যাপ্লিকেশনগুলির জন্য উপকারী: যখন আপনার অ্যাপ্লিকেশনে একটি বা একাধিক ডেটা ফেচিং অপারেশন প্রয়োজন, রাউট রেজলভার এটি অ্যাসিঙ্ক্রোনাসভাবে হ্যান্ডেল করতে সাহায্য করে।
• ডেটা লোড হওয়ার আগে রেন্ডারিং বন্ধ: এই প্রক্রিয়া নিশ্চিত করে যে কম্পোনেন্টটি শুধুমাত্র তখনই রেন্ডার হবে যখন প্রয়োজনীয় ডেটা সম্পূর্ণভাবে লোড হয়ে যাবে।
• ডেটা ফেচিং লজিকের বিচ্ছিন্নতা: ডেটা ফেচিং লজিক কম্পোনেন্ট থেকে সরিয়ে সার্ভিসে রাখা যায়, যা কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে।

সারাংশ

রাউট রেজলভার Angular অ্যাপ্লিকেশনগুলিতে ডেটা ফেচিং বা অন্যান্য অ্যাসিনক্রোনাস কাজগুলি সম্পন্ন করার জন্য ব্যবহৃত হয়। এটি রাউট লোড হওয়ার আগে নির্দিষ্ট ডেটা রিটার্ন করে এবং কম্পোনেন্টটিকে ডেটা রেন্ডার করার আগে একে প্রি-লোড করতে সহায়ক। এটি Angular অ্যাপ্লিকেশনের কর্মক্ষমতা এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।