AngularJS. Сервис http в AngularJS


Содержание материала:

AngularJS Сервисы

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

Что такое служба?

В AngularJS, услуга является функцией, или объект, который доступен для, и ограничено, приложение AngularJS.

AngularJS имеет около 30 встроенных служб. Одним из них является $location службы.

$location сервиса есть методы , которые возвращают информацию о местоположении текущей веб — страницы:

пример

Используйте $location службы в контроллере:

Обратите внимание , что $location службы передается к контроллеру в качестве аргумента. Для того чтобы воспользоваться услугой в контроллере, он должен быть определен как зависимость.

Зачем использовать услуги?

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

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

$ HTTP Service

$http услуг является одним из наиболее распространенных используемых услуг в AngularJS приложениях. Услуга делает запрос на сервер, и позволяет ваше приложение обрабатывает ответ.

пример

Используйте $http сервис для запроса данных с сервера:

Этот пример демонстрирует очень простое использование $http службы. Узнайте больше о $http службе в AngularJS Http Учебное пособие .

$ Тайм-аут Обслуживание

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

пример

Дисплей нового сообщения через две секунды:

Служба $ Интервал

$interval обслуживание версия AngularJS ‘от window.setInterval функции.

пример

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

Создайте свой собственный сервис

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

Создание службы с именем hexafy :

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

пример

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

С помощью специальной услуги Внутри фильтра

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

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

Служба hexafy используется в фильтре myFormat :

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

AngularJS сервис $http

Устал писать код

прочитал, что это плохой тон, надо как то вынести запрос к серверу в отдельный сервис(factory) и в дальнейшем использовать одну функцию. Подскажите пример

1 ответ 1

Да, это плохой тон.
Работа с данными должна происходить в сервисах.
Вот, например, сервис для добавления подписки на email :

Желательно ссылку на rest указать единожды в константах, чтобы использовать потом в каждом сервисе.

Метод addNewsletter сервиса newsletterService возвращает $http.post , который соответственно возвращает promise . На этот promise нужно подписаться в контроллере.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками angularjs или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Блог Makeomatic: разработка сайтов и мобильных приложений

Улучшение логирования в AngularJS с помощью декораторов

Давайте выясним как использовать Декораторы ( Decorators ) для улучшения логирования в AngularJS и придания суперсил $log сервису. AngularJS имеет отличную скрытую возможность — $provider.decorator() . Она позволяет разработчикам перехватывать выполнение вызовов к сервисам и убирать, контролировать или изменять возможности этих сервисов. Возможность декорирования была спрятана не специально… скорее она затерялась среди других отличных возможностей AngularJS. В этой статье я представлю Decorator и покажу как постепенно добавлять функциональность к $log сервису… при этом практически не меняя созданные вами сервисы и контроллеры.

Представляем $provide.decorator()

Процесс перехвата происходит в тот момент, когда экземпляр сервиса уже создан и может быть использован на:

  • AngularJS built-in services: $log, $animate, $http, etc.
  • Custom services: $twitter, $facebook, authenticator, etc.
    In fact angular-mocks.js uses the decorator() to add
  • встроенных в AngularJS сервисах: $log , $animate , $http , и т.д.
  • собственных сервисах: $twitter , $facebook , authenticator , и т.д.

Более того, angular-mocks.js использует decorator() , чтобы добавить:

  • flush() к $timeout ,
  • respond() к $httpBackend , и
  • flushNext() к $animate

Так как мы добавляем или меняем поведение в момент построения сервиса, мне хотелось бы сказать, что decorator() позволяет нам внедрять собственные модели поведения. Итак, давайте выясним как вы можете использовать decorator() для улучшения AngularJS $log сервиса.
Перед тем как вы продолжите читать эту статью, я настоятельно рекомендую, чтобы вы сначала прочитали про внедрение зависимостей, используя обучения в RequireJS и AngularJS, потому что многие примеры используют RequireJS define() и внедрение зависимостей.

##Представляем AngularJS $log

AngularJS имеет встроенный сервис $log , который очень полезен для логирования сообщений об ошибках (как и дебаг информацию) в консоль. Используя этот сервис, разработчики могут просто контролировать процесс работы приложения, проверять правильность последовательности вызова функций и так далее. Более того, так как логирование используется очень часто, то разработчики постоянно недовольны, ведь им вечно требуется большее количество возможностей, чем дает стандартная консоль.
Я утверждаю, что разработчикам Ангуляра никогда не следует напрямую использовать console.log() для логирования сообщений в целях дебага. Вместо этого, пожалуйста, используйте $log …

