AngularJs Service (обслуживание)
В AngularJS вы можете создавать свои собственные услуги или использовать встроенные услуги.
Что такое сервис?
В AngularJS служба - это функция или объект, который можно использовать в вашем приложении AngularJS.
AngularJS имеет более 30 встроенных услуг.
Существует услуга местоположения $, которая может вернуть URL -адрес текущей страницы.
Пример
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> url текущей страницы: </p> <h3> {{myurl}} </h3> </div> <p> В этом экземпляре используется встроенная служба местоположения $, чтобы получить URL текущей страницы. </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ location) {$ scope.myurl = $ location.absurl ();}); </script> </body> </html>Результаты работы:
URL -адрес текущей страницы:
http://www.runoob.com/try/try.php?filename=try_ng_services
Этот экземпляр использует встроенную службу местоположения $, чтобы получить URL-адрес текущей страницы.
ПРИМЕЧАНИЕ. Служба местоположения $ передается в качестве параметра в контроллер. Если вы хотите его использовать, вам нужно определить его в контроллере.
Зачем использовать сервис?
$ http является наиболее часто используемой услугой в приложениях AngularJS. Служба отправляет запрос на сервер, и приложение отвечает на данные, передаваемые сервером.
AngularJS всегда будет отслеживать приложения и обрабатывать изменения событий. AngularJS использует сервис $ Location лучше, чем использование объекта Window.Location.
$ http service
$ http является наиболее часто используемой услугой в приложениях AngularJS. Служба отправляет запрос на сервер, и приложение отвечает на данные, передаваемые сервером.
Пример
Используйте службу $ http для запроса данных с сервера:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> добро пожаловать: </p> <> {{mywelcome}} <> </div> <p> $ http-сервис запрашивает информацию с сервера, а возвращаемое значение помещается в переменную «mywelcome». </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ http) {$ http.get ("womeral.htm"). Тогда (функция (ответ) {$ scope.mywelcome = recpion.data;});Результаты работы:
Приветственное сообщение:
Добро пожаловать в гости
Сервис $ HTTP запрашивает информацию с сервера, а возвращаемое значение помещается в переменную «MyWelcome».
Выше приведено очень простой экземпляр сервиса $ HTTP. Для получения дополнительных приложений $ HTTP, пожалуйста, проверьте учебник AngularJS HTTP.
$ тайм -аут
Сервис Timeout AngularJS $ соответствует функции js window.settimeout.
Пример
Информация будет отображаться за две секунды:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> Информация отображается через две секунды: </p> <h1> {{myheader}} </h1> </div> <p> $ Timeout Access выполняет указанную функцию после указанного числа миллисекундов. </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ timeout) {$ scope.myheader = "Hello World!"; $ timeout (function () {$ scope.myheader = "Как вы сегодня?"; 2000);}); </script> </body> </html>Результаты работы:
Информация будет отображаться за две секунды:
Как вы сегодня?
$ Timeout Access выполняет указанную функцию после указанного количества миллисекундов.
$ Интервальный сервис
Интервальная служба angularjs соответствует функции js window.setinterval.
Пример
Отображать информацию каждые две секунды:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> Текущее время: </p> <h1> {{theTime}} </h1> </div> <p> $ Интерестно-интервал вызывает функцию или вычисляет выражение в указанный период (в миллисекундах). </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope, $ интервал) {$ scope. thetime = new Date (). tolocaletimeString (); $ interval (function () {$ scope.teTime = new Date (). 1000);}); </script> </body> </html>Эффект бега:
Теперь время:
3:41:09
$ Интервальный доступ вызывает функцию или подсчет в указанный период (в миллисекундах)
Создать пользовательскую службу
Вы можете создать пользовательские доступ, которые ссылаются на ваш модуль:
Создайте доступ с именем Hexafy:
app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}});Чтобы использовать пользовательский доступ, вам необходимо добавить его независимо при определении фильтра:
Пример
Используйте пользовательский сервис Hexafy, чтобы преобразовать число в шестигранный:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> 255's Hexagram IS: </p> <h1> {{hex}} </h1> </div> <p> Пользовательский сервис, используемый для преобразования чисел гексаграммы: </p> <script> var app = angular.module ('myApp', []); {this.myfunc = function (x) {return x.tostring (16);Результаты работы:
Гексадецимальная система 255 - это:
фф
Пользовательский сервис для преобразования шестнадцатеричных чисел:
В фильтре используйте пользовательские службы
Когда вы создаете пользовательскую службу и подключаетесь к своему приложению, вы можете использовать его в контроллерах, директивах, фильтрах или других службах.
Используйте услуги Hexafy в фильтре MyFormat:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp Фильтры: <H1> {{255 | MyFormat}} </h1> </div> <script> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}); function (x) {return hexafy.myfunc (x);Эффект бега:
Используйте услуги в фильтрах:
фф
При получении значений в массиве объектов вы можете использовать фильтры:
Создайте сервис Hexafy:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> Используйте фильтры при получении массива [255, 251, 200] Значения: </p> <ul> <li ng-repeat = "x в counts"> {{x | MyFormat}} </li> </ul> <p> Фильтр использует службу для преобразования десятичных знаков в шестнадцатеричную. </p> </div> <script> var app = angular.module ('myApp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}}); app.filter ('myFormat', ['hexafy', function (exexafy funt hexafy.myfunc (x);Эффект бега:
Используйте фильтры при получении массива [255, 251, 200] Значения:
Фильтры используют услуги для преобразования десятичных знаков в шестнадцатеричную.
Выше приведено сборник информации о службе AngularJS. Мы продолжим добавлять его позже. Для нуждающихся друзей, пожалуйста, обратитесь к этому.