AngularJS AJAX

AJAX — это краткая форма асинхронного JavaСкрипт и XML. AJAX был в первую очередь разработан для обновления частей веб-страницы без перезагрузки всей страницы.

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

AJAX позволял асинхронно обновлять веб-страницы путем скрытого обмена небольшими объемами данных с сервером. Это означало, что можно было обновлять части веб-страницы без перезагрузки всей страницы.

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

Высокоуровневое взаимодействие с серверами с использованием $resource

Angular предоставляет два разных API для обработки запросов Ajax. Они есть

$ ресурс
$ http

Мы рассмотрим свойство $resource в Angular, которое используется для взаимодействия с серверами на высоком уровне.

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

Например, если на сервере размещалось приложение, которое хранит информацию о сотрудниках определенной компании, сервер может предоставлять клиентам такие функции, как GetEmployeeDetails, SetEmployeeDetails и т. д.

Итак, на высоком уровне мы знаем, что могут делать эти две функции, и можем вызывать их, используя свойство $resource. Но тогда мы не знаем точно деталей функций «GetEmployeeDetails» и «SetEmployeeDetails», а также того, как они реализованы.

Приведенное выше объяснение объясняет то, что известно как архитектура на основе REST.

REST известен как передача репрезентативного состояния — архитектура, используемая во многих современных веб-системах.
Это означает, что вы можете использовать обычные HTTP-команды GET, POST, PUT и DELETE для работы с веб-приложением.

Итак, предположим, у нас есть веб-приложение, которое поддерживает список Мероприятия.

Если бы мы хотели получить список всех событий,

Веб-приложение может предоставлять следующие возможности: URL такие как http://example/events и
Мы можем использовать команду «GET», чтобы получить весь список событий, если приложение использует архитектуру на основе REST.

Например, если событие имело идентификатор 1, то мы можем получить подробную информацию об этом событии через... URL. http://example/events/1

Что такое объект $resource

Объект $resource в Angular помогает работать с серверами, которые обслуживают приложения в архитектуре на основе REST.

Основной синтаксис оператора @resource вместе с различными функциями приведен ниже.

Синтаксис оператора @resource

var resource Object = $resource(url);

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

1. get([params], [success], [error]) — его можно использовать для выполнения стандартного вызова GET.

2. save([params], postData, [success], [error]) — это можно использовать для выполнения стандартного вызова POST.

3. query([params], [success], [error]) — его можно использовать для выполнения стандартного вызова GET, но как часть ответа возвращается массив.

4. Remove([params], postData, [success], [error]) — это можно использовать для выполнения стандартного вызова DELETE.

Во всех приведенных ниже функциях параметр 'params' можно использовать для указания необходимых параметров, которые нужно передать. URL.

Например,

Предположим, вы передаете значение Topic: Angular в качестве параметра в функцию get как
получать('http://example/events' ,'{ Тема: 'Angular' }')
URL http://example/events?Topic=Angular вызывается как часть функции get.

Как использовать свойство $resource AngularJS

Чтобы использовать свойство $resource, необходимо выполнить следующие шаги:

Шаг 1) Файл angular-resource.js необходимо скачать с сайта Angular.JS и поместить в приложение.

Шаг 2) Модуль приложения должен объявить зависимость от модуля «ngResource», чтобы использовать $resource.

В следующем примере мы вызываем модуль «ngResource» из нашего приложения «DemoApp».

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Шаг 3) Вызов функции $resource() с конечной точкой REST, как показано в следующем примере.

Если вы это сделаете, то объект $resource сможет вызывать необходимые функции, предоставляемые конечными точками REST.

В следующем примере выполняется вызов конечной точки. URL: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

В приведенном выше примере выполняются следующие действия.

При определении приложения Angular служба создается с помощью оператора «DemoApp.services», где DemoApp — это имя, присвоенное нашему приложению Angular.
Метод .factory используется для создания деталей этой новой службы.
«Вход» — это имя, которое мы даем нашему сервису. Это может быть любое имя, которое вы хотите указать.
В этом сервисе мы создаем функцию, которая будет вызывать API $resource.
Функция `$resource('/example/Event/:1')` — это сервис, используемый для вызова REST-эндпоинта. REST-эндпоинт обычно представляет собой URLВ приведенной выше функции мы используем URL (/example /Event/:1) — это наша REST-конечная точка. Наша REST-конечная точка (/example /Event/:1) указывает на то, что на нашем основном сайте «example» размещено приложение Event. Это приложение Event разработано с использованием REST-архитектуры.
Результатом вызова функции является объект класса ресурса. Объект ресурса теперь будет иметь функции ( get() , query() , save() , Remove(), delete() ), которые можно вызывать.

Шаг 4) Теперь мы можем использовать методы, которые были возвращены на предыдущем шаге (это get(), query(), save(), remove(), delete()) в нашем контроллере.

