AngularJS (যদিও এটি পুরানো সংস্করণ, তবে অনেক অ্যাপ্লিকেশনে এখনো ব্যবহৃত হয়) এবং Angular 2+ উভয়ই Routing এবং UI Routing ব্যবস্থা প্রদান করে, যার মাধ্যমে একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) তৈরি করা যায়। MeanJS স্ট্যাকের মধ্যে AngularJS ব্যবহার করার মাধ্যমে বিভিন্ন পৃষ্ঠা বা ভিউয়ের মধ্যে নেভিগেশন পরিচালনা করা যায়।
এখানে, আমরা Angular Routing এবং UI Routes কনফিগারেশন সম্পর্কে বিস্তারিত আলোচনা করব, যা MeanJS অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যায়।
Angular Routing: এক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) তৈরি করা
AngularJS Routing এ, আপনি একটি পৃষ্ঠা থেকে অন্য পৃষ্ঠায় নেভিগেট করতে পারেন ngRoute মডিউল ব্যবহার করে। এটি Single Page Application (SPA) তৈরি করার জন্য উপযুক্ত, যেখানে পৃষ্ঠা পরিবর্তন হলে পুরো পৃষ্ঠাটি রিফ্রেশ হয় না, শুধুমাত্র কনটেন্ট পরিবর্তন হয়।
1. AngularJS Routing কনফিগারেশন
AngularJS এ রাউটিং কনফিগার করতে, প্রথমে ngRoute মডিউল ইনস্টল করতে হবে এবং তারপরে $routeProvider ব্যবহার করে রাউট কনফিগার করা হয়।
1.1. ngRoute ইনস্টলেশন
npm install angular-route --save
1.2. AngularJS Routing কনফিগারেশন
// public/js/app.js
var app = angular.module('meanApp', ['ngRoute']);
// Routing কনফিগারেশন
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
});
এখানে, $routeProvider ব্যবহার করে আমরা দুটি রাউট কনফিগার করেছি:
- /home: হোম পৃষ্ঠার জন্য
- /about: অ্যাবাউট পৃষ্ঠার জন্য
যদি ইউজার /home বা /about রুটে প্রবেশ করে, তবে নির্দিষ্ট templateUrl (HTML ফাইল) এবং controller লোড হবে। otherwise() মেথডটি একটি ডিফল্ট রাউট সেট করে, যা ইউজার যদি ভুল রুটে প্রবেশ করে তবে সেটি /home রুটে রিডাইরেক্ট করবে।
1.3. AngularJS Controller
// public/js/controllers/home.controller.js
app.controller('HomeController', function($scope) {
$scope.message = 'Welcome to the Home Page!';
});
// public/js/controllers/about.controller.js
app.controller('AboutController', function($scope) {
$scope.message = 'Learn more about us on this page!';
});
এখানে দুটি কন্ট্রোলার তৈরি করা হয়েছে:
- HomeController: হোম পেজের জন্য
- AboutController: অ্যাবাউট পেজের জন্য
1.4. HTML ফাইলের কনফিগারেশন
<!-- public/index.html -->
<!DOCTYPE html>
<html ng-app="meanApp">
<head>
<title>MeanJS Routing Example</title>
</head>
<body>
<div>
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div ng-view></div> <!-- এখানে রাউটের কন্টেন্ট লোড হবে -->
</body>
</html>
এখানে, ng-view ডিরেকটিভ ব্যবহার করা হয়েছে, যেখানে রাউটের কন্টেন্ট লোড হবে। যখন ইউজার /home বা /about রাউটে নেভিগেট করবে, তখন সেখানে নির্দিষ্ট টেমপ্লেট লোড হবে।
UI-Router: UI Routes কনফিগারেশন
UI-Router হল AngularJS এর জন্য একটি উন্নত রাউটিং লাইব্রেরি, যা ক্লায়েন্ট সাইড রাউটিং-এর আরও ফ্লেক্সিবিলিটি এবং শক্তিশালী কনফিগারেশন প্রদান করে। এর মাধ্যমে, আপনি নেস্টেড রাউট, প্যারামিটার ভিত্তিক রাউট, এবং অবস্থা ভিত্তিক রাউটিং (State-based Routing) ব্যবহার করতে পারেন।
2.1. UI-Router ইনস্টলেশন
npm install angular-ui-router --save
2.2. UI-Router কনফিগারেশন
// public/js/app.js
var app = angular.module('meanApp', ['ui.router']);
// UI-Router কনফিগারেশন
app.config(function($stateProvider, $urlRouterProvider) {
// ডিফল্ট রাউট
$urlRouterProvider.otherwise('/home');
// রাউট কনফিগারেশন
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutController'
});
});
এখানে, $stateProvider ব্যবহার করে home এবং about রাউট কনফিগার করা হয়েছে। UI-Router এর মাধ্যমে, আমরা রাউটের URL এবং তার সাথে সম্পর্কিত templateUrl ও controller নির্ধারণ করেছি।
2.3. AngularJS Controller
// public/js/controllers/home.controller.js
app.controller('HomeController', function($scope) {
$scope.message = 'Welcome to the Home Page!';
});
// public/js/controllers/about.controller.js
app.controller('AboutController', function($scope) {
$scope.message = 'Learn more about us on this page!';
});
2.4. HTML ফাইলের কনফিগারেশন
<!-- public/index.html -->
<!DOCTYPE html>
<html ng-app="meanApp">
<head>
<title>MeanJS UI-Router Example</title>
</head>
<body>
<div>
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
</div>
<div ui-view></div> <!-- এখানে রাউটের কন্টেন্ট লোড হবে -->
</body>
</html>
এখানে, ui-view ডিরেকটিভ ব্যবহার করা হয়েছে যেখানে UI-Router এর মাধ্যমে রাউটের কন্টেন্ট লোড হবে। এবং ui-sref ব্যবহার করে লিঙ্ক তৈরি করা হয়েছে যা নির্দিষ্ট রাউটের সাথে সংযুক্ত।
3. Angular Routing এবং UI-Routes ব্যবহারের পার্থক্য
| বৈশিষ্ট্য | AngularJS Routing | UI-Router |
|---|---|---|
| Routing Type | URL ভিত্তিক রাউটিং | State ভিত্তিক রাউটিং |
| Routing Structure | একক পৃষ্ঠা বা পাথ ভিত্তিক | নেস্টেড রাউটিং এবং অবস্থা ভিত্তিক |
| Flexibility | সীমিত, সাধারণ রাউটিং জন্য ব্যবহারযোগ্য | উচ্চ ফ্লেক্সিবিলিটি, নেস্টেড রাউট |
| State Management | সোজা এবং সরল | শক্তিশালী স্টেট ম্যানেজমেন্ট |
| Nested Views | সম্ভব নয় | সহজেই নেস্টেড ভিউ লোড করা যায় |
| UI-States | নেই | UI-states ব্যবহার করা যায় |
সারাংশ
AngularJS Routing এবং UI-Router উভয়েরই নিজেদের মধ্যে পার্থক্য রয়েছে, তবে UI-Router বেশি ফ্লেক্সিবল এবং শক্তিশালী স্টেট-ভিত্তিক রাউটিং সিস্টেম প্রদান করে। MeanJS অ্যাপ্লিকেশনে, আপনি ngRoute বা UI-Router ব্যবহার করতে পারেন, তবে যদি আপনি উচ্চতর ফ্লেক্সিবিলিটি, নেস্টেড রাউটিং এবং শক্তিশালী স্টেট ম্যানেজমেন্ট চান, তবে UI-Router ব্যবহার করা উচিত।
এছাড়া, MeanJS স্ট্যাকের মধ্যে AngularJS এবং UI-Router এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরির সময় রাউটিং কনফিগারেশন করার প্রক্রিয়া সহজ এবং কার্যকর।
Read more
