এঙ্গুলারজেএস সার্ভিস - Angular Services
এই অধ্যায়ে আপনি AngularJS সার্ভিস(service) সম্মন্ধে জানবেন। আপনি পূর্বনির্ধারিত সার্ভিসের ব্যবহার শিখবেন এবং চাইলে নিজের মত করে সার্ভিস তৈরি করতেও পারবেন।
সার্ভিস কি?
AngularJS এ সার্ভিস হলো ফাংশন অথবা অবজেক্ট যা আপনার এপ্লিকেশনে ব্যবহারযোগ্য অথবা ব্যবহারের জন্য কিছু সীমাবদ্ধতা রয়েছে।
AngularJS এর প্রায় ৩০টি নিজস্ব সার্ভিস রয়েছে। যাদের মধ্যে একটি হলো $location সার্ভিস(service)
$location সার্ভিসের মেথড(method) আছে যা চলমান ওয়েব পেজের লোকেশনের তথ্য রিটার্ন(return) করেঃ
উদাহরণ
<!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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>এই পেজের url হলোঃ</p>
<h3>{{myUrl}}</h3>
</div>
<p>এই উদাহরণে পেজের সঠিক url পাওয়ার জন্য বিল্ট-ইন $location সার্ভিস ব্যবহার করা হয়েছে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
ফলাফল
উপরের উদাহরণে লক্ষ্য করলে দেখবেন $location সার্ভিসকে(service) controller এর মধ্য দিয়ে আর্গুমেন্ট হিসাবে অতিক্রম করানো হয়েছে। সার্ভিসটি কন্ট্রোলারে ব্যবহার করার জন্য ইহাকে অবশ্যই ডিপেন্ডেন্সি(dependency) হিসাবে ডিফাইন্ড(defined) করতে হবে।
সার্ভিস কেন ব্যবহার করবেন?
$location সার্ভিসের মতই অনেক সার্ভিসের জন্য DOM এর মধ্যে ইতোমধ্যে বিদ্যমান অবজেক্ট যেমন- window.location অবজেক্ট ব্যবহার করতে পারেন। কিন্তু AngularJS এপ্লিকেশনের জন্য এই অবজেক্ট সমূহ ব্যবহারে কিছু সীমাবদ্ধতা রয়েছে।
AngularJS সার্বক্ষনিক আপনার এপ্লিকেশনকে তত্ত্বাবধান করে যার জন্য আপনার এপ্লিকেশনের পরিবর্তন এবং ইভেন্টসমূহকে সঠিকভাবে পরিচালনার জন্য AngularJS window.location এর তুলনায় $location অবজেক্টকে বেশী পছন্দ করে।
$http সার্ভিস
AngularJS এপ্লিকেশনে সবচেয়ে বেশী ব্যবহৃত সার্ভিস হলো $http সার্ভিস। এই সার্ভিসটি সার্ভারে অনুরোধ(request) পাঠায় এবং আপনার এপ্লিকেশনকে প্রতিক্রিয়া(response) পরিচালনা করতে দেয়।
উদাহরণ
<!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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>আজকের মেসেজ হলোঃ</p>
<h3>{{myWelcome}}</h3>
</div>
<p>The $http সার্ভিস একটি পেজের জন্য সার্ভারে রিকুয়েস্ট পাঠায় এবং রেসপন্স ডাটাকে "myWelcome" ভ্যারিয়েবলের ভ্যালু হিসেবে সেট করা হয়েছে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.html").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
ফলাফল
উপরের উদাহরণে $http সার্ভিসের সাধারণ ব্যবহার দেখানো হয়েছে। $http সার্ভিস সম্মন্ধে আরোও জানতে AngularJS Http টিউটোরিয়াল অধ্যায় ভিজিট করুন।
$timeout সার্ভিস
$timeout সার্ভিস
window.setTimeout ফাংশনের AngularJS এর ভার্সন।
উদাহরণ
<!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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>দুই সেকেন্ড পর এই হেডারটি পরিবর্তিত হবে।</p>
<h3>{{testHeader}}</h3>
</div>
<p>নির্দিষ্ট মিলিসেকেন্ড পর $timeout সার্ভিস একটি ফাংশন রান করে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.testHeader = "Hello World!";
$timeout(function () {
$scope.testHeader = "Welcome To Satt Academy!";
}, 2000);
});
</script>
</body>
</html>
ফলাফল
$interval সার্ভিস
$interval সার্ভিস
window.setInterval ফাংশনের AngularJS এর ভার্সন।
উদাহরণ
<!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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>এখন সময়ঃ</p>
<h3>{{theTime}}</h3>
</div>
<p>প্রতি নির্দিষ্ট মিলিসেকেন্ড পর $interval সার্ভিস একটি ফাংশন রান করে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>
ফলাফল
নিজের মত করে সার্ভিস তৈরি করুন
আপনার নিজস্ব সার্ভিস তৈরি করতে আপনার সার্ভিসকে module এর সাথে সংযোগ করুনঃ
hexafy নামের একটি সার্ভিস তৈরি করুন
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
আপনার নিজের তৈরি সার্ভিস ব্যবহারযোগ্য করে তোলার জন্য ইহাকে ডিপেন্ডেনসি হিসাবে আপনার এপ্লিকেশনে সংযোজন করুনঃ
সংখ্যাকে হেক্সাডেসিমাল সংখ্যায় রূপান্তরের জন্য কাস্টম(custom) সার্ভিস hexafy ব্যবহার করুনঃ
উদাহরণ
<!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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 এর হেক্সাডেসিমেল ভ্যালু হলোঃ</p>
<h3>{{hex}}</h3>
</div>
<p>মেথোডসহ একটি কাস্টম সার্ভিস একটি সংখ্যাকে হেক্সাডেসিমেল সংখ্যায় কনভার্ট করে।</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html>
ফলাফল
ফিল্টারের মধ্যে কাস্টম সার্ভিসের ব্যবহার
আপনি একবার সার্ভিস তৈরি করে আপনার এপ্লিকেশনের সাথে সংযোগ করলে উক্ত সার্ভিসকে কন্ট্রোলার, ডিরেক্টিভ, ফিল্টার এমনকি অন্যান্য সার্ভিসের মধ্যেও ব্যবহার করতে পারবেন।
ফিল্টারের মধ্যে সার্ভিসকে ব্যবহার করার জন্য ফিল্টার ডিফাইন্ড(defined) করার সময় ইহাকে ডিপেন্ডেনসি(dependency) হিসাবে যোগ করুনঃ
উদাহরণ
<!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>
<div ng-app="myApp">
<h3>{{255 | myFormat}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</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>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="a in counts">{{a | myFormat}}</li>
</ul>
<p>এই ফিল্টার একটি সার্ভিস ব্যবহার করে যা সংখ্যাকে হেক্সাডেসিমেল ভ্যালুতে রুপান্তরিত করে।</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (a) {
return a.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(a) {
return hexafy.myFunc(a);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
</body>
</html>
ফলাফল