Перед тем как говорить о расширении функционала, давайте сначала посмотрим на стандартное применение $log . Для наших целей, я буду использовать демо-приложение, которое показывает диалог для входа пользователю и предоставляет прототип сервиса авторизации. Внизу — скриншот демо-приложения.

Вот и пример использования нормального (не улучшенного) $log сервиса внутри прототипа сервиса авторизации.

Когда логин форма отправляется и LoginController::login(‘Thomas Burleson’, ‘unknown’) вызван, $log выведет данные в консоль браузера:

Вывод консоли показывает, что LoginController и Authenticator в данный момент корректно выводит данные в консоль

  • Но вывод консоли вводит в замешательство!
  • Какой экземпляр класса вызова $log.debug() ?

Для решения этой проблемы мы можем модифицировать каждый вызов $log.debug() , чтобы вручную добавлять название класса и даже временной штамп к каждому из них; также временные марки позволят нам периодически проверять процесс исполнения кода.

Но НЕ делайте этого… Это решение для начинающих и оно чертовски убого. Вот пример вывода, который мы хотели бы увидеть:

Перед тем как начать изменение ВСЕХ классов (так бы сделал начинающий разработчик), давайте остановимся и предположим, что $provide.decorator() позволит нам сделать это централизованно, и, более того, изменить или убрать любую функциональность.

Давайте используем $provider.decorator() для перехвата вызовов к $log.debug() и динамически присоединим временные метки.

В этом случае мы использовали head-hook перехватчик, чтобы присоединить строку к началу и после вызвать исходную функцию. Другие декораторы могут использовать tail-hook перехватчики или replace перехватчики. Разнообразие вариантов впечатляет. С вышеприведенными улучшениями вывод консоли покажет что-то похожее на:

Но мы ведь еще хотели включить название класса для каждого вызванного метода!

  • А вы заметили, что только $log.debug() был декорирован?
  • Как на счет декорирования других функций, таких как .error(), .warning() и т.д.?
    Достичь данного результата будет чуть сложнее… но не так сложно как вам может показаться!


##Переработка для повторного использования кода

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

Контейнерное структурирование, использованное выше, соответствует Закону Деметры. При таком подходе весь функционал, которым сервис $log был улучшен, инкапсулируется в модуле LogEnhancer .

Вот теперь мы готовы продолжить добавление функционала в LogEnhancer … Мы будет внедрять имена классов и добавлять их в сообщения к выводу.

Чтобы с легкостью добавить к $log нужную функциональность, которая внедрит имена классов в вывод сообщений, нам нужно позволить $log генерировать уникальные экземпляры самого себя: где такой экземпляр будет зарегистрирован со специальным именем класса.

Возможно, пример кода вам это объяснит:

Мы использовали метод $log.getInstance() , чтобы вернуть объект, который выглядит как $log , но на самом деле это НЕ AngularJS $log. Как мы это сделали? Наш LogEnhancer декорировал AngularJS $log сервис и ДОБАВИЛ getInstance() метод к этому сервису.

Элегантность данного решения заключается в том, что $log до сих пор проходит Duck тест, но внутренне знает как присоединять строку LoginController ко всем вызовам $log , выполненным в LoginController классе. Всего лишь одна строка кода добавит поддержку этого функционала в любой класс… и это здорово!

Давайте перечислим набор возможностей, которые нам до сих пор нужны, чтобы полностью заменить $log нашим модулем LogEnhancer :

  • Перехват всех методов $log : log, info, warn, debug, error
  • Возможность построения вызова с токенизированными сообщениями и сложными параметрами (мы не будем обсуждать это в нашей статье)
  • Добавление функции getInstance() с возможностью создавать отдельные экземпляры $log с определенными названиями классов

##Использование каррирования внутри LogEnhancer

Мы можем использов��ть технику каррирования, чтобы захватить конкретную лог функцию, чтобы мы могли перехватывать только определенные вызовы к log функции. Эта техника позволяет нам использовать общий обработчик, который частично применяется к каждому вызову функции $log .

Заметьте, что метод debugFn.call( … ) , так же использует метод supplant() , чтобы преобразовать любой токенизированный контент в финальную строку для вывода:

Топ-пост этого месяца:  Как закрыть доступ к архивам

Итак, мы не только перехватили вызовы $log и добавили временные метки, но и улучшили эти функции, внедрив поддержку токенизированных строк.

