Routing এবং Navigation

Aurelia ফ্রেমওয়ার্কে Routing এবং Navigation খুবই গুরুত্বপূর্ণ ফিচার, যা এক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে সহায়তা করে। Aurelia-এর রাউটিং সিস্টেম খুবই শক্তিশালী এবং এটি ডায়নামিক রাউটিং, নেস্টেড রাউটস এবং প্যারামিটারাইজড রাউটস সাপোর্ট করে।

Aurelia রাউটিং সিস্টেম আপনাকে URL-এর ভিত্তিতে বিভিন্ন ভিউ এবং কম্পোনেন্ট লোড করার সুযোগ দেয়। এটি আপনাকে ডাটা পাস এবং নেভিগেশন ম্যানেজ করার জন্য সহজ সমাধান প্রদান করে।

Aurelia রাউটিং সিস্টেমের মৌলিক ধারণা

Aurelia রাউটিং সিস্টেম Aurelia.router মডিউল ব্যবহার করে কাজ করে। রাউটিং ব্যবস্থাপনা প্রধানত দুটি কনসেপ্টের মধ্যে সীমাবদ্ধ:

• Route: একটি URL পাথ এবং সেই পাথের সাথে যুক্ত কম্পোনেন্ট।
• Navigation: ইউজার যখন URL পরিবর্তন করেন, তখন অ্যাপ্লিকেশনকে অন্য একটি কম্পোনেন্টে নেভিগেট করতে হয়।

Aurelia রাউটিং সেটআপ

Aurelia রাউটিং সিস্টেম সেটআপ করতে নিম্নলিখিত স্টেপগুলো অনুসরণ করতে হবে।

১. Aurelia রাউটিং সেটআপ করা

Aurelia প্রজেক্টে রাউটিং সিস্টেম সক্রিয় করতে, প্রথমে aurelia.config.js বা main.js ফাইলে রাউটার কনফিগারেশন করতে হয়।

main.js (এন্ট্রি পয়েন্টে রাউটার কনফিগারেশন)

import {PLATFORM} from 'aurelia-pal';
import {Aurelia} from 'aurelia-framework';
import {RouterConfiguration, Router} from 'aurelia-router';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

এটি মূল অ্যাপ্লিকেশন ফাইল app.js কে রুট হিসেবে সেট করে।

২. Route তৈরি করা

Aurelia রাউটিংয়ের জন্য, app.js অথবা অন্য কোনো কম্পোনেন্টের মধ্যে @router ডেকোরেটর ব্যবহার করে রাউটিং কনফিগারেশন তৈরি করা হয়।

app.js (রাউট কনফিগারেশন)

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
  }

  configureRouter(config, router) {
    config.title = 'Aurelia Routing';
    config.map([
      { route: ['','home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' },
      { route: 'about', name: 'about', moduleId: 'about', nav: true, title: 'About' }
    ]);
    this.router = router;
  }
}

এখানে, দুটি রাউট তৈরি করা হয়েছে:

• home: এটি মূল রুট এবং প্রথম ভিউ হিসেবে কাজ করবে।
• about: এই রুটটি about.html ভিউ পেজ লোড করবে।

এখানে config.map() ফাংশনে রাউট গুলি সেট করা হয়, যেখানে প্রতিটি রাউটের জন্য একটি URL পাথ এবং সম্পর্কিত ভিউ মডিউল সেট করা হয়।

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

আপনার অ্যাপ্লিকেশনের প্রতিটি রাউটের জন্য একটি মডিউল তৈরি করতে হবে। উদাহরণস্বরূপ, home এবং about রাউটের জন্য দুটি ভিউ কম্পোনেন্ট তৈরি করতে হবে।

home.html

<template>
  <h2>Welcome to the Home Page</h2>
  <button click.delegate="navigateToAbout()">Go to About Page</button>
</template>

home.js

export class Home {
  navigateToAbout() {
    this.router.navigate('about');
  }
}

এখানে, navigateToAbout() ফাংশনটি about রাউটে নেভিগেট করবে।

about.html

<template>
  <h2>Welcome to the About Page</h2>
</template>

about.js

export class About {}

৪. রাউটিং প্যারামিটার্স ব্যবহার করা

Aurelia রাউটিং সিস্টেমে আপনি URL পাথের মধ্যে প্যারামিটার ব্যবহার করতে পারেন। উদাহরণস্বরূপ, :id প্যারামিটার ব্যবহার করা যেতে পারে যা ডাইনামিক ডেটা লোড করবে।

app.js (প্যারামিটার যুক্ত রাউট)

config.map([
  { route: 'user/:id', name: 'user', moduleId: 'user', nav: true, title: 'User Profile' }
]);

এখানে, /user/:id রাউটটি ব্যবহারকারী আইডি (id) প্যারামিটার নিয়ে কাজ করবে।

user.html (প্যারামিটার ব্যবহার)

<template>
  <h2>User Profile: ${id}</h2>
</template>

user.js (প্যারামিটার লোড করা)

export class User {
  activate(params) {
    this.id = params.id;
  }
}

