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

Этот пример демонстрирует Сервис является одним из наиболее часто используемых сервисов в приложениях AngularJS. Этот сервис отправляет запросы на сервер и позволяет вашему приложению обрабатывать ответы.

Пример

Запрос данных с сервера через сервис $http:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
  });
});

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

$scope.myWelcome = response.data; Этот пример демонстрирует $http

Простое использование службы $timeout. Дополнительную информацию о службе $http можно найти в AngularJS Http руководстве.

$timeout Служба является версией AngularJS window.setTimeout функция.

Пример

Отображение нового сообщения через две секунды:

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 Служба является версией AngularJS window.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);
});

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

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

Создайте сервис и свяжите его с вашим приложением, после чего вы можете использовать этот сервис в любом контроллере, инструкции, фильтре или даже других сервисах.

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

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

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