##Добавляем $log.getInstance()
Наконец нам надо реализовать метод getInstance() и опубликовать его как часть сервиса лог AngularJS.

Мы преобразовываем нашу функцию prepareLogFn() , используемую для каррирования, чтобы принять опциональный аргумент с названием класса. И мы создали метод getInstance() , который создает экземпляр объекта с тем же API, что и у оригинального лог сервиса.
Наконец, нам нужно преобразовать наш оригинальный пример кода с использованием $log.getInstance() :

Вы заметили дополнительное изменение, показанное в 30 строке исходного кода выше? $log.debug() включил все возможности supplant() в LogEnhancer… Так, что теперь вызовы к $log поддерживают токенизированные строки и ассоциативные массивы.

Теперь вывод в браузерную консоль будет таким:

ВЫВОДЫ
Это только один пример того, как Декораторы могут быть использованы для добавления или преобразования поведения в AngularJS приложениях. А LogEnhancer может быть также расширен с возможностями:

  • Вывод в кастомную консоль приложения… например, для генерации удаленных отчетов для клиентов
  • Цветовое кодирование и группирование сообщений в логе по категориям; @see Chrome Dev Tools
  • Логирование клиентских ошибок на удаленный сервер

Я уверен, что с помощью данной техники можно создать еще множество элегантных решений. Если у вас есть классный декоратор, не забудьте поделиться им с AngularJS сообществом!

МАТЕРИАЛЫ
Я создал публичный GitHub репозиторий с исходным кодом и примерами, использованными в данном материале.
По мотивам Burleson Thomas

Вопрос по angularjs-service, angularjs, angularjs-scope, javascript &#8211 AngularJS, этот способ использования сервиса хорош?

и контроллер это:

Сервис работает нормально, так что я неВставьте код здесь . В этом случае результат «Привет, мир!» Я изменил HTML следующим образом:

Но это не работает.

Я изменил контроллер:

Это работает!

Итак, мой вопрос:

Это единственный способ использовать функции службы непосредственно в HTML, или яя что-то упустил?

Другой способ представить ваш сервис в пределах вашей области $ — добавить указатель на функцию вашего метода / объекта данных.

После этого вы можете вызывать его, используя скобки.

Мне лично нравится этот подход, и я в настоящее время использую его, чтобы синхронизировать несколько представлений с одними и теми же данными. Это поднимает некоторые проблемы, хотя, как объяснено здесь:AngularJS. Лучшая практика в отношении правильного двухстороннего связывания данных из сервиса

Что касается предоставления большого количества данных, я в настоящее время пытаюсь сделать что-то вроде этого.

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

Еще один способ сделать это:

Выставьте сервис на $ rootScope:

а затем в шаблоне:

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

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

Если вы хотите, чтобы ваш сервисфункции, которые можно напрямую вызывать из шаблона, который выУ нас есть несколько вариантов:

Тот, который тымы попробовали — то есть выставили весь сервис на область видимости:

а затем в шаблоне:

Это одна строка в контроллере, и все методы обслуживания доступны в области и, следовательно, для шаблонов.

Выставлять методы один за другим

иметь точный контроль над тем, что подвергается воздействию:

а затем в шаблоне:

Это требует больше методов работы, но дает вам детальный контроль над тем, что подвергается.

Выставить методы проксирования:

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

AngularJS Service / Factory Tutorial with Example

by Viral Patel · January 7, 2014

1. Introduction to AngularJS Services

2. AngularJS internal services

3. AngularJS custom services

4. AngularJS Service vs Factory

AngularJS .service

AngularJS .factory

5. Injecting dependencies in services

5.1 The HTML

5.2 The JavaScript

5.3 Online Demo

6. End to End application using AngularJS Service

6.1 The HTML

6.2 The JavaScript

6.3 Online Demo

That’s All Folks

References

AJAX Post Method example using Javascript & jQuery

Sum HTML Textbox Values using jQuery / JavaScript

RPC in Javascript using JSON-RPC-Java

Lazy Load Image & WordPress Gravatar using JavaScript / JQuery


166 Comments

Some great articles you have posted! Any article that you can refer to display grid with AngularJS service? Thanks!

Hi that is great quick start tutorial for AngularJS
but tell me how i use that AngularJS to persist data in db
and also tell me how you secure business logic from user side in AngularJS

Sorry you cant. This is a client side app framework. Only things which are not too sensitive must be coded in angular. You have the rest of the logic in the server side.
Client side code can always be viewed in the devtools.
But you can still make it really tough to understand for the person looking at your code by obfuscating it. Thats all I know!