এখানে, activate() মেথডটি প্যারামিটার (params.id) লোড করবে এবং ইউজার প্রোফাইল প্রদর্শন করবে।

৫. নেভিগেশন এবং লিঙ্ক

Aurelia রাউটিং সিস্টেমে navigation এবং linking খুব সহজ। আপনি route নাম দিয়ে সহজেই লিঙ্ক তৈরি করতে পারেন।

app.html (লিঙ্ক ব্যবহার)

<template>
  <nav>
    <ul>
      <li><a href="#/home">Home</a></li>
      <li><a href="#/about">About</a></li>
    </ul>
  </nav>
  <router-view></router-view>
</template>

এখানে, router-view ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন রাউটের ভিউ উপস্থাপন করা হবে।

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

আপনি প্রোগ্রামেটিকভাবে নেভিগেশন করতে চাইলে, this.router.navigate() ফাংশন ব্যবহার করতে পারেন।

home.js (প্রোগ্রামেটিক নেভিগেশন)

export class Home {
  navigateToAbout() {
    this.router.navigate('about');
  }
}

এটি ইউজার ক্লিকের মাধ্যমে about রাউটে নেভিগেট করবে।

উপসংহার

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

Aurelia ফ্রেমওয়ার্কে Router একটি গুরুত্বপূর্ণ ফিচার, যা অ্যাপ্লিকেশনের বিভিন্ন পেজ বা ভিউয়ের মধ্যে নেভিগেশন পরিচালনা করে। এটি একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে সহায়তা করে, যেখানে বিভিন্ন ভিউ একে অপরের সঙ্গে ইন্টারঅ্যাক্ট করতে পারে এবং ইউজার কোনো পেজ রিফ্রেশ ছাড়াই নতুন কন্টেন্ট দেখতে পারেন।

Aurelia এর Router সহজেই কনফিগার করা যায় এবং এর মাধ্যমে অ্যাপ্লিকেশন ভিউয়ের মধ্যে ডাইনামিক নেভিগেশন, কাস্টম রাউটিং এবং আর্কিটেকচার তৈরি করা সম্ভব।

Aurelia Router এর মূল বৈশিষ্ট্য

• URL ম্যানেজমেন্ট: URL এর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন ভিউ বা পেজে নেভিগেট করা যায়।
• ডাইনামিক রাউটিং: ইউজারের ইনপুট অনুযায়ী অ্যাপ্লিকেশনের পেজ বা ভিউ পরিবর্তন হয়।
• একক পেজ অ্যাপ্লিকেশন (SPA): নতুন পেজে যাওয়ার জন্য পুরো ওয়েবপেজ রিফ্রেশ করার প্রয়োজন নেই, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
• নেভিগেশন গার্ডস: কিছু বিশেষ শর্ত পূর্ণ না হলে নেভিগেশন ব্লক করা যায়।
• কাস্টম রাউটিং কনফিগারেশন: রাউটিং এবং নেভিগেশনের জন্য কাস্টম লজিক তৈরি করা যায়।

Aurelia Router সেটআপ এবং কনফিগারেশন

১. Router এর কনফিগারেশন

Aurelia Router ব্যবহার করতে হলে, প্রথমে Router কনফিগার করতে হবে। নিচে একটি সাধারণ কনফিগারেশন দেখানো হলো:

main.js:

import {Aurelia} from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';
import 'bootstrap/dist/css/bootstrap.min.css';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin(PLATFORM.moduleName('aurelia-router'));

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

এখানে aurelia-router প্লাগইনটি যুক্ত করা হয়েছে, যা রাউটিং ফিচার সক্রিয় করে।

২. Routes কনফিগারেশন

এরপর, routes কনফিগার করতে হবে, যেখানে আপনি ভিউ এবং URL এর সম্পর্ক স্থাপন করবেন। সাধারণভাবে, app.js ফাইলে রাউট কনফিগারেশন করা হয়।

app.js:

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia App';
    config.map([
      { route: ['', 'home'], name: 'home', moduleId: './home', nav: true, title: 'Home' },
      { route: 'about', name: 'about', moduleId: './about', nav: true, title: 'About' }
    ]);
    this.router = router;
  }
}

এখানে, config.map() এর মধ্যে প্রতিটি রাউটের জন্য একটি ভিউ (যেমন, home বা about) এবং তার সাথে সম্পর্কিত URL উল্লেখ করা হয়েছে।

• route: URL পাথ।
• name: রাউটের নাম।
• moduleId: রাউটের জন্য কম্পোনেন্ট বা ভিউ।
• nav: যদি এই রাউটটি মেনুতে দেখাতে চান, তবে true হবে।
• title: এই রাউটের শিরোনাম যা ব্রাউজারের ট্যাবের নাম হিসাবে প্রদর্শিত হবে।

৩. Views তৈরি করা

এখন, home.html এবং about.html নামক দুটি কম্পোনেন্ট তৈরি করতে হবে।

home.html:

<template>
  <h2>Welcome to the Home Page</h2>
</template>

about.html:

