অ্যাঙ্গুলারজেএস এইচটিটিপি - AngularJs Http
দুরবর্তী(remote) সার্ভার থেকে তথ্য(data) পাঠ(read) করার জন্য AngularJS $http সার্ভিস(service) ব্যবহৃত হয়।
AngularJS $http
AngularJS $http সার্ভিস(service) তথ্যের জন্য সার্ভারে অনুরোধ(request) পাঠায় এবং প্রতিক্রিয়া(response) রিটার্ন(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>আজকের মেসেজ হলোঃ</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 সার্ভিসের .get মেথড ব্যবহার করা হয়েছে।
.get মেথড হলো $http সার্ভিসের শর্টকাট মেথড। এধরনের আরোও অনেক শর্টকাট মেথড রয়েছে
$http সার্ভিসকে কল(call) করার জন্য নিম্নে সর্টকাট মেথডসমূহ তুলে ধরা হলোঃ
.delete().get().head().jsonp().patch().post().put()
উদাহরণ
<!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({
method : "GET",
url : "welcome.html"
}).then(function mySucces(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
</body>
</html>
ফলাফল
উপরর উদাহরনে $http সার্ভিসটি অবজেক্ট হিসাবে ফাংশনের মধ্য দিয়ে অতক্রম করে। যেখানে http অবজেক্টটি method, url, request সফল হলে কি হবে এবং ব্যর্থ হলে কি হবে তা ঠিক করে দেয়।
প্রোপার্টিসমূহ
নিম্নোক্ত প্রোপার্টিসহ সার্ভার থেকে response হলো একটি অবজেক্টঃ
.config- রিকুয়েস্ট উৎপাদনে ব্যবহৃত অবজেক্ট।.data- সার্ভার থেকে প্রতিক্রিয়া(response ) বহনকারী অবজেক্ট অথবা স্ট্রিং।.headers- হেডারের তথ্য পাওয়ার জন্য ব্যবহৃত ফাংশন।.status- HTTP স্ট্যাটাস নির্ধারনের জন্য সংখ্যা।.statusText- HTTP স্ট্যাটাস নির্ধারনের জন্য স্ট্রিং।
উদাহরণ
<!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>Data : {{content}}</p>
<p>Status : {{statuscode}}</p>
<p>StatusText : {{statustext}}</p>
</div>
<p>রেসপন্স অবজেক্টের অনেক প্রোপার্টি রয়েছে। এই উদাহরণে data, status, এবং statusText প্রোপার্টি দেখানো হয়েছে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.html")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
</script>
</body>
</html>
ফলাফল
error নিয়ন্ত্রনের জন্য .then মেথডে আরোও একটি ফাংশন যোগ করুনঃ
উদাহরণ
<!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">
<h3>{{content}}</h3>
</div>
<p>success এবং failure এর উপর ভিত্তি করে $http সার্ভিস ভিন্ন ভিন্ন ফাংশন এক্সিকিউট করে।</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("wrongfilename.html")
.then(function(response) {
$scope.content = response.data;
}, function(response) {
$scope.content = "Something went wrong";
});
});
</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="customersCtrl">
<ul>
<li ng-repeat="a in myData">
{{ a.Name + ', ' + a.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.html").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</body>
</html>
ফলাফল
এপ্লিকেশনের ব্যাখ্যাঃ
এপ্লিকেশনটি $scope এবং
$http অবজেক্টসহ customersCtrl কন্ট্রোলার ডিফাইন করেছে।
এক্সটার্নাল ডাটাতে অনুরোধ পাঠানোর জন্য $http হলো XMLHttpRequest object।
$http.get()মেথডটি http://www.sattacademy.com/angularJs/customers.html ফাইল থেকে JSON ডাটা পাঠ করে।
সার্ভারে পাঠানো রিকুয়েস্ট সফল হলে কন্ট্রোলার(controller) সার্ভারের JSON ডাটার জন্য স্কোপে myData নামের একটি প্রোপার্টি তৈরি করে।