Why dont you use HTML5’s Local storage or the webSQL. Both are great.

Is there any particular reason not to pass the newcontact directly from the ng-click as a parameter of save()?

This seems to me to have better reusability and encapsulation. For example, you may want to be able to add a new contact from somewhere else without binding to the single input you already have.

Anyway, I am honestly curious if there is any particular “Angular” reason to do it the way you did.

Also, I realize you clear the $scope.newcontact var after saving… if you use the variation I suggested, you can still do that in the ng-click:

I personally consider it a good practice to write minimal code in HTML that’s why I support his approach.

This is a great tutorial to start with anulgar’s service & factory…
Thanks a lot for giving a sweet & small expample…

Hi Viral, Have been following your tutorials on AngularJS. The explanation is very crisp and clear. Please keep posting more tutorials in the future.

Hi dude this is excellent example.
HATS of U.

Thank you for making the tutorial.
One thing that seems to be missing, and was in fact the reason I read the tutorial, was an answer to the question of when to use a factory vs a service? Can you provide different use cases for when one would be preferable over the other? Seems like a factory could just as easily return a function, which would make it identical to a service (Is this correct).

Thank you for the awesome tutorial!

I am newbie to AngularJS and this article has helped me a lot in understanding concepts.

I am trying to code something like :- I have a dropdown and when I select one value, it should in turn open another drop down and if not, the second dropdown should not be displayed.

For ex. I have dropdown with values A, B, C and when I select C, I should see another select element with values in it. But when I select A or B, the second select is not visible. How can I achieve this?

Thanks in advance.

You should look at ng-if, ng-show and ng-hide.

These will allow you to control whether or not the second selection box displays by setting an expression on it, as follows…

ng-if will add the element to the dom model if the condition is true. This means if the expression is false, the element does not even exist, so be careful if referencing it from elsewhere.
ng-show will show the element only if the condition is true, hide when false. The element will always exist in the DOM.
ng-hide is the exact reverse of show. Shows when the expression is false, hide when true.

can you please post an example on using multiple filters with multiple input text boxes in angularjs

Yay, another over simplified tutorial that ignores the complexity of any real-world app. Try doing this example when the model data is requested asynchronously from the server. Then add another controller that needs to share data using the service. That would be a very simple and practical example, however the code required to achieve that is way more complex than you would imagine. And you could take it one step further, how about instead of having a save button like you would on a web page from 10 years ago, you handle data automatically being updated when an input changes.

I’m sorry, but I’ve been through a hundred tutorials just like this. Afterwards I feel like I can jump right in and create a simple app, until I add one more controller and deal with real data from a server, then all the sudden everything in these tutorials is irrelevant. Tutorials titled “Sharing data between controllers using services” will have an example with static data, one service, and one controller. Yes, I know you can create a service and inject that service into all of your controllers, but so what? That’s the least of the problems with sharing data between controllers. The real issue is how do you keep your data in sync between all of your services and controllers and the server, and what is the best way to handle the asynchronous nature of loading data into the application. Those are the practical real world scenarios that tutorials need to explain.

John Smith – you seem like the smartest guy in the room. You should stop reading so many dumb tutorials and start writing good ones.

# 18 http запросы в AngularJS

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

В файле index.html создадим контроллер:

Опишем его в файле main.js:

В консоли браузера видим, что console.log отработал и вывел строку mainCtrl. А теперь давайте попробуем в функцию, в качестве аргумента, добавить сервис $http и выведем еще один console.log.