<template>
  <h2>About Us</h2>
  <p>This is the about page.</p>
</template>

এইভাবে, দুটি ভিউ তৈরি করে রাউটিং কনফিগারেশন ব্যবহার করা হয়েছে।

৪. Navigating between Routes (নেভিগেশন)

Aurelia Router এর মাধ্যমে আপনি নেভিগেশন করতে পারেন। এটি করার জন্য, router.navigateToRoute() বা router.navigate() মেথড ব্যবহার করা হয়।

নেভিগেশন করার উদাহরণ:

app.html:

<template>
  <nav>
    <ul>
      <li><a href="#" click.delegate="router.navigate('home')">Home</a></li>
      <li><a href="#" click.delegate="router.navigate('about')">About</a></li>
    </ul>
  </nav>
  <router-view></router-view>
</template>

এখানে, router-view হল একটি প্লেসহোল্ডার যেখানে আপনার রাউটেড ভিউ প্রদর্শিত হবে। click.delegate ব্যবহার করা হয়েছে, যা ক্লিক হলে router.navigate() মেথডকে কল করবে।

৫. Route Parameters (রাউট প্যারামিটার)

Aurelia Router আপনাকে রাউট প্যারামিটার ব্যবহার করার সুবিধা দেয়, যাতে আপনি ডাইনামিক পেজ তৈরি করতে পারেন। যেমন:

routes.js:

{ route: 'user/:id', name: 'user', moduleId: './user', nav: true, title: 'User Details' }

এখানে, :id হল একটি প্যারামিটার যা URL থেকে নেওয়া হবে।

user.js:

export class User {
  static inject = [Router];

  constructor(router) {
    this.router = router;
  }

  activate(params) {
    this.userId = params.id;
  }
}

এখানে, params.id ব্যবহার করে আমরা URL প্যারামিটার থেকে userId গ্রহণ করেছি।

৬. Navigation Guards (নেভিগেশন গার্ডস)

Aurelia Router আপনাকে নেভিগেশন গার্ডস ব্যবহার করার সুযোগ দেয়, যা নির্দিষ্ট শর্তে নেভিগেশন ব্লক বা অনুমোদন করতে পারে। আপনি canActivate বা canDeactivate মেথড ব্যবহার করতে পারেন।

canActivate Example:

export class About {
  canActivate() {
    return confirm('Do you really want to go to the About page?');
  }
}

এখানে, canActivate() মেথড কল করার পর ইউজারকে একটি কনফার্ম পপ-আপ দেখানো হবে। যদি ইউজার OK করে, তবেই নেভিগেশন সম্পন্ন হবে।

উপসংহার

Aurelia এর Router ফিচার অ্যাপ্লিকেশনের ভিউ ও নেভিগেশন ব্যবস্থাকে খুবই সহজ এবং ফ্লেক্সিবল করে তোলে। এটি আপনাকে URL পাথ, ভিউ এবং নেভিগেশন লজিকের মধ্যে সম্পর্ক স্থাপন করতে দেয়, যা একটি আধুনিক একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে অত্যন্ত কার্যকরী। Dynamic routing, Route Guards, এবং Route Parameters এর মতো বৈশিষ্ট্যগুলো Aurelia রাউটারের শক্তিশালী এবং বহুমুখী ব্যবহারের জন্য সহায়ক।

Aurelia ফ্রেমওয়ার্কে Routing এবং View Model কনফিগারেশন একে অপরের সঙ্গে জড়িত। রাউটিং সিস্টেমের মাধ্যমে আপনি URL পাথের ভিত্তিতে ভিউ এবং ভিউমডেল পরিচালনা করতে পারেন, যা Single Page Application (SPA) তৈরির জন্য অত্যন্ত কার্যকরী।

এখানে, আমরা Aurelia রাউটিং কনফিগারেশন এবং তার সঙ্গে সম্পর্কিত ভিউমডেল (ViewModel) তৈরি করার প্রক্রিয়া ব্যাখ্যা করবো।

১. Aurelia Routing কনফিগারেশন

Aurelia-তে রাউটিং কনফিগারেশন Router ক্লাসের মাধ্যমে করা হয়। রাউট কনফিগারেশনের জন্য configureRouter() মেথড ব্যবহার করা হয়, যেখানে URL পাথ এবং তার সাথে সম্পর্কিত ভিউ (মডিউল) সেট করা হয়।

Router কনফিগারেশন উদাহরণ

app.js (রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia Application';  // অ্যাপ্লিকেশনের টাইটেল
    config.map([  // রাউটের তালিকা
      { route: ['', 'home'], name: 'home', moduleId: './home', nav: true, title: 'Home' },
      { route: 'about', name: 'about', moduleId: './about', nav: true, title: 'About' },
      { route: 'user/:id', name: 'user', moduleId: './user', nav: true, title: 'User Profile' }
    ]);

    this.router = router;  // রাউটার অবজেক্ট
  }
}

এখানে, config.map() এর মাধ্যমে আমরা তিনটি রাউট কনফিগার করেছি:

