AngularJS রুটিং
- পূর্ববর্তী পৃষ্ঠা AngularJS অ্যানিমেশন
- পরবর্তী পৃষ্ঠা AngularJS অ্যাপ্লিকেশন
ngRoute মডিউল আপনার অ্যাপলিকেশনকে সিঙ্গল পেজ অ্যাপলিকেশন হিসাবে পরিণত করে।
অ্যাংগুলারজেসের রুটিং কী হয়?
যদি আপনি অ্যাপলিকেশনের ভিন্ন পৃষ্ঠাতে নেভিগেট করতে চান, কিন্তু অ্যাপলিকেশনকে SPA (সিঙ্গল পেজ অ্যাপলিকেশন) হিসাবে রাখতে চান এবং পৃষ্ঠা পুনরায় লোড না করতে চান, তবে আপনি ব্যবহার করতে পারেন: ngRoute মডিউল。
ngRoute মডিউল আপনার অ্যাপলিকেশনকে ভিন্ন পৃষ্ঠাতে রুটিং করে, বলেই সমগ্র অ্যাপলিকেশন পুনরায় লোড করতে হয় না。
উদাহরণ
নেভিগেট করুন "red.htm"、"green.htm" এবং "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">হোমপেজ</a></p>
<a href="#!red">রেড</a>
<a href="#!green">গ্রীন</a>
<a href="#!blue">ব্লু</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
আমার কী প্রয়োজন?
অ্যাপলিকেশনকে রুট প্রস্তুত করার জন্য, আপনি AngularJS Route মডিউলটি সম্পৃক্ত করতে হবে:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
তারপর ngRoute অ্যাপলিকেশন মডিউলের জন্য নির্ভর করে যোগ করুন:
var app = angular.module("myApp", ["ngRoute"]);
এখন আপনার অ্যাপলিকেশন সরবরাহ করা হওয়ার পথকে পরিদর্শন করতে পারবে $routeProvider রুট মডিউল
অনুগ্রহ করে $routeProvider অ্যাপলিকেশনের মধ্যে বিভিন্ন রুট কনফিগার করুন:
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
কীখানে গেলো?
আপনার অ্যাপলিকেশনকে রুট দ্বারা সরবরাহ করা কনটেন্ট রাখার জন্য একটি কনটেনার দরকার
এই কনটেনার ng-view ইনস্ট্রাকশন (Directive) সম্পৃক্ত করা সম্ভব
অ্যাপলিকেশনের মধ্যে ng-view ইনস্ট্রাকশন (Directive)：
উদাহরণ
<div ng-view></div>
উদাহরণ
<ng-view></ng-view>
উদাহরণ
<div class="ng-view"></div>
অ্যাপলিকেশনটি শুধুমাত্র একটি ng-view ইনস্ট্রাকশন (Directive)，যেটি হবে এই রুট দ্বারা সরবরাহ করা সব দৃশ্যের প্রতিস্থাপক
$routeProvider
ব্যবহার করুন: $routeProvider، আপনি লিঙ্ক ক্লিক করার সময় দেখানো হবে পৃষ্ঠা নির্দিষ্ট করতে পারেন。
উদাহরণ
নির্দিষ্ট $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
অ্যাপলিকেশনের config পদ্ধতি নির্দিষ্ট $routeProvider। অ্যাপলিকেশন লোড হওয়ার সময়ে config পদ্ধতিতে নথিভূক্ত করা কাজ
কন্ট্রোলার
ব্যবহার করুন: $routeProviderএছাড়াও, আপনি প্রত্যেক "দৃশ্য"-কে একটি কন্ট্রোলার নির্দিষ্ট করতে পারেন。
উদাহরণ
কন্ট্রোলার যোগ করুন:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" এবং "paris.htm" সাধারণ HTML ফাইল, যেখানে আপনি AngularJS এক্সপ্রেশন যোগ করতে পারেন, যেমন AngularJS অ্যাপলিকেশনের অন্যান্য HTML অংশে।
এই ফাইলগুলি এই মতো দেখা যায়:
london.htm
<h1>লন্ডন</h1>
<h3>লন্ডন ইংল্যান্ডের রাজধানী।</h3>
<p>এটি যুক্তরাজ্যের সর্ববৃহৎ শহর, ১৩ মিলিয়নেরও বেশি অধিবাসী আছে, শহরী এলাকার হিসাবে।</p>
<p>{{msg}}</p>
paris.htm
<h1>প্যারিস</h1>
<h3>প্যারিস ফ্রান্সের রাজধানী।</h3>
<p>প্যারিস যুরোপের একটি বড় জনসংখ্যার কেন্দ্র, ১২ মিলিয়নেরও বেশি অধিবাসী আছে।</p>
<p>{{msg}}</p>
টেম্পলেট
আগের উদাহরণে, আমরা $routeProvider.when মথুরা ব্যবহার করেছে templateUrl প্রতিশব্দ
আপনি আরও template একটি প্রতিশব্দ, যা আপনাকে প্রতিশব্দের মাঝেই HTML লিখতে দেয়, না কি পৃষ্ঠার উল্লেখ করতে।
উদাহরণ
টেম্পলেট লিখুন:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
otherwise মথুরা ব্যবহার করেছি
আগের উদাহরণে, আমরা $routeProvider রুটের when মথুরা ব্যবহার করতে পারেন。
আপনি আরও otherwise সব অন্যান্য রুটগুলির সাথে ম্যাচ না হলে, এটি ডিফল্ট রুট হবে。
উদাহরণ
যদি না কোনোটা "Banana" লিঙ্ক কিংবা "Tomato" লিঙ্ককেই ক্লিক করা হয়নি, তবে তাদের বলুন:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
- পূর্ববর্তী পৃষ্ঠা AngularJS অ্যানিমেশন
- পরবর্তী পৃষ্ঠা AngularJS অ্যাপ্লিকেশন
