AngularJS servislari
AngularJS’da o‘z servisingizni yaratishingiz yoki ko‘plab o‘rnatilgan servislardan biridan foydalanishingiz mumkin.
Servis nima?
AngularJS’da servis — bu AngularJS ilovangiz uchun mavjud bo‘lgan va faqat u bilan cheklangan funksiya yoki obyekt.
AngularJS’da 30 ga yaqin o‘rnatilgan servis mavjud.
Ulardan biri — $location servisi.
$location servisida joriy veb-sahifaning manzili (location) haqida ma’lumot qaytaradigan metodlar mavjud:
Misol
Kontrollerda $location servisidan foydalaning:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
O‘zingiz sinab ko‘ring »
E’tibor bering, $location servisi kontrollerga argument sifatida uzatiladi.
Servisdan kontrollerda foydalanish uchun u bog‘liqlik (dependency) sifatida belgilanishi kerak.
Nega servislardan foydalanish kerak?
$location servisi kabi ko‘pgina servislar o‘rniga DOM’da allaqachon mavjud bo‘lgan obyektlardan, masalan, window.location obyektidan foydalansa bo‘ladigandek tuyuladi va haqiqatan ham foydalanish mumkin, ammo bu, hech bo‘lmaganda AngularJS ilovangiz uchun, ba’zi cheklovlarga olib keladi.
AngularJS ilovangizni doimiy ravishda kuzatib boradi va o‘zgarishlar hamda hodisalarni to‘g‘ri qayta ishlashi uchun AngularJS window.location obyekti o‘rniga $location servisidan foydalanishingizni afzal ko‘radi.
$http servisi
$http servisi AngularJS ilovalarida eng ko‘p ishlatiladigan servislardan biri.
Bu servis serverga so‘rov yuboradi va ilovangizga javobni qayta ishlash imkonini beradi.
Misol
Serverdan ma’lumot so‘rash uchun $http servisidan foydalaning:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
O‘zingiz sinab ko‘ring »
Ushbu misol $http servisidan juda oddiy foydalanishni ko‘rsatadi.
$http servisi haqida AngularJS Http darsligida batafsilroq bilib oling.
$timeout servisi
$timeout servisi —
window.setTimeout funksiyasining AngularJS’dagi versiyasi.
Misol
Ikki soniyadan keyin yangi xabarni ko‘rsating:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
O‘zingiz sinab ko‘ring »
$interval servisi
$interval servisi —
window.setInterval funksiyasining AngularJS’dagi versiyasi.
Misol
Vaqtni har soniyada ko‘rsating:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
O‘zingiz sinab ko‘ring »
O‘z servisingizni yarating
O‘z servisingizni yaratish uchun servisingizni modulga ulang:
hexafy nomli servis yarating:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
O‘zingiz yaratgan servisdan foydalanish uchun kontrollerni belgilashda uni bog‘liqlik (dependency) sifatida qo‘shing:
Misol
Sonni o‘n oltilik songa aylantirish uchun hexafy nomli maxsus servisdan foydalaning:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
O‘zingiz sinab ko‘ring »
Filtr ichida maxsus servisdan foydalanish
Servisni yaratib, uni ilovangizga ulaganingizdan so‘ng, undan istalgan kontroller, direktiva, filtr va hatto boshqa servislar ichida foydalanishingiz mumkin.
Servisdan filtr ichida foydalanish uchun filtrni belgilashda uni bog‘liqlik sifatida qo‘shing:
myFormat filtrida ishlatilgan hexafy servisi:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
O‘zingiz sinab ko‘ring »
Filtrdan obyekt yoki massivdagi qiymatlarni ko‘rsatishda foydalanishingiz mumkin:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!