• home: মূল রুট, যা home.html এবং home.js কম্পোনেন্টের সাথে সম্পর্কিত।
• about: about.html এবং about.js কম্পোনেন্টের সাথে সম্পর্কিত।
• user/:id: একটি ডাইনামিক রাউট যেখানে :id একটি প্যারামিটার হিসেবে ব্যবহার করা হচ্ছে।

moduleId এ উল্লেখ করা কম্পোনেন্ট বা মডিউল ফাইলের পাথ।

২. ViewModel কনফিগারেশন

Aurelia-তে ViewModel সাধারণত JavaScript (বা TypeScript) ফাইলে থাকে যা HTML টেমপ্লেটের সাথে যুক্ত থাকে। যখন ইউজার একটি রাউট ক্লিক করেন, তখন ভিউমডেল এবং তার সাথে সম্পর্কিত ভিউ রেন্ডার হয়।

home.js (ভিউমডেল উদাহরণ):

export class Home {
  // কনস্ট্রাক্টর ফাংশন যেখানে ইনজেকশন করা হতে পারে
  constructor() {
    this.message = "Welcome to the Home Page!";
  }

  // ইউজারের ক্লিক করলে 'about' রাউটে নেভিগেট করবে
  navigateToAbout() {
    this.router.navigate('about');
  }
}

এখানে, Home ক্লাস একটি ভিউমডেল যা home.html এর সঙ্গে যুক্ত। navigateToAbout() মেথড ব্যবহার করে ইউজারকে about রাউটে নেভিগেট করা হবে।

home.html (ভিউ):

<template>
  <h2>${message}</h2>
  <button click.delegate="navigateToAbout()">Go to About Page</button>
</template>

এখানে, click.delegate="navigateToAbout()" ব্যবহার করা হয়েছে যাতে বাটনে ক্লিক করলে Home কম্পোনেন্টের navigateToAbout() ফাংশন কল হয় এবং ইউজারকে about রাউটে পাঠানো হয়।

৩. Dynamic Route Parameters

Aurelia রাউটিং সিস্টেমে আপনি ডাইনামিক প্যারামিটার ব্যবহার করতে পারেন। উদাহরণস্বরূপ, /user/:id রাউটটি id প্যারামিটার দিয়ে ডাইনামিক ইউজার প্রোফাইল লোড করতে পারে।

user.js (প্যারামিটার নিয়ে কাজ):

export class User {
  activate(params) {
    this.userId = params.id;  // URL থেকে 'id' প্যারামিটার গ্রহণ
  }
}

এখানে, params.id ব্যবহার করে user রাউটের মধ্যে id প্যারামিটার গ্রহণ করা হয়েছে। যখন ইউজার /user/123 রাউটে যাবে, তখন this.userId = 123 সেট হবে।

user.html (প্যারামিটার ব্যবহার):

<template>
  <h2>User Profile: ${userId}</h2>
</template>

এখানে, userId ডাইনামিকভাবে পরিবর্তিত হবে এবং ইউজারের প্রোফাইল দেখাবে।

৪. Nested Routes (নেস্টেড রাউটস)

Aurelia রাউটিং সিস্টেমে আপনি নেস্টেড রাউটস ব্যবহার করতে পারেন। এটি আপনাকে একটি রাউটের মধ্যে আরও একটি রাউট ম্যানেজ করতে দেয়।

app.js (নেস্টেড রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia Application';
    config.map([
      { route: ['', 'home'], name: 'home', moduleId: './home', nav: true, title: 'Home' },
      {
        route: 'user/:id', name: 'user', moduleId: './user', nav: true, title: 'User Profile', 
        children: [
          { route: 'details', name: 'user-details', moduleId: './user-details', nav: true, title: 'User Details' }
        ]
      }
    ]);
    this.router = router;
  }
}

এখানে, user/:id রাউটের মধ্যে user-details নামক একটি নেস্টেড রাউট যুক্ত করা হয়েছে।

user-details.html (নেস্টেড ভিউ):

<template>
  <h3>User Details for ID: ${userId}</h3>
</template>

এখানে, userId ব্যবহার করে ডাইনামিকভাবে ইউজারের বিস্তারিত তথ্য প্রদর্শন করা হবে।

৫. Route Guards (নেভিগেশন গার্ডস)

Aurelia-তে আপনি রাউটের navigational guards ব্যবহার করতে পারেন, যা নেভিগেশন শুরু হওয়ার আগে কিছু শর্ত চেক করে। যেমন, canActivate() মেথড ব্যবহার করে আপনি একটি রাউটে যাওয়ার আগে অনুমতি চেক করতে পারেন।

user.js (canActivate উদাহরণ):

export class User {
  canActivate() {
    return confirm('Do you want to view the user profile?');  // ইউজারের কনফার্মেশন চেক
  }
}

এখানে, canActivate() মেথড ইউজারকে একটি কনফার্ম পপ-আপ দেখাবে। যদি ইউজার OK ক্লিক করেন, তবে নেভিগেশন চালু হবে, অন্যথায় বন্ধ হবে।

উপসংহার

