AngularJS AJAX повикване с помощта на $ ресурс, $ http (пример)

Съдържание:

Anonim

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: // пример / събития и
  • Можем да използваме глагола „GET“, за да получим целия списък със събития, ако приложението следва REST базирана архитектура.

Така например, ако е имало събитие с идентификатор 1, тогава можем да получим подробностите за това събитие чрез URL адреса. http: // пример / събития / 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. заявка ([параметри], [успех], [грешка]) - Това може да се използва за извършване на стандартното GET повикване, но масивът се връща като част от отговора.

4. премахване ([params], postData, [успех], [грешка]) - Това може да се използва за извършване на стандартното извикване 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", за да използва ресурса $.

В следващия пример извикваме модула "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. В тази услуга създаваме функция, която ще извика API на $ resource

  5. $ ресурс ('/ пример / Събитие /: 1).

    Функцията $ resource е услуга, която се използва за извикване на REST крайна точка. Крайната точка REST обикновено е URL. В горната функция използваме URL (/ пример / Събитие /: 1) като нашата REST крайна точка. Нашата REST крайна точка (/ пример / Събитие /: 1) означава, че има приложение за събитие, което седи на нашия основен сайт „пример“. Това приложение за събития е разработено чрез използване на 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.

Да приемем, че имаме 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, който може да се използва за получаване на горните данни от сървъра

В горния пример

  1. Добавяме услугата $ http към нашата функция Controller, за да можем да използваме функцията "get" на услугата $ http.
  2. Сега използваме функцията get от HTTP услугата, за да получим JSON обектите от URL адреса http: // example /angular/getTopics.PHP
  3. Въз основа на обекта 'response' създаваме функция за обратно извикване, която ще върне записите на данните и впоследствие ги съхраняваме в обекта $ scope.
  4. След това можем да използваме променливата $ 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.