Routing কনফিগারেশন এবং ভিউ মডেল

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 এর মতো শক্তিশালী ফিচার রয়েছে, যা আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।