Aurelia-তে Routing কনফিগারেশন এবং ViewModel ম্যানেজমেন্ট খুবই সরল এবং কার্যকরী। Routes এবং ViewModels একসঙ্গে কাজ করে, যেখানে রাউট কনফিগারেশনের মাধ্যমে URL পাথ এবং তার সঙ্গে সম্পর্কিত ভিউ এবং ভিউমডেল পরিচালনা করা হয়। Aurelia রাউটিং সিস্টেমে dynamic parameters, nested routes, এবং navigation guards এর মতো শক্তিশালী ফিচার রয়েছে, যা আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।

Aurelia একটি শক্তিশালী routing system সরবরাহ করে, যা আপনাকে অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য নির্দিষ্ট রাউট তৈরি করতে সহায়তা করে। Child Router এবং Nested Routes এই রাউটিং সিস্টেমের দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে হায়ারার্কিক্যাল (hierarchical) রাউটিং কনফিগারেশন তৈরি করতে সাহায্য করে।

এই ফিচারগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের ভিন্ন ভিন্ন অংশে সাব-রাউট নির্ধারণ করতে পারবেন এবং একটি অভ্যন্তরীণ রাউটিং কাঠামো তৈরি করতে পারবেন।

১. Child Router কী?

Child Router হল একটি router instance যা একটি প্রধান রাউটার (parent router) এর অধীনে কাজ করে। এটি আপনাকে সাব-রাউট তৈরি করতে এবং মূল রাউটের অভ্যন্তরে একটি নতুন রাউটের সিস্টেম তৈরি করতে সাহায্য করে।

Child Router ব্যবহারের মাধ্যমে আপনি রুটগুলোর মধ্যে nested structure তৈরি করতে পারেন, যেখানে প্রধান রাউটার একটি ভিউয়ের মধ্যে নতুন রাউট লোড করে।

২. Child Router সেটআপ

Aurelia-তে Child Router সেটআপ করতে নিচের ধাপগুলো অনুসরণ করতে হবে:

১. Parent Router (মূল রাউটার)

প্রথমে, আপনার মূল রাউটার ফাইল (যেমন app.js বা main.js) তৈরি করুন এবং এখানে child router সেটআপ করুন।

app.js (Parent Router)

export class App {
  static inject = [Router];

  constructor(router) {
    this.router = router;
  }

  configureRouter(config, router) {
    config.map([
      { route: '', moduleId: './home', nav: true, title: 'Home' },
      { route: 'about', moduleId: './about', nav: true, title: 'About' },
      { route: 'contact', moduleId: './contact', nav: true, title: 'Contact' },
      { route: 'parent', moduleId: './parent', name: 'parent', nav: true, title: 'Parent' }
    ]);

    this.router = router;
  }
}

এখানে, parent নামক রাউটের জন্য একটি moduleId সেট করা হয়েছে যা Child Router ধারণ করবে।

২. Child Router (সাব রাউটার)

Child Router অ্যাপ্লিকেশনের ভিতরে একটি নতুন রাউটিং সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত সাব ভিউ বা সাব রাউটের জন্য ব্যবহার করা হয়।

parent.js (Child Router)

export class Parent {
  static inject = [Router];

  constructor(router) {
    this.router = router;
  }

  configureRouter(config, router) {
    config.map([
      { route: '', moduleId: './child-home', nav: true, title: 'Child Home' },
      { route: 'child-about', moduleId: './child-about', nav: true, title: 'Child About' }
    ]);

    this.router = router;
  }
}

এখানে, Parent কম্পোনেন্টে Child Router তৈরি করা হয়েছে এবং এতে দুটি সাব-রাউট (child-home এবং child-about) ম্যাপ করা হয়েছে।

৩. Child Views

এখন, আপনাকে child views তৈরি করতে হবে যা উপরের রাউটগুলোর সাথে যুক্ত থাকবে। উদাহরণস্বরূপ:

child-home.js (Child View)

export class ChildHome {
  message = 'Welcome to the Child Home view!';
}

child-about.js (Child View)

export class ChildAbout {
  message = 'Welcome to the Child About view!';
}

৩. Nested Routes কী?

Nested Routes হল রাউটগুলোর একটি ধাপ-ধাপে গঠন, যেখানে এক রাউটার অন্য রাউটারের অধীনে থাকে। সাধারণত একটি রুটের ভেতরে অন্য রুটের উপস্থাপন (render) করা হয়, যা অ্যাপ্লিকেশনের গঠনকে সহজ এবং পরিষ্কার করে তোলে।

Aurelia-তে nested routes তৈরি করতে আপনি child router ব্যবহার করতে পারেন, যাতে আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য সাব রাউট নির্ধারণ করা যায়।

৪. Nested Routes সেটআপ

Nested Routes তৈরি করার জন্য, আপনি উপরের মতো Child Router ব্যবহার করতে পারেন এবং রাউটের ভিতরে নতুন রাউটগুলি ম্যাপ করতে পারেন।

উদাহরণ: Parent-Child Nested Routes

parent.html (Parent View)

