Виклик AngularJS AJAX за допомогою $ ресурсу, $ http (Приклад)

AJAX - це коротка форма асинхронних JavaScript та XML. AJAX в основному був розроблений для оновлення частин веб-сторінки без перезавантаження цілої сторінки.

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

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

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

У цьому підручнику ви дізнаєтесь-

Взаємодія високого рівня із серверами за допомогою $ ресурсу
Взаємодія сервера низького рівня з $ http
Отримання даних із сервера, на якому запущені SQL та MySQL

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

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

$ ресурс
$ http

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

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

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

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

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

REST відомий як представницький державний трансфер, який є архітектурою, якої дотримуються в багатьох сучасних веб-системах.
Це означає, що ви можете використовувати звичайні дієслова HTTP GET, POST, PUT та DELETE для роботи з веб-додатком.

Тож припустимо, у нас є веб-додаток, який підтримує список Подій.

Якби ми хотіли дістатись до переліку всіх подій,

Веб-програма може відкрити URL-адресу, таку як http: // example / events та
Ми можемо використовувати дієслово "GET", щоб отримати повний список подій, якщо додаток дотримується архітектури на основі REST.

Так, наприклад, якщо була Подія з ідентифікатором 1, то ми можемо отримати деталі цієї події за URL-адресою. http: // example / events / 1

Що таке об’єкт ресурсу $

Об'єкт $ resource в Angular допомагає працювати з серверами, які обслуговують додатки на архітектурі на основі REST.

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

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

var resource Object = $resource(url);

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

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

2. зберегти ([параметри], postData, [успіх], [помилка]) - Це може бути використано для здійснення стандартного виклику POST.

3. запит ([параметри], [успіх], [помилка]) - Це може бути використано для здійснення стандартного виклику GET, але масив повертається як частина відповіді.

4. видалити ([params], postData, [успіх], [помилка]) - Це може бути використано для здійснення стандартного виклику DELETE.

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

Наприклад,

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

Як використовувати властивість ресурсу $

Для того, щоб використовувати властивість $ resource, потрібно виконати такі дії:

Крок 1) Файл "angular-resource.js" потрібно завантажити з сайту Angular.JS і розмістити в додатку.

Крок 2) Модуль програми повинен оголосити залежність від модуля "ngResource", щоб використовувати ресурс $.

У наступному прикладі ми викликаємо модуль "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 API ресурсу
$ ресурс ('/ приклад / Подія /: 1).

Функція $ resource - це послуга, яка використовується для виклику кінцевої точки REST. Кінцевою точкою REST зазвичай є URL-адреса. У наведеній вище функції ми використовуємо URL (/ example / Event /: 1) як кінцеву точку REST. Наша кінцева точка REST (/ example / Подія /: 1) означає, що на нашому головному сайті "приклад" знаходиться додаток 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 до нашої функції контролера, щоб ми могли використовувати функцію "отримати" служби $ 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.

Крок 3) Рендеруйте дані у своєму поданні за допомогою директиви ng-repeat.

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

Для кожного об’єкта JSON ми відображаємо ключ, який має назву «Ім'я», а значення «Опис».

<таблиця>
 {{x.Name}}  {{x.Description}}

Короткий зміст:

Ми розглянули, що таке RESTFUL архітектура, яка є не що інше, як функціональні можливості веб-додатків, засновані на звичайних HTTP-дієсловах GET, POST, PUT та DELETE.
Об'єкт $ ресурсу використовується з Angular для взаємодії з RESTFUL веб-додатками на високому рівні, що означає, що ми використовуємо лише функціональні можливості веб-програми, але не турбуємося про те, як ця функціональність реалізована.
Ми також розглянули службу $ http, яку можна використовувати для отримання даних із веб-програми. Це можливо, оскільки служба $ http може працювати з веб-додатками на більш детальному рівні.
Завдяки потужності служби $ http, її можна використовувати для отримання даних із MySQL або MS SQL Server через додаток PHP. Далі дані можуть бути відображені в таблиці за допомогою директиви ng-repeat.