В приведенном ниже фрагменте кода мы используем функцию get() в качестве примера.

Давайте посмотрим на код, который может использовать функцию get().

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

На вышеуказанном шаге

Функция get() в приведенном выше фрагменте отправляет запрос GET к /example/Event/:1.
Параметр:1 в URL заменяется на $scope.id.
Функция get() вернет пустой объект, который заполняется автоматически, когда фактические данные поступают с сервера.
Второй аргумент get() — это обратный вызов, который выполняется при поступлении данных с сервера. Возможным результатом всего кода будет объект JSON, который вернет список событий, представленных на «примерном» веб-сайте. Пример того, что может быть возвращено, показан ниже.
```
{
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}
```

Взаимодействие сервера низкого уровня с $http

$http — еще один сервис Angular JS, который используется для чтения данных с удаленных серверов. Самая популярная форма данных, считываемая с серверов, — это данные в формате JSON.

Предположим, что у нас есть PHP страница ( http://example/angular/getTopics.PHP ), который возвращает следующие данные JSON

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Давайте посмотрим на код AngularJS, использующий $http, который можно использовать для получения вышеуказанных данных с сервера.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

В приведенном выше примере

Мы добавляем службу $http к нашей функции контроллера, чтобы мы могли использовать функцию «get» службы $http.
Теперь мы используем функцию `get` из HTTP-сервиса для получения JSON-объектов. URL http://example /angular/getTopics.PHP
На основе объекта «ответ» мы создаем функцию обратного вызова, которая будет возвращать записи данных, а затем сохраняем их в объекте $scope.
Затем мы можем использовать переменную $scope.names из контроллера и использовать ее в нашем представлении для соответствующего отображения объектов JSON.

Как получить данные из SQL и MySQL Сервер с использованием AngularJS

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

Идея состоит в том, что если у вас есть страница PHP, подключающаяся к MySQL базу данных или Асп.Нет страница подключения к MS SQL базы данных сервера, то вам необходимо убедиться, что страница PHP и ASP.Net отображает данные в формате JSON.

Ниже приведен пошаговый процесс извлечения данных из SQL и MySQL Сервер с использованием AngularJS.

Предположим, у нас есть PHP-сайт (http://example /angular/getTopics.PHP) обслуживание данных либо от MySQL или базу данных SQL.

Шаг 1) Возьмите данные из MySQL база данных
Первый шаг — убедиться, что страница PHP берет данные из MySQL базу данных и предоставляет данные в формате JSON.

Шаг 2) Получите данные JSON с помощью службы $http.
Напишите аналогичный код, показанный выше, чтобы использовать службу $http для получения данных JSON.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Шаг 3) Отобразите данные в вашем представлении с помощью директива ng-repeat

Ниже мы используем директиву ng-repeat для просмотра каждой пары ключ-значение в объектах JSON, возвращаемых методом get службы $http.

Для каждого объекта JSON мы отображаем ключ «Имя» и значение «Descriptион».

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Резюме

Полная форма AJAX — асинхронный. JavaСценарий и XML.
Мы рассмотрели, что такое ОТДЫХ архитектура — это не что иное, как функциональность, предоставляемая веб-приложениями на основе обычных HTTP-команд GET, POST, PUT и DELETE.
Объект $resource используется в Angular для взаимодействия с веб-приложениями RESTFUL на высоком уровне. Это означает, что мы вызываем только функциональность, предоставляемую веб-приложением, но не беспокоимся о том, как эта функциональность реализуется.
Мы также рассмотрели сервис $http, который можно использовать для получения данных из веб-приложения. Это возможно, поскольку сервис $http может работать с веб-приложениями на более детальном уровне.
Благодаря возможностям службы $http ее можно использовать для получения данных из MySQL или MS SQL Server через приложение PHP. Затем данные можно отобразить в таблице с помощью директивы ng-repeat.

AngularJS AJAX – выполнение AJAX-вызова с использованием $http

AngularJS AJAX

Высокоуровневое взаимодействие с серверами с использованием $resource

Что такое объект $resource

Как использовать свойство $resource AngularJS

Взаимодействие сервера низкого уровня с $http

Как получить данные из SQL и MySQL Сервер с использованием AngularJS

Резюме

Подведем итог этой публикации следующим образом:

Подпишитесь на рассылку

AngularJS AJAX

Высокоуровневое взаимодействие с серверами с использованием $resource

Что такое объект $resource

СТАТЬИ ПО ТЕМЕ

Как использовать свойство $resource AngularJS

Взаимодействие сервера низкого уровня с $http

Как получить данные из SQL и MySQL Сервер с использованием AngularJS

Резюме

Подведем итог этой публикации следующим образом:

Подпишитесь на рассылку