<template>
  <h2>Parent View</h2>
  <nav>
    <a href="#/parent/child-home">Child Home</a> |
    <a href="#/parent/child-about">Child About</a>
  </nav>

  <router-view></router-view> <!-- Nested Route Rendering -->
</template>

এখানে, <router-view> ট্যাগটি ব্যবহৃত হয়েছে যেখানে child routes এর ভিউ রেন্ডার হবে।

৫. Routing Flow

Aurelia-তে child router এবং nested routes ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনে রাউটিং কাঠামো নিম্নরূপ হবে:

1. যখন আপনি /parent রাউট পাবেন, এটি parent.js কম্পোনেন্ট লোড করবে।
2. এরপর /parent/child-home বা /parent/child-about এর মাধ্যমে যে সাব রাউটটি নির্বাচন করা হবে, সেটি Child Router এর মাধ্যমে লোড হবে।
3. <router-view> ট্যাগটি এই সাব রাউটের ভিউ রেন্ডার করবে।

৬. Nested Routes এর সুবিধা

• ক্লিন কোড: Nested routes অ্যাপ্লিকেশনের বিভিন্ন অংশকে আলাদা এবং পরিষ্কার রাখে।
• রিইউজেবল কম্পোনেন্ট: Child router এর মাধ্যমে আপনি ছোট ছোট ভিউ কম্পোনেন্ট তৈরি করতে পারেন, যা বিভিন্ন জায়গায় রিইউজ করা যাবে।
• ডায়নামিক রাউটিং: সাব রাউটের মাধ্যমে ডায়নামিক রাউটিং তৈরি করা সম্ভব, যেখানে আপনি ভিন্ন ভিন্ন পেজে ডেটা পাস করতে পারেন।

উপসংহার

Child Router এবং Nested Routes Aurelia-তে একটি অ্যাপ্লিকেশনের অভ্যন্তরে সুনির্দিষ্ট ভিউয়ের জন্য শক্তিশালী রাউটিং কাঠামো তৈরি করতে সাহায্য করে। এই ফিচারগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরো মডুলার এবং রক্ষণাবেক্ষণযোগ্য করে তুলতে পারেন।

Aurelia-এ রাউটিং ব্যবস্থাপনাটি শক্তিশালী এবং ফ্লেক্সিবল। রাউটের সাথে সম্পর্কিত Lifecycle Hooks ডেভেলপারদের জন্য রাউট সেশন পরিচালনা করার সময় বিভিন্ন কাস্টম কার্যক্রম চালানোর সুযোগ প্রদান করে। Route Lifecycle Hooks দুটি প্রধান মেথড দিয়ে গঠিত: Activation এবং Deactivation।

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

১. canActivate() (Activation Hook)

canActivate() মেথডটি Route Guard হিসেবে ব্যবহৃত হয়, যা রাউটটি অ্যাকটিভেট করার আগে কল হয়। এটি রাউটটি সফলভাবে প্রবেশযোগ্য কিনা তা যাচাই করে। যদি canActivate() false রিটার্ন করে, তবে রাউটটি অ্যাকটিভ হবে না এবং ব্যবহারকারী রাউট থেকে ফিরে আসবে।

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট স্যুইচ হয় এবং নতুন রাউট অ্যাকটিভেট করার আগে।
• কিভাবে ব্যবহৃত হয়: আপনি যদি কোনো রাউটে প্রবেশের জন্য অথেনটিকেশন বা শর্তাবলী যাচাই করতে চান, তবে canActivate() ব্যবহার করবেন।

উদাহরণ:

export class MyComponent {
  canActivate() {
    let userAuthenticated = false; // ব্যবহারকারীর অথেনটিকেশন চেক করুন
    if (!userAuthenticated) {
      console.log('Access Denied');
      return false;  // রাউট অ্যাকটিভেট হবে না
    }
    return true; // রাউট অ্যাকটিভেট হবে
  }
}

২. activate() (Activation Hook)

activate() মেথডটি canActivate() এর সফল প্রস্থান পরবর্তী সময়ে কল হয়। এটি ব্যবহারকারীর জন্য ডেটা লোড, অথবা কোনও নির্দিষ্ট কার্যক্রম শুরু করার জন্য ব্যবহৃত হয়।

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট অ্যাকটিভ হয় এবং রাউট মডিউল লোড হয়।
• কিভাবে ব্যবহৃত হয়: রাউট অ্যাকটিভেট করার পর ডেটা লোড করতে বা ইনিশিয়ালাইজ করতে activate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  activate(params) {
    console.log('Component Activated');
    // ডেটা লোড বা অন্য কোনো প্রস্তুতিমূলক কাজ করতে পারেন
    this.loadData(params.id);
  }

  loadData(id) {
    // ডেটা ফেচ করা
    console.log(`Fetching data for ID: ${id}`);
  }
}

