Сервисы AngularJS (Service)

В AngularJS вы можете создавать собственные сервисы или использовать встроенные сервисы.

Что такое сервис?

В AngularJS сервис — это функция или объект, которые можно использовать в вашем приложении AngularJS.

В AngularJS более 30 встроенных сервисов.

Существует$locationсервис, который может возвращать URL-адрес текущей страницы.

Пример

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

Попробуйте »

Примечание$locationСервис передается в контроллер в качестве параметра. Чтобы использовать его, необходимо определить его в контроллере.

Зачем использовать сервисы?

Среди многих сервисов, таких как сервис $location, можно использовать объекты, существующие в DOM, подобно объекту window.location, но объект window.location имеет определенные ограничения в приложениях AngularJS.

AngularJS постоянно отслеживает приложение и обрабатывает изменения событий. AngularJS использует$locationсервисы вместо использованияwindow.locationобъектов, что лучше.

$location против window.location

  window.location $location.service
Назначение Позволяет выполнять операции чтения и записи с текущим местоположением браузера Позволяет выполнять операции чтения и записи с текущим местоположением браузера
API Предоставляет объект, который можно читать и записывать Предоставляет reader/writer в стиле jQuery
Интегрирован ли с жизненным циклом приложения AngularJS нет Может получать доступ к каждой стадии жизненного цикла приложения и интегрирован с $watch
Бесшовно ли интегрирован с HTML5 API нет Да (с плавной деградацией для старых браузеров)
Связан ли с контекстом приложения Нет, window.location.path возвращает "/docroot/actual/path" Да, $location.path() возвращает "/actual/path"

Сервис $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

AngularJS $timeoutСервис соответствует JS window.setTimeoutфункция.

Пример

Отобразить информацию через две секунды:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Привет мир!";
    $timeout(function () {
        $scope.myHeader = "Как дела сегодня?";
    }, 2000);
});

Попробуйте »

Сервис $interval

AngularJS $intervalСервис соответствует JSwindow.setIntervalфункции.

Пример

Отображение информации каждую секунду:

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);
    }
});

Чтобы использовать пользовательский сервис, нужно добавить его отдельно при определении контроллера и задать зависимость:

Пример

Используйте пользовательский сервисhexafyПреобразуйте число в шестнадцатеричное число:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

Попробуйте »

Использование пользовательского сервиса в фильтре

После создания пользовательского сервиса и подключения его к приложению вы можете использовать его в контроллерах, директивах, фильтрах или других сервисах.

В фильтреmyFormatиспользуйте сервисhexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

Попробуйте сами »

При получении значений в массиве объектов можно использовать фильтры:

Создайте сервисhexafy:

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

Попробуйте сами »
Другие расширения