অ্যাঙ্গুলারজেএস রাউটিং - AngularJs Routing

ngRoute মডিউল(module) আপনার এপ্লিকেশনকে সিঙ্গেল পেজ এপ্লিকেশনে(Single Page Application) রুপান্তর করতে সাহায্য করবে।

AngularJS এ Routing বলতে কি বুঝায়?

কোনো ধরনের পেজ লোডিং ছাড়াই আপনি যদি আপনার এপ্লিকেশনের বিভিন্ন পেজে নেভিগেট করতে চান। অর্থাৎ আপনি যদি আপনার এপ্লিকেশনকে সিঙ্গেল পেজ এপ্লিকেশনে(SPA) রুপ দিতে চান তাহলে ngRoute মডিউল ব্যবহার করতে পারেন।

ngRoute মডিউল সমগ্র এপ্লিকেশনকে পুণরায় লোড করা ছাড়াই আপনার এপ্লিকেশনের বিভিন্ন পেজে আসা-যাওয়া(route) করতে পারে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.htm"
    })
    .when("/test1", {
        templateUrl : "test1.htm"
    })
    .when("/test2", {
        templateUrl : "test2.htm"
    })
    .when("/test3", {
        templateUrl : "test3.htm"
    });
});
</script>

</body> 
</html>

ফলাফল

SPA এপ্লিকেশনের জন্য আপনাকে কি কি করতে হবে?

আপনার এপ্লিকেশনকে SPA এপ্লিকেশনের জন্য প্রস্তুত করার জন্য প্রথমেই আপনাকে AngularJS Route মডিউল সংযুক্ত করতে হবেঃ

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.js"></script>

তারপরে ngRoute কে এপ্লিকেশন মডিউলের ডিপেন্ডেনসি হিসাবে যোগ করতে হবেঃ

var app = angular.module("myApp", ["ngRoute"]);

এখন আপনার এপ্লিকেশনের route মডিউলে এক্সেস রয়েছে যা $routeProvider সরবরাহ করে।

আপনার এপ্লিকেশনের বিভিন্ন রুট কনফিগার করার জন্য $routeProvider ব্যবহার করুনঃ

app.config(function($routeProvider) {
         $routeProvider
        .when("../index.html", {
            templateUrl : "main.htm"
        })
        .when("/test1", {
            templateUrl : "test1.htm"
        })
        .when("/test2", {
            templateUrl : "test2.htm"
        })
        .when("/test3", {
            templateUrl : "test3.htm"
      });
  });

কন্টেন্টসমুহ কোথায় রাখবেন?

রুট(route) কতৃক সরবরাহকৃ্ত কন্টেন্টসমূহ রাখার জন্য একটি কন্টেইনার এর প্রয়োজন হবে।

ng-view ডিরক্টিভকে কন্টেইনার হিসাবে ব্যবহার করা হয়।

ng-view ডিরেক্টিভকে এপ্লিকেশনে সংযুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে। যথাঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>

<ng-view></ng-view>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.htm"
    })
    .when("/test1", {
        templateUrl : "test1.htm"
    })
    .when("/test2", {
        templateUrl : "test2.htm"
    })
    .when("/test3", {
        templateUrl : "test3.htm"
    });
});
</script>

</body> 
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.htm"
    })
    .when("/test1", {
        templateUrl : "test1.htm"
    })
    .when("/test2", {
        templateUrl : "test2.htm"
    })
    .when("/test3", {
        templateUrl : "test3.htm"
    });
});
</script>

</body> 
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#test1">test1</a>
<a href="#test2">test2</a>
<a href="#test3">test3</a>

<div class="ng-view"></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.htm"
    })
    .when("/test1", {
        templateUrl : "test1.htm"
    })
    .when("/test2", {
        templateUrl : "test2.htm"
    })
    .when("/test3", {
        templateUrl : "test3.htm"
    });
});
</script>

</body> 
</html>

ফলাফল

এপ্লিকেশনের শুধুমাত্র একটি ng-view ডিরক্টিভ থাকতে পারে এবং ইহা রুট কতৃক সরবরাহকৃ্ত সকল ভিউ(views) এর জন্য স্থা্ন ধারক(placeholder )।

$routeProvider

ইউজার লিংকে ক্লিক করলে কোন পেজটি প্রদর্শিত হবে তা $routeProvider এর মাধ্যমে আপনি ঠিক করে দিতে পারেনঃ

এপ্লিকেশনের config মেথড ব্যবহার করে $routeProvider ডিফাইন করা হয়। এপ্লিকেশন লোড সম্পন্ন হলে config এ রেজিস্টার্ড কাজসমূহ সম্পাদিত হবে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#dhaka">ঢাকা</a>
<a href="#chandpur">চাঁদপুর</a>

<p>ঢাকা ও চাঁদপুর সম্পর্কে জানতে লিংকে ক্লিক করুন।</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.html"
    })
    .when("/dhaka", {
        templateUrl : "dhaka.html"
    })
    .when("/chandpur", {
        templateUrl : "chandpur.html"
    });
});
</script> 