৩. canDeactivate() (Deactivation Hook)

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

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট ডিএকটিভেট হয়, অর্থাৎ কম্পোনেন্টটি বা পেজটি সরানো হবে।
• কিভাবে ব্যবহৃত হয়: ডেটা বা ফর্মের অবস্থা সেভ না হলে ব্যবহারকারীকে সাবধান করার জন্য canDeactivate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  canDeactivate() {
    let formUnsaved = true; // ফর্মে সেভ না করা ডেটা চেক করুন
    if (formUnsaved) {
      return confirm('You have unsaved changes. Are you sure you want to leave?');
    }
    return true;
  }
}

৪. deactivate() (Deactivation Hook)

deactivate() মেথডটি canDeactivate() এর পর কল হয় এবং এটি রাউট থেকে সরানোর আগে কোনো ক্লিনআপ কার্যক্রম পরিচালনা করতে ব্যবহৃত হয়। এটি সাধারণত ফর্ম ডেটা ফ্রেশ করা, ইভেন্ট লিসেনার অপসারণ, অথবা টাইমার বন্ধ করার জন্য ব্যবহৃত হয়।

কিভাবে কাজ করে:

• কখন কল হয়: যখন কম্পোনেন্টটি বা পেজটি ডিএকটিভেট হয়ে যাচ্ছে, তখন কোনো ক্লিনআপ কার্যক্রম করার জন্য।
• কিভাবে ব্যবহৃত হয়: DOM থেকে সরানোর আগে রিসোর্স বা অবস্থা মুছে ফেলতে deactivate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  deactivate() {
    console.log('Cleaning up resources...');
    // কিছু ক্লিনআপ কার্যক্রম, যেমন ইভেন্ট লিসেনার বা টাইমার বন্ধ করা
  }
}

৫. Example of using Route Lifecycle Hooks

এখন, canActivate, activate, canDeactivate, এবং deactivate এর একটি বাস্তব উদাহরণ দেখা যাক:

export class UserProfile {
  // Activation Hook: Checks if the user can access the route
  canActivate() {
    let isAuthenticated = true;  // চেক করুন ব্যবহারকারী লগইন করেছে কিনা
    if (!isAuthenticated) {
      console.log('User not authenticated');
      return false;
    }
    return true;
  }

  // Activation Hook: Fetch data when the route is activated
  activate(params) {
    console.log(`Fetching profile data for user: ${params.userId}`);
    this.loadUserData(params.userId);
  }

  loadUserData(userId) {
    // ডেটা লোড করার জন্য API কল
    console.log(`Loading data for ${userId}`);
  }

  // Deactivation Hook: Confirm if the user wants to leave with unsaved changes
  canDeactivate() {
    let unsavedChanges = true;  // চেক করুন যদি ব্যবহারকারী কোনো পরিবর্তন না সেভ করে বেরিয়ে যেতে চান
    if (unsavedChanges) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }

  // Deactivation Hook: Cleanup when leaving the route
  deactivate() {
    console.log('Cleaning up resources for user profile');
  }
}

উপসংহার

Aurelia-এর Route Lifecycle Hooks (Activation এবং Deactivation) একটি গুরুত্বপূর্ণ ভূমিকা পালন করে অ্যাপ্লিকেশনের রাউটিং সিস্টেমের মধ্যে কার্যকরী ও মডুলার কার্যক্রম পরিচালনা করতে। এগুলি ডেটা লোড, রাউট গার্ড, ক্লিনআপ এবং ডেভেলপারদের জন্য অন্যান্য কার্যক্রম চালানোর জন্য ব্যবহৃত হয়। canActivate(), activate(), canDeactivate(), এবং deactivate() মেথডগুলোকে চমৎকারভাবে ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের রাউটিং ফ্লো কাস্টমাইজ করতে পারবেন।

Aurelia ফ্রেমওয়ার্কে রাউটিং একটি গুরুত্বপূর্ণ বিষয়, যা অ্যাপ্লিকেশনের বিভিন্ন ভিউ এবং কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করে। Route Parameters এবং Query Strings হল রাউটিং এর দুটি গুরুত্বপূর্ণ অংশ যা URL এর মাধ্যমে ডেটা পাস করতে সাহায্য করে। এই ফিচারগুলোর মাধ্যমে আপনি একটি অ্যাপ্লিকেশন ভিউয়ের মধ্যে ডেটা পাস করতে পারবেন এবং ব্যবহারকারীর নির্দিষ্ট পছন্দ বা অনুসন্ধান অনুযায়ী ভিউ রেন্ডার করতে পারবেন।

১. Route Parameters

Route Parameters হল URL এর অংশ যা একটি নির্দিষ্ট কম্পোনেন্ট বা ভিউকে ডাইনামিকভাবে রেন্ডার করার জন্য ব্যবহৃত হয়। আপনি Route Parameters এর মাধ্যমে একটি URL এর মধ্যে ডেটা পাস করতে পারেন, এবং সেই ডেটাকে ভিউমডেলে এক্সেস করতে পারেন।

Route Parameters ব্যবহার করা

ধরা যাক, আপনার অ্যাপ্লিকেশনে একটি বইয়ের বিস্তারিত তথ্য দেখানোর কম্পোনেন্ট আছে এবং আপনি URL এর মাধ্যমে বইয়ের আইডি পাস করতে চান।

