Службы AngularJS
В AngularJS вы можете создать свой собственный сервис или использовать один из множества встроенных сервисов.
Что такое услуга?
В AngularJS служба — это функция или объект, доступный для вашего приложения AngularJS и ограниченный им.
AngularJS имеет около 30 встроенных сервисов. Одним из них является $location
сервис.
У $locationсервиса есть методы, которые возвращают информацию о местоположении текущей веб-страницы:
Пример
Используйте $locationсервис в контроллере:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Обратите внимание, что $locationслужба передается контроллеру в качестве аргумента. Чтобы использовать службу в контроллере, она должна быть определена как зависимость.
Зачем использовать Услуги?
Для многих сервисов, таких как $locationсервис, кажется, что вы могли бы использовать объекты, которые уже находятся в DOM, такие как window.location
объект, и вы могли бы, но это будет иметь некоторые ограничения, по крайней мере, для вашего приложения AngularJS.
AngularJS постоянно контролирует ваше приложение, и для правильной обработки изменений и событий AngularJS предпочитает, чтобы вы использовали $location
службу, а не window.locationобъект.
Служба $http
Сервис $httpявляется одним из наиболее часто используемых сервисов в приложениях AngularJS. Служба отправляет запрос на сервер и позволяет вашему приложению обрабатывать ответ.
Пример
Воспользуйтесь $httpсервисом для запроса данных с сервера:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Этот пример демонстрирует очень простое использование $httpсервиса. Узнайте больше о $httpсервисе в Учебнике по AngularJS Http .
Служба $timeout
Сервис $timeoutявляется версией
window.setTimeoutфункции AngularJS.
Пример
Показать новое сообщение через две секунды:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Сервис $interval
Сервис $intervalявляется версией
window.setIntervalфункции AngularJS.
Пример
Отображение времени каждую секунду:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Создайте свой собственный сервис
Чтобы создать свой сервис, подключите свой сервис к модулю:
Создайте службу с именем hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Чтобы использовать созданный вами сервис, добавьте его в качестве зависимости при определении контроллера:
Пример
Используйте специально созданный сервис named hexafyдля преобразования числа в шестнадцатеричное число:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Используйте пользовательский сервис внутри фильтра
После того, как вы создали службу и подключили ее к своему приложению, вы можете использовать ее в любом контроллере, директиве, фильтре или даже внутри других служб.
Чтобы использовать службу внутри фильтра, добавьте ее в качестве зависимости при определении фильтра:
Сервис, hexafyиспользуемый в фильтре myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Вы можете использовать фильтр при отображении значений из объекта или массива:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>