AngularJS AJAX – Зробіть виклик AJAX за допомогою $http

AngularJS AJAX

AJAX є скороченою формою Asynchronous JavaСкрипт і XML. AJAX був в основному розроблений для оновлення частин веб-сторінки без перезавантаження всієї сторінки.

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

AJAX дозволяв веб-сторінкам оновлюватися асинхронно шляхом обміну невеликими обсягами даних із сервером за лаштунками. Це означало, що можна було оновлювати частини веб-сторінки, не перезавантажуючи всю сторінку.

Багато сучасних веб-додатків насправді використовують цю техніку для оновлення сторінки або отримання даних із сервера.

Взаємодія високого рівня з серверами за допомогою $resource

Angular надає два різних API для обробки запитів Ajax. Вони є

  • $ресурс
  • $http

Ми розглянемо властивість «$resource» в Angular, яка використовується для взаємодії з серверами на високому рівні.

Коли ми говоримо про взаємодію на вищому рівні, це означає, що нас буде хвилювати лише те, що може запропонувати сервер щодо функціональності, а не те, що саме сервер робить у деталях щодо цієї функціональності.

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

Отже, на високому рівні ми знаємо, що можуть робити ці дві функції, і можемо викликати їх за допомогою властивості $resource. Але ми не знаємо точно деталей функцій «GetEmployeeDetails» і «SetEmployeeDetails» і того, як вони реалізовані.

Наведене вище пояснення пояснює те, що відомо як архітектура на основі REST.

  • REST відомий як Representational State Transfer, який є архітектурою багатьох сучасних веб-систем.
  • Це означає, що ви можете використовувати звичайні дієслова 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);

Коли у вас під рукою є resourceObject, ви можете використовувати наведені нижче функції для здійснення необхідних викликів REST.

1. get([параметри], [успіх], [помилка]) – це можна використовувати для стандартного виклику GET.

2. save([params], postData, [success], [error]) – Це можна використовувати для стандартного виклику POST.

3. query([параметри], [успіх], [помилка]) – це можна використовувати для виконання стандартного виклику GET, але як частину відповіді повертається масив.

4. remove([параметри], postData, [успіх], [помилка]) – це можна використовувати для стандартного виклику DELETE.

У всіх наведених нижче функціях параметр 'params' можна використовувати для надання необхідних параметрів, які потрібно передати в URL-адресі.

Наприклад,

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

Як використовувати властивість AngularJS $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
});

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

  1. Під час визначення програми Angular служба створюється за допомогою оператора «DemoApp.services», де DemoApp — це ім’я, дане нашій програмі Angular.
  2. Для створення деталей цієї нової служби використовується метод .factory.
  3. «Вхід» — це ім’я, яке ми надаємо нашій службі. Це може бути будь-яке ім’я, яке ви хочете надати.
  4. У цій службі ми створюємо функцію, яка буде викликати $resource API
  5. $resource('/example/Event/:1). Функція $resource — це служба, яка використовується для виклику кінцевої точки REST. Кінцева точка REST зазвичай є URL-адресою. У наведеній вище функції ми використовуємо URL-адресу (/example /Event/:1) як кінцеву точку REST. Наша кінцева точка REST(/example /Event/:1) вказує на те, що на нашому основному сайті «приклад» є програма Event. Ця програма Event розроблена з використанням архітектури на основі REST.
  6. Результатом виклику функції є об’єкт класу ресурсу. Об’єкт ресурсу тепер матиме функції ( 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.

Припустимо, що ми маємо a 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>

У наведеному прикладі

  1. Ми додаємо службу $http до нашої функції Controller, щоб ми могли використовувати функцію «get» служби $http.
  2. Тепер ми використовуємо функцію get із служби HTTP, щоб отримати об’єкти JSON із URL-адреси http://example /angular/getTopics.PHP
  3. На основі об’єкта «відповідь» ми створюємо функцію зворотного виклику, яка повертатиме записи даних, а потім зберігаємо їх в об’єкті $scope.
  4. Потім ми можемо використати змінну $scope.names з контролера та використовувати її в нашому поданні для відповідного відображення об’єктів JSON.

Як отримати дані з SQL і MySQL Сервер з використанням AngularJS

Angular також можна використовувати для отримання даних із запущеного сервера MySQL або SQL.

Ідея полягає в тому, що якщо у вас є сторінка PHP, яка підключається до a MySQL база даних або ан Asp.Net сторінка підключення до MS SQL бази даних сервера, то вам потрібно переконатися, що і PHP, і сторінка ASP.Net відображають дані у форматі JSON.

Нижче наведено крок за кроком процес отримання даних із SQL і MySQL Сервер з використанням AngularJS.

Припустимо, у нас є PHP сайт (http://example /angular/getTopics.PHP), що обслуговує дані з a MySQL або база даних SQL.

Крок 1) Візьміть дані з a MySQL база даних
Перший крок — переконатися, що сторінка PHP бере дані з a MySQL базу даних і обслуговує дані у форматі JSON.

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

Давайте подивимося на код 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.topics = response.data.records;});
});
</script>

Крок 3) Візуалізація даних у вашому поданні за допомогою директива ng-repeat

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

Для кожного об’єкта JSON ми відображаємо ключ «Name» і значення «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 є асинхронний JavaScript і XML.
  • Ми подивилися на те, що a ВІДПОЧИВНИЙ архітектура, яка є нічим іншим, як функціями, доступними веб-додатками на основі звичайних дієслів HTTP GET, POST, PUT і DELETE.
  • Об’єкт $resource використовується з Angular для взаємодії з веб-додатками RESTFUL на високому рівні, що означає, що ми лише викликаємо функціональні можливості, надані веб-додатком, але не турбуємося про те, як реалізовані функціональні можливості.
  • Ми також розглянули службу $http, яку можна використовувати для отримання даних із веб-програми. Це можливо, оскільки служба $http може працювати з веб-додатками на більш детальному рівні.
  • Завдяки потужності служби $http її можна використовувати для отримання даних із a MySQL або MS SQL Server через програму PHP. Потім дані можна відобразити в таблиці за допомогою директиви ng-repeat.