AJAX - это краткая форма асинхронного JavaScript и XML. AJAX в первую очередь был разработан для обновления частей веб-страницы без перезагрузки всей страницы.
Причина разработки этой технологии заключалась в том, чтобы уменьшить количество циклов обмена, которые были сделаны между клиентом и сервером, и количество обновлений всей страницы, которые обычно происходили всякий раз, когда пользователю требовалась определенная информация.
AJAX позволял асинхронно обновлять веб-страницы, обмениваясь небольшими объемами данных с сервером за кулисами. Это означало, что можно было обновлять части веб-страницы без перезагрузки всей страницы.
Многие современные веб-приложения фактически используют эту технику для обновления страницы или получения данных с сервера.
В этом руководстве вы узнаете:
- Высокоуровневые взаимодействия с серверами с использованием $ resource
- Низкоуровневое взаимодействие сервера с $ http
- Получение данных с сервера, на котором запущены SQL и MySQL
Высокоуровневые взаимодействия с серверами с использованием $ 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: // пример / события / 1
Что такое объект $ resource
Объект $ resource в Angular помогает в работе с серверами, которые обслуживают приложения на основе архитектуры REST.
Базовый синтаксис оператора @resource вместе с различными функциями приведены ниже.
Синтаксис оператора @resource
var resource Object = $resource(url);
Когда у вас есть объект resourceObject, вы можете использовать следующие функции для выполнения необходимых вызовов 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' как 'param' в функции get как
- get (' http: // example / events ', '{Topic:' Angular '}')
- URL-адрес http: // example / events? Topic = Angular вызывается как часть функции get.
Как использовать свойство $ resource
Чтобы использовать свойство $ 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 ('/ пример / Событие /: 1).
Функция $ resource - это служба, которая используется для вызова конечной точки 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, который можно использовать для получения вышеуказанных данных с сервера.
В приведенном выше примере
- Мы добавляем службу $ http к нашей функции контроллера, чтобы мы могли использовать функцию "get" службы $ http.
- Теперь мы используем функцию get из службы HTTP, чтобы получить объекты JSON с URL-адреса http: // example /angular/getTopics.PHP.
- На основе объекта «response» мы создаем функцию обратного вызова, которая будет возвращать записи данных, и впоследствии мы сохраняем их в объекте $ scope.
- Затем мы можем использовать переменную $ scope.names из контроллера и использовать ее в нашем представлении для соответствующего отображения объектов JSON.
Получение данных с сервера, на котором запущены SQL и MySQL
Angular также можно использовать для получения данных с сервера, на котором работает MySQL или SQL.
Идея состоит в том, что если у вас есть страница PHP, подключающаяся к базе данных MySQL, или страница Asp.Net, подключающаяся к базе данных сервера MS SQL, то вам необходимо убедиться, что как страница PHP, так и страница ASP.Net отображают данные в формате JSON.
Предположим, у нас есть сайт PHP ( http: // example /angular/getTopics.PHP ), обслуживающий данные из базы данных MySQL или SQL.
Шаг 1) Первый шаг - убедиться, что страница PHP берет данные из базы данных MySQL и обслуживает данные в формате JSON.
Шаг 2) Напишите аналогичный код, показанный выше, для использования службы $ http для получения данных JSON.
Давайте посмотрим на код AngularJS, используя $ http, который можно использовать для получения вышеуказанных данных с сервера.
Шаг 3) Визуализируйте данные в вашем представлении с помощью директивы ng-repeat.
Ниже мы используем директиву ng-repeat для просмотра каждой пары «ключ-значение» в объектах JSON, возвращаемых методом «get» службы $ http.
Для каждого объекта JSON мы отображаем ключ «Имя» и значение «Описание».
<таблица>{{x.Name}} {{x.Description}}
Резюме:
- Мы рассмотрели, что такое RESTFUL-архитектура, которая представляет собой не что иное, как функциональность, предоставляемую веб-приложениями на основе обычных HTTP-глаголов GET, POST, PUT и DELETE.
- Объект $ resource используется с Angular для взаимодействия с RESTFUL веб-приложениями на высоком уровне, что означает, что мы вызываем только функции, предоставляемые веб-приложением, но не беспокоимся о том, как эти функции реализованы.
- Мы также рассмотрели службу $ http, которую можно использовать для получения данных из веб-приложения. Это возможно, потому что сервис $ http может работать с веб-приложениями на более детальном уровне.
- Благодаря мощности службы $ http ее можно использовать для получения данных из MySQL или MS SQL Server через приложение PHP. Затем данные могут быть отображены в таблице с помощью директивы ng-repeat.