app.js (রুট কনফিগারেশন):

import {Router, RouterConfiguration} from 'aurelia-router';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'], moduleId: './home', nav: true, title: 'Home' },
      { route: 'book/:id', moduleId: './book', nav: true, title: 'Book Details' }
    ]);
    this.router = router;
  }
}

এখানে, book/:id রাউটটি Route Parameter হিসাবে id ব্যবহার করেছে। এই id প্যারামিটারটি আমরা URL থেকে পেতে পারব।

Route Parameters এক্সেস করা

এখন, যখন ব্যবহারকারী /book/123 URL এ যান, তখন 123 হবে book/:id রাউটের প্যারামিটার। এই প্যারামিটারটি কম্পোনেন্টের ভিউমডেল থেকে এক্সেস করা যাবে।

book.js (কম্পোনেন্ট ভিউমডেল):

export class Book {
  static inject = [Router];
  
  constructor(router) {
    this.router = router;
  }

  activate(params) {
    this.bookId = params.id;  // Route parameter 'id' থেকে বইয়ের আইডি পান
  }
}

এখানে, params.id ব্যবহার করে আমরা /book/:id রাউটের প্যারামিটার id এক্সেস করছি। এই প্যারামিটারটি আপনি বইয়ের বিস্তারিত তথ্য দেখানোর জন্য ব্যবহার করতে পারেন।

২. Query Strings

Query Strings হল URL এর অংশ যা সাধারণত ? দিয়ে শুরু হয় এবং এর মাধ্যমে একাধিক কিপ-value পেয়ার পাস করা যায়। এটি সাধারণত ফিল্টার, অনুসন্ধান বা পেজিনেশন ডেটা পাস করতে ব্যবহৃত হয়।

Query Strings ব্যবহার করা

ধরা যাক, আপনি একটি পেজে বইয়ের নাম অনুসারে অনুসন্ধান করতে চান এবং সেই অনুসন্ধান তথ্য query string এর মাধ্যমে পাস করবেন।

এখানে, আপনি search নামক একটি কুয়েরি স্ট্রিং তৈরি করতে পারেন।

app.js (রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: 'search', moduleId: './search', nav: true, title: 'Search' }
    ]);
    this.router = router;
  }
}

এখন, আপনি URL এর মাধ্যমে search পৃষ্ঠায় একটি কুয়েরি স্ট্রিং পাঠাতে পারবেন, যেমন: /search?query=bookname।

Query String এক্সেস করা

এখন, search.js ফাইলের মাধ্যমে আপনি এই query কুয়েরি স্ট্রিংটি এক্সেস করতে পারেন।

search.js (কম্পোনেন্ট ভিউমডেল):

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Router)
export class Search {
  constructor(router) {
    this.router = router;
  }

  activate(params, queryString) {
    this.searchQuery = queryString.query;  // Query string 'query' থেকে মান পান
  }
}

এখানে, queryString.query ব্যবহার করে আমরা /search?query=bookname URL থেকে কুয়েরি স্ট্রিং query এক্সেস করছি।

৩. Route Parameters এবং Query Strings একসাথে ব্যবহার করা

Aurelia-তে আপনি একই রাউটে Route Parameters এবং Query Strings একসাথে ব্যবহার করতে পারেন। এটি খুবই শক্তিশালী, কারণ আপনি URL এর মাধ্যমে ডেটা পাস করতে পারেন এবং সেই ডেটা একটি কম্পোনেন্টে প্রসেস করতে পারেন।

ধরা যাক, আপনি /book/:id?genre=fiction URL ব্যবহার করছেন, যেখানে id হল রাউট প্যারামিটার এবং genre হল কুয়েরি স্ট্রিং।

Route Parameters এবং Query Strings একসাথে ব্যবহার করা

app.js (রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: 'book/:id', moduleId: './book', nav: true, title: 'Book Details' }
    ]);
    this.router = router;
  }
}

book.js (কম্পোনেন্ট ভিউমডেল):

export class Book {
  static inject = [Router];
  
  constructor(router) {
    this.router = router;
  }

  activate(params, queryString) {
    this.bookId = params.id;  // Route parameter 'id'
    this.genre = queryString.genre;  // Query string 'genre'
  }
}

এখানে, params.id এর মাধ্যমে Route Parameter এক্সেস করা হচ্ছে এবং queryString.genre এর মাধ্যমে Query String এক্সেস করা হচ্ছে।

উপসংহার

Aurelia-তে Route Parameters এবং Query Strings হ্যান্ডলিং আপনাকে ডাইনামিক এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Route Parameters ব্যবহার করে আপনি URL এর মাধ্যমে ডেটা পাস করতে পারেন, এবং Query Strings এর মাধ্যমে আরও ডেটা যেমন ফিল্টার বা অনুসন্ধান কন্ডিশন পাস করতে পারেন। এই দুটি ফিচার একসাথে ব্যবহার করে আপনি ইউজার ইন্টারফেসে ডেটা সংগ্রহ এবং প্রক্রিয়া করতে পারেন।