</body> 
</html>

ফলাফল

Controller

$routeProvider এর মাধ্যমে সকল "view" এর জন্য আপনি controller ডিফাইন করতে পারেন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#dhaka">ঢাকা</a>
<a href="#chandpur">চাঁদপুর</a>

<p>লিংকে ক্লিক করুন।</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        templateUrl : "main.html",
    })
    .when("/dhaka", {
        templateUrl : "dhaka.html",
        controller : "dhakaCtrl"
    })
    .when("/chandpur", {
        templateUrl : "chandpur.html",
        controller : "chandpurCtrl"
    });
});
app.controller("dhakaCtrl", function ($scope) {
    $scope.msg = "I love dhaka";
});
app.controller("chandpurCtrl", function ($scope) {
    $scope.msg = "I love chandpur";
});

</script> 

</body> 
</html>

ফলাফল

এখানে "dhaka.html" এবং "chandpur.html" হচ্ছে সাধারন এইচটিএমএল ফাইল। এই ফাইল সমূহে আপনি অন্যান্য এইচটিএমএল সেকশনের মত AngularJS expression সংযুক্ত করতে পারেন।

উপরের ফাইল সমূহ দেখতে নিচের ন্যায়ঃ

dhaka.html

<h1>ঢাকা</h1>
<h3>ঢাকা বাংলাদেশের রাজধানী।</h3>
<p>{{msg}}</p>

chandpur.html

<h1>চাঁদপুর</h1>
<h3>ইলিশের বাড়ী চাঁদপুর।</h3>
<p>{{msg}}</p>

Template

পূর্ববর্তী উদাহরন সমূহে $routeProvider.when মেথডে আমরা templateUrl প্রোপার্টি ব্যবহার করেছি।

আপনি চাইলে template প্রোপার্টিও ব্যবহার করতে পারেন যা আপনাকে বাহ্যিক পেজে রেফার করা ছাড়াই সরাসরি প্রোপার্টির ভ্যালু লিখার সম্মতি দিবে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#dhaka">ঢাকা</a>
<a href="#chandpur">চাঁদপুর</a>

<p>কন্টেন্ট পরিবর্তন করতে লিংকে ক্লিক করুন।</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("../index.html", {
        template : "<h1>Main</h1><p>কন্টেন্ট পরিবর্তন করতে লিংকে ক্লিক করুন।</p>"
    })
    .when("/dhaka", {
        template : "<h1>ঢাকা</h1><p>ঢাকা বাংলাদেশের রাজধানী।</p>"
    })
    .when("/chandpur", {
        template : "<h1>চাঁদপুর</h1><p>ইলিশের বাড়ী চাঁদপুর।</p>"
    });
});
</script> 

</body> 
</html>

ফলাফল

otherwise মেথড

পূর্ববর্তী উদাহরন সমূহে আমরা $routeProvider এর when মেথডটি ব্যবহার করেছিলাম।

আপনি চাইলে otherwise মেথডটিও ব্যবহার করতে পারেন। কোনো রুটের সাথে মিল খুজে না পেলে ইহা ডিফল্ট রুট হিসাবে কাজ করে।

নিচের উদাহরনে "dhaka" অথবা "chandpur" কোনো লিংকেই ক্লিক করা না হলে otherwise এর কন্টেন্ট প্রদর্শিত হবেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#dhaka">ঢাকা</a>
<a href="#chandpur">চাঁদপুর</a>

<p>কন্টেন্ট পরিবর্তন করতে লিংকে ক্লিক করুন।</p>
<p>কোনো লিংক ক্লিক করা না হলে কি প্রদর্শিত হবে, তা নির্ধারণের জন্য "otherwise" মেথড ব্যবহার করুন।</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
   $routeProvider
    .when("/dhaka", {
       template : "<h1>ঢাকা</h1><p>ঢাকা বাংলাদেশের রাজধানী।</p>"
    })
    .when("/chandpur", {
        template : "<h1>চাঁদপুর</h1><p>ইলিশের বাড়ী চাঁদপুর।</p>"
    })
    .otherwise({
       template : "<p>সিলেক্ট করা হয়নি।</p>"
    });
});
</script>

</body> 
</html>

ফলাফল

« পূর্ববর্তী

স্যাট একাডেমী হোম »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

AngularJs টিউটোরিয়াল

অ্যাঙ্গুলারজেএস রাউটিং - AngularJs Routing

AngularJS এ Routing বলতে কি বুঝায়?

উদাহরণ

ফলাফল

SPA এপ্লিকেশনের জন্য আপনাকে কি কি করতে হবে?

কন্টেন্টসমুহ কোথায় রাখবেন?

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

$routeProvider

উদাহরণ

ফলাফল

Controller

উদাহরণ

ফলাফল

dhaka.html

chandpur.html

Template

উদাহরণ

ফলাফল

otherwise মেথড

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য