Теперь, при обновлении страницы браузера, мы видим, что у на localhost 3001 ушел GET-запрос. Мы видим также ожидаемую ошибку 404 (Not Found), так как у нас ничего нет на 3001 порту. Давайте внимательнее взглянем на объект, который вернулся на наш GET-запрос, который мы написали — $http.get(‘http://localhost:3001’). $http.get — это промис, у которого есть несколько функций, которые на него можно повесить, а именно: .success(), .error(), .then(), .catch(). Мы будем использовать пока что только .success() и .error().

Топ-пост этого месяца:  Инструкция по настройке Key Collector и работе с программой

.success() — означает, что функция выполнится, если backend вернет на запрос статус 200, означающий, что запрос выполнен успешно. .error() — выполнится в том случае, если у нас есть какие-либо ошибки.

Усложним наш код:

$http.get(‘http://localhost:3001’) — является промисом и как только мы можем повесить одновременно .success и .error.

В браузере видим, что отработал наш console.log(‘error’), так как у нас есть ошибка 404 (Not Found), то есть наш запрос не был успешно обработан. Поэтому сейчас попробуем написать бекенд, который будет обрабатывать наш запрос.

Для начала добавим к нашему URL /books — этот запрос будет получать книги с бекэнда

Также, в корне, необходимо создать файл backend.js. В него я вставлю код, который был написан ранее

Чтобы бекэнд работал, вам естественно необходимо установить nodejs, а также npm. Проверить/установить все можно из консоли, например, написав node —version, а также npm —version и проверив — какие версии стоят у вас (если все уже установленно).

В данном коде мы используем express — это мини-фреймворк на NodeJS. Соотвественно, строка var express = require(‘express’) — сообщает, что мы будем использовать данный пакет. Так как на данный момент у нас URL имеет вид file:///. и непонятно какой домен, то мы будем использовать cors — для кросдоменного запроса, чтобы полноценно взпимодействовать с localhost 3001. Далее — body-parser, который используется для того, чтобы мы могли получить body POST-запроса. Строка var app = express() — инициализируе express-сервер.

Данная часть кода отвечает за настройки body-parser:

Данной строкой мы указываем, что наше приложение должно использовать cors, то есть разрешены кросдоменные запросы

Также у нас есть массив books, который мы будем передавать на фронтенд

Данный код отдает книжки по запросу localhost:3001/books

Далее следует сам сервер. Как только мы запустим бекэнд и все отработает без ошибок, то в консоли мы увидим строку — console.log(‘backend started’), которая будет означать, что бекэнд начал работать

Запустим бекэнд. Для этого в консоли пишем node backend.js. И сразу же видим, что нам нет модулей express, cors и body-parser. Для того, чтобы их установить — пишем npm install express. Мы скачали модуль express и в нашем проекте появилась папка node_modules. Также прописываем в консоли команды для установки cors и body-parser — npm install cors и npm install body-parser. Снова пробуем запустить бекенд. Теперь мы видим, что сработал console.log(‘backend started’), что означает, что все хорошо и наш бекэнд запущен.

Зайдем в браузер. В поисковой строке пропишем — localhast:3001/books. Видим, что вывелся массив с именами. Теперь посмотрим как мы это сделали в проекте. Обновим страницу, откроем вкладку Network. Здесь мы видим, что на localhast:3001/books ушел запрос, который нам вернул три объекта с именами, которые мы создали. В консоли мы видим надпись success, а также три объекта, которые уже доступны нам в функции AngularJS.

Еще раз о том, как это работает? Бекэнд по запросу /books возвращает нам все книжки. На фронтэнде, мы в контроллере $http.get-функцией отправляем запрос бекэнду, чтобы он отдал все книжки. После чего, опять же в контроллере, сработал .success, так как все книжки были успешно получены. И теперь у нас есть result.

Добавим в описание контроллера, в качестве аргумента, $scope, а также присвоим result в $scope.books:

Теперь выводим books в шаблоне. В файле index.html, внутри контроллера:

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

Давайте создадим POST-запрос. Для этого добавим > в шаблон

Обновим страницу в браузере. Текстовое поле, а также кнопка отображаются.

Повесим обработчик внутри контроллера и с помощью console.log посмотрим, что же мы передаем и как все работает

Если мы что-то пишем в текстовом поле, например, This is my book, при нажатии на кнопку, в консоли браузера, мы видим, объект с name: This is my book.

Теперь сохраним этот объект на бекэнд. Для этого создаем $http.post — который является POST-запросом

Обновим браузер. Введем текст в наш > и нажмем кнопку. В консоли мы видим, что POST-запрос был отправлен, но при этом ошибка 404 говорит о том, что наш бекэнд не готов его обработать. Соответственно мы видим Error in book post.

В файл backend.js добавим

res.send(200) — означает, что запрос обработан успешно. books.push — записываем новый объект в массив. req.body.name — с помощью body-parser мы читаем наш POST-запрос и получаем из него name.

Для того, чтобы все внесенные нами изменения заработали, необходимо перезапустить сервер на NodeJS. Затем обновляем страницу в браузере. Добавим название книги, нажимаем Add и смотрим вкладку Network. Рассмотрим POST-запрос: видим наш URL, типа запроса POST и, если мы посмотрим на body, то увидим name, который мы передаем с фронтенда. Во вкладке Response — статус OK, сообщающий, что запрос прощел успешно и данные были сохранены. Также мы видим OPTIONS-запрос, который используется для того, чтобы работал кросдоменный запрос. Данный запрос, скорее всего, будет рассмотрен в следующих уроках, поэтому на данный момент мы о нем говорить не будем.

Поменяем фронтенд таким образом, чтобы добавленные книги отображались. Для этого в контроллере добавим

$scope.book = null — необходим для того, чтобы введенная нами новая книга не была привязана к текстовому полю и оно автоматически очищалось.

Давайте проверим. Теперь, когда мы добавляем новую книгу, мы видим, что POST-запрос ушел и ему присвоен статус OK. При этом была добавлена одна книга, которая сразу же вывелась не только в консоли, но и на странице.

Если убрать строку — $scope.book = null и написать что-то в текстовом поле, то мы увидим, что > атоматически не очищается, что не удобно.

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

$http Service

The $http service is used to send or receive data from the remote server using browser’s XMLHttpRequest or JSONP.

$http is a service as an object. It includes following shortcut methods.

Method Description
$http.get() Perform Http GET request.
$http.head() Perform Http HEAD request.
$http.post() Perform Http POST request.
$http.put() Perform Http PUT request.
$http.delete() Perform Http DELETE request.
$http.jsonp() Perform Http JSONP request.
$http.patch() Perform Http PATCH request.

Let’s look at some of the important methods of $http.

$http.get()

$http.get() method sends http GET request to the remote server and retrieves the data.

Signature: HttpPromise $http.get(url)

$http.get() method returns HttpPromise object, which includes various methods to process the response of http GET request.


The following example demonstrates the use of $http service in a controller to send HTTP GET request.

In the above example, ‘myController’ controller includes $http parameter, so that it can be used to send GET request. AngularJS automatically injects $scope parameter at runtime. The $http.get() method returns HttpPromise which includes methods like success() and error(). The success() method registers a callback method which is called when a request completes successfully. The error() method registers a callback method which is called when a request fails and returns an error.

The onSuccess() method above, attaches the response data to the $scope. The onError() method attaches status property to the $scope. These methods can be called in chain, as shown below.

$http.post

The $http.post() method sends Http POST request to the remote server to submit and retrieve the data.

Signature: HttpPromise $http.post(url, dataToSubmit);

The following example demonstrates $http.post() method.

You can use construction function of $http service to perform http request, as shown below.

Thus, you can use $http service to send AJAX request to the remote server.

AngularJS Services ($http, Custom Services) with Example

Here we will learn services in angularjs with examples, custom service in angularjs and use of services in angularjs and how to create and use custom services and built in services ($http, $location, $interval, etc. ) in angularjs applications with example.

What is Service in AngularJs?

In angularjs, service is the function which is used to handle the server communication over the browser with help of XMLHttpRequest object and $http .

In angularjs, we have a 30 built in services like $http, $location, $timeout, $interval, etc… and these are used to share the data and its behaviours in the controller, directive, filters and other services over the apps. In angularjs we can create our own custom services also based on our requirement.

In angularjs, service will create singleton instance over the angular apps and call the services using the service name in the controller.

We will see how to use services in angularjs applications with examples.

AngularJS $http Service

In angularjs, $http is the most common service which is used in angularjs applications. By using $http service we can communicate with remote HTTP servers over the browser with the help of XMLHttpRequest object.

In $http service, we have a different methods available those are $http.get, $http.post, $http.put, $http.delete, etc. We will learn all these methods in-detail in next chapters.

Here we will see general usage of $http service in angularjs applications.

Syntax of using AngularJS $http Service

Generally the syntax of using $http service in angularjs applications will be like as shown following

var app = angular.module( ‘serviceApp’ , []);

app.controller( ‘serviceCtrl’ , function ($scope, $http) <

// Simple GET request example:

>).then( function success(response) <

// this function will be called when the request is success

// this function will be called when the request returned error status

If you observe above syntax, we passed $http as argument to the controller. To use service in controller we need to pass $http as an argument. We will see how to use $http request with simple example.

AngularJS $http Service Example

Following is the example of using $http service in angularjs applications with get method.

AngularJs $http Service Example

script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js»> script >

script type =»text/javascript»>

var app = angular.module( ‘serviceApp’ , []);

app.controller( ‘serviceCtrl’ , function ($scope, $http) <

>).then( function success(response) <

div ng-app =»serviceApp» ng-controller =»serviceCtrl»>

If you observe above code we mentioned ‘sample.html’ for url property in $http service. For that create one html file in your application and give name as ‘sample.html’.

Now open ‘sample.html’ file and remove complete default code from the file and write the code like as shown below

Now run the application and verify the output that will be like as shown following

Output of AngularJS $http Service Example

Following is the result of $http service example in angularjs

Welcome to Tutlane.com

Is it possible to create custom service in angularjs?

For this question answer is YES we can create our own service and use it in our angularjs applications based on our requirements.

AngularJS Create Custom Service

To create our own service first we need to create angularjs module then connect our custom service to angular module like as shown below.

var app = angular.module( ‘appServices’ , []);

app.service( ‘angularServices’ , function ($http) <

this .squareofnumber = function (x) <

How to use created custom service?

To use our custom made service in application we need to pass it as dependency to controller like as shown below

app.controller( «angularController» , function ($scope, angularServices) <

The » angularServices » is the name of angular custom service and call in » angularController «. Here when we pass value to custom service it will result from custom service method. We will see complete example of custom service in angularjs.

AngularJS Custom Service Example

Following is the example of creating custom service and use it in angularjs application.

AngularJs Custom Service Example

script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js»> script >

script type =»text/javascript»>

var app = angular.module( ‘appServices’ , []);

app.service( ‘angularServices’ , function ($http) <

this .squareofnumber = function (x) <

app.controller( «angularController» , function ($scope, angularServices) <

body ng-app =»appServices»>

div ng-controller =»angularController»>

p > AngularJS Custom Service Example p >

Square of Number 10 : b > <> b >

If you observe above code we created custom service “angularServices” and calling custom service method “ squareofnumber ” from controller “ angularController ”. Now we will run and see the output.

Output of AngularJS Custom Service Example

Following is the result of using custom service in angularjs.

AngularJS Custom Service Example

Square of Number 10 : 100

This is how we can use built in services and custom services in angularjs applications. We will learn more about built in services in next chapters.


Обработка ответа RESTful Web-сервиса AngularJS’ом

Этот урок освещает процесс создания простого AngularJS клиента, который обрабатывает ответ от Spring MVC RESTful Web Service.

Что вы создадите

Вы создадите AngularJS клиент, который будет доступен при открытии файла index.html в вашем браузере и обрабатывать ответ от сервиса на:

Сервис будет отвечать JSON приветствием:

AngularJS клиент будет отображать ID и content в DOM.

Что вам потребуется

  • Примерно 15 минут свободного времени
  • Любимый текстовый редактор
  • Современный web-браузер
  • Интернет-соединение

Создание AngularJS контроллера

Для начала, вы создадите AngularJS модуль контроллера, который будет обрабатывать ответ REST сервиса:

Этот модуль контроллера представлен в виде простой JavaScript функции, в которую передаются $scope и $http компоненты AngularJS. $http компонент используется для обработки ответа от REST сервиса «/greeting».

В случае успеха он присвоит вернувшийся JSON от сервиса переменной $scope.greeting , фактически устанавливая объект модели «greeting». Установив этот объект модели, AngularJS связать его с DOM страницы приложения, чтобы отобразить его пользователю.

Создание страницы приложения

Теперь, когда у вас есть AngularJS контроллер, вы создадите HTML страницу, которая будет загружать контроллер в web-браузер.

Обратите внимание на следующие два тега скриптов в секции head :

Первый тег скрипта загружает минифицированную AngularJS библиотеку из CDN, поэтому вам не нужно загружать вручную AngularJS и помещать в ваш проект. Он также загружает код контроллера (hello.js) из приложения.

Библиотека AngularJS предоставляет несколько собственных атрибутов для использования их в стандартных HTML тегах. В index.html два таких атрибута:

  • Тег html имеет атрибут ng-app , который указывает, что страница является AngularJS приложением
  • Тег div имеет атрибут ng-controller , ссылающийся на Hello контроллер модуля

Также обратите внимание на два

тега, которые используют метки(обозначаются двойными фигурными скобками).

Метки ссылаются на свойства id и content объекта модели greeting для установки значений в случае успешной обработки ответа от REST сервиса.

Запуск клиента

Чтобы запустить клиент, вам необходимо поднять web сервер. Spring Boot CLI (Command Line Interface) включает встроенный Tomcat сервер, который предоставляет простой подход к обработке web содержимого. Более подробную информацию об установке и использовании CLI смотрите в учебном материале Создание приложений с Spring Boot.

Для обработки статического содержимого вам необходимо создать минимальное количество кода. Приведенный ниже app.groovy скрипт достаточен для того, чтобы Spring Boot знал, что вы хотите запустить Tomcat:

Теперь вы можете запустить приложение, используя Spring Boot CLI:

Когда приложение запустится, откройте http://localhost:8080 в вашем браузере, где вы увидите:

Значение ID будет увеличиваться каждый раз при обновлении страницы

Поздравляем! Вы только что разработали AngularJS клиент, который обрабатывает ответ от Spring RESTful web сервиса.

WebSystique

learn together

AngularJS $http service example-server communication

AngularJS $http service is used for asynchronous server communication. This post explains $http service in great details, specially $q & promise , with a complete CRUD application example, using AngularJS front-end client, communicating asynchronously with Spring REST API based back-end. You can plug-in your own server with this client to play with.

To learn more about Spring REST API in general, don’t forget to visit Spring REST API Tutorial

What is $http

AngularJS $http service allows us to communicate asynchronously with server endpoints using XHR [browser’s XMLHttpRequest Object] API. $http is designed for general purpose AJAX calls that can deal with both RESTful & Non-RESTful API on your server. For anyone coming from jQuery background, $http can be treated somewhat equivalent to jQuery.ajax. The $http API is based on the deferred/promise APIs exposed by the $q service which is an implementation of Promise interface , based on Kris Kowal’s Q approach, which is a standardized way of dealing with asynchronous calls in JavaScript.

The Promise API comes with following flow:

  • 1. Each asynchronous task will return a promise object.
  • 2. Each promise object will have a then function that can take two arguments, a success handler and an error handler.
  • 3. The success or the error handler in the then function will be called only once, after the asynchronous task finishes.
  • 4. The then function will also return a promise, to allow chaining multiple calls.
  • 5. Each handler (success or error) can return a value, which will be passed to the next function in the chain of promises.
  • 6. If a handler returns a promise (makes another asynchronous request), then the next handler (success or error) will be called only after that request is finished.

Let’s take a simple example to understand $http.

In above example, then function takes two callbacks as parameter. First parameter gets called if the response is success. In case of failure, second parameter gets called. Both of callback parameters takes response as input.

The response object has these properties:

data– The response body transformed with the transform functions.
status– HTTP status code of the response.
headers– Header getter function.
config– The configuration object that was used to generate the request.
statusText– HTTP status text of the response.

What about Server

Our Server is Spring Based REST API, taken from this post. Basically, This is what our REST API does:

GET request to /api/user/ returns a list of users
GET request to /api/user/1 returns the user with ID 1
POST request to /api/user/ with a user object as JSON creates a new user
PUT request to /api/user/3 with a user object as JSON updates the user with ID 3
DELETE request to /api/user/4 deletes the user with ID 4
DELETE request to /api/user/ deletes all the users

For this post we will reuse the Server from mentioned post. We will just tweak the properties in User model object to meet the client from this example.

1. Client Part

Declare Module [ app.js ]

Create Service [ user_service.js ]

Let’s create the service (using module.factory as discussed in AngularJs Service Post). This service will then be injected in controller.

Create Controller [ app_controller.js ]

Controllwe will have our service injected, which it will then use from inside it’s functions exposed to User interface.

Create FE Application [ServiceExample.html]

It’s a trivial user management CRUD application with AngulasrJS, using bootstrap for styling. We have modularized it a bit, by keeping module,controller & service in different files.

2. Server Part

As mentioned before, we can create a Spring REST API using this post. We need to adapt User properties based on User Interface in this example.

Complete Server is shown below.

Spring REST API controller: This Controller returns JSON response [thanks to Jackson library in classpath].

Service Interface

Service Implementation.

User Model class.

Spring Configuration Class.

Spring Initializer class.

CORS filter class : To handle Same Origin policy related issues.

Declare dependencies in pom.xml

Project Structure

Deploy & Run.

Build and Deploy Server to any Servlet 3 environment. I am using Tomcat 8 here. Then run the server using bin/startup.bat in Tomcat.

Open the FE (ServerExample.html) created above. You will see list of users.

Play with create/edit/delete users to see them in action. Open Developer Tools in your browser to see how client and server is communicating using JSON.

Live Demo

Please note that this live demo is showing only UI of your application, backed with static user data.There is no live JVM attached with this live demo. Refresh the page to repopulate with initial data.

That’s it. Complete source code for this post can be downloaded from Spring 4 MVC+AngularJS Example.

If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help improve further our learning process.

Топ-пост этого месяца:  Joomla форма обратной связи
Добавить комментарий