Aurelia এর Router এবং Navigation

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 রাউটারের শক্তিশালী এবং বহুমুখী ব্যবহারের জন্য সহায়ক।