AngularJS Http
$http — masofaviy serverlardan ma’lumot o‘qish uchun AngularJS servisi.
AngularJS $http
AngularJS’ning $http servisi serverga so‘rov yuboradi va javob qaytaradi.
Misol
Serverga oddiy so‘rov yuboring va natijani sarlavhada ko‘rsating:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
O‘zingiz sinab ko‘ring »
Metodlar
Yuqoridagi misolda $http servisining .get metodi ishlatilgan.
.get metodi $http servisining qisqartma (shortcut) metodi hisoblanadi.
Bir nechta qisqartma metodlar mavjud:
.delete().get().head().jsonp().patch().post().put()
Yuqoridagi metodlarning barchasi $http servisini chaqirishning qisqartmalaridir:
Misol
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
O‘zingiz sinab ko‘ring »
Yuqoridagi misol $http servisini argument sifatida obyekt berib bajaradi.
Obyekt HTTP metodini, url’ni, muvaffaqiyatli bo‘lganda nima qilishni va xatolik yuz berganda nima qilishni belgilaydi.
Xususiyatlar
Serverdan kelgan javob quyidagi xususiyatlarga ega obyekt hisoblanadi:
.configso‘rovni yaratishda ishlatilgan obyekt..dataserverdan kelgan javobni o‘zida saqlovchi string yoki obyekt..headerssarlavha (header) ma’lumotlarini olish uchun ishlatiladigan funksiya..statusHTTP holatini bildiruvchi son..statusTextHTTP holatini bildiruvchi string.
Misol
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
O‘zingiz sinab ko‘ring »
Xatolarni qayta ishlash uchun .then metodiga yana bitta funksiya qo‘shing:
Misol
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("wrongfilename.htm")
.then(function(response) {
// First function handles success
$scope.content = response.data;
}, function(response) {
// Second function handles error
$scope.content = "Something went wrong";
});
});
O‘zingiz sinab ko‘ring »
JSON
Javobdan olinadigan ma’lumotlar JSON formatida bo‘lishi kutiladi.
JSON — ma’lumotlarni uzatishning ajoyib usuli, uni AngularJS yoki boshqa har qanday JavaScript ichida ishlatish oson.
Misol: serverda 15 ta mijozni o‘z ichiga olgan, records nomli massivga o‘ralgan JSON obyektini qaytaradigan fayl bor.
JSON obyektini ko‘rish uchun shu yerni bosing.
Misol
ng-repeat direktivasi massiv elementlarini aylanib chiqish uchun juda mos:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>
O‘zingiz sinab ko‘ring »
Ilova izohi:
Ilova $scope va $http obyektlariga ega customersCtrl kontrollerini belgilaydi.
$http — tashqi ma’lumotlarni so‘rash uchun XMLHttpRequest obyekti.
$http.get() https://www.w3schools.com/angularjs/customers.php manzilidan JSON ma’lumotlarini o‘qiydi.
Muvaffaqiyatli bo‘lganda kontroller scope’da serverdan kelgan JSON ma’lumotlari bilan myData xususiyatini yaratadi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!