AngularJS AJAX – Upućivanje AJAX poziva pomoću $http

AngularJS AJAX

AJAX je skraćeni oblik od Asynchronous JavaSkripta i XML. AJAX je prvenstveno dizajniran za ažuriranje dijelova web stranice, bez ponovnog učitavanja cijele stranice.

Razlog za dizajniranje ove tehnologije bio je smanjiti broj povratnih putovanja između klijenta i poslužitelja te broj osvježavanja cijele stranice koja su se događala svaki put kada su korisniku bile potrebne određene informacije.

AJAX je omogućio asinkrono ažuriranje web stranica razmjenom malih količina podataka s poslužiteljem iza scene. To je značilo da je bilo moguće ažurirati dijelove web stranice, bez ponovnog učitavanja cijele stranice.

Mnoge suvremene web aplikacije zapravo slijede ovu tehniku ​​za osvježavanje stranice ili dobivanje podataka s poslužitelja.

Interakcije visoke razine s poslužiteljima koji koriste $resource

Angular pruža dva različita API-ja za obradu Ajax zahtjeva. Oni su

  • $resurs
  • $http

Pogledat ćemo svojstvo “$resource” u Angularu, koje se koristi za interakciju s poslužiteljima na visokoj razini.

Kada govorimo o interakciji na višoj razini, to znači da ćemo se baviti samo time što poslužitelj ima za ponuditi po pitanju funkcionalnosti, a ne o tome što točno poslužitelj radi u detalje po pitanju te funkcionalnosti.

Na primjer, ako je poslužitelj hostirao aplikaciju koja održava podatke o zaposlenicima određene tvrtke, poslužitelj bi mogao izložiti funkcionalnost klijentima kao što su GetEmployeeDetails, SetEmployeeDetails itd.

Dakle, na visokoj razini znamo što ove dvije funkcije mogu učiniti i možemo ih pozvati pomoću svojstva $resource. Ali onda ne znamo točno detalje funkcija “GetEmployeeDetails” i “SetEmployeeDetails” i kako se one implementiraju.

Gornje objašnjenje objašnjava ono što je poznato kao arhitektura temeljena na REST-u.

  • REST je poznat kao Representational State Transfer, što je arhitektura koju slijede mnogi moderni sustavi temeljeni na webu.
  • To znači da možete koristiti normalne HTTP glagole GET, POST, PUT i DELETE za rad s aplikacijom temeljenom na webu.

Dakle, pretpostavimo da imamo web aplikaciju koja održava popis Događaji.

Ako želimo doći do popisa svih događaja,

  • Web aplikacija može otkriti URL kao što je http://example/events i
  • Možemo upotrijebiti glagol "GET" da dobijemo cijeli popis događaja ako aplikacija slijedi arhitekturu temeljenu na REST-u.

Na primjer, ako je postojao događaj s ID-om 1, tada možemo dobiti pojedinosti o tom događaju putem URL-a. http://example/events/1

Što je objekt $resource

Objekt $resource u Angularu pomaže u radu s poslužiteljima koji poslužuju aplikacije na arhitekturi temeljenoj na REST-u.

Osnovna sintaksa naredbe @resource zajedno s raznim funkcijama dana je u nastavku

Sintaksa naredbe @resource

var resource Object = $resource(url);

Nakon što imate resourceObject pri ruci, možete koristiti donje funkcije za upućivanje potrebnih REST poziva.

1. get([params], [success], [error]) – Ovo se može koristiti za standardni GET poziv.

2. save([params], postData, [success], [error]) – Ovo se može koristiti za standardni POST poziv.

3. query([params], [success], [error]) – Ovo se može koristiti za standardni GET poziv, ali niz se vraća kao dio odgovora.

4. remove([params], postData, [success], [error]) – Ovo se može koristiti za standardni DELETE poziv.

U svim funkcijama danim u nastavku, parametar 'params' može se koristiti za pružanje potrebnih parametara, koje je potrebno proslijediti u URL-u.

Na primjer,

  • Pretpostavimo da prenesete vrijednost Topic: 'Angular' kao 'param' u get funkciji as
  • dobiti('http://example/events' ,'{ Tema: 'Angular' }')
  • URL http://example/events?Topic=Angular poziva se kao dio funkcije get.

Kako koristiti AngularJS svojstvo $resursa

Kako biste koristili svojstvo $resource, potrebno je slijediti sljedeće korake:

Korak 1) Datoteku “angular-resource.js” potrebno je preuzeti sa stranice Angular.JS i staviti u aplikaciju.

Korak 2) Modul aplikacije trebao bi deklarirati ovisnost o modulu "ngResource" kako bi koristio $resource.

U sljedećem primjeru pozivamo modul "ngResource" iz naše aplikacije "DemoApp".

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

Korak 3) Pozivanje funkcije $resource() s krajnjom točkom REST, kao što je prikazano u sljedećem primjeru.

Ako to učinite, tada će objekt $resource imati mogućnost pozvati potrebnu funkcionalnost koju izlažu krajnje točke REST-a.

Sljedeći primjer poziva URL krajnje točke: http://example/events/1

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

U gornjem primjeru rade se sljedeće stvari

  1. Prilikom definiranja Angular aplikacije, usluga se kreira korištenjem iskaza 'DemoApp.services' gdje je DemoApp naziv dat našoj Angular aplikaciji.
  2. Metoda .factory koristi se za izradu detalja ove nove usluge.
  3. 'Ulaz' je naziv koji dajemo našoj usluzi, a može biti bilo koji naziv koji želite dati.
  4. U ovoj usluzi stvaramo funkciju koja će pozvati $resource API
  5. $resource('/example/Event/:1). Funkcija $resource je usluga koja se koristi za pozivanje REST krajnje točke. REST krajnja točka obično je URL. U gornjoj funkciji koristimo URL (/example /Event/:1) kao našu REST krajnju točku. Naša REST krajnja točka (/example /Event/:1) označava da postoji aplikacija Event koja se nalazi na našem glavnom mjestu "primjer". Ova aplikacija za događaje razvijena je korištenjem arhitekture temeljene na REST-u.
  6. Rezultat poziva funkcije je objekt klase resursa. Objekt resursa sada će imati funkcije ( get() , query() , save() , remove(), delete()) koje se mogu pozvati.

Korak 4) Sada možemo koristiti metode koje su vraćene u gornjem koraku (a to su get() , query() , save() , remove(), delete() ) u našem kontroleru.

U donjem isječku koda koristimo funkciju get() kao primjer

Pogledajmo kod koji može koristiti funkciju 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);
  });

U gornjem koraku,

  • Funkcija get() u gornjem isječku šalje GET zahtjev za /example /Event/:1.
  • Parametar:1 u URL-u zamjenjuje se s $scope.id.
  • Funkcija get() vratit će prazan objekt koji se automatski popunjava kada stvarni podaci dođu s poslužitelja.
  • Drugi argument za get() je povratni poziv koji se izvršava kada podaci stignu s poslužitelja. Mogući izlaz cijelog koda bio bi JSON objekt koji bi vratio popis događaja izloženih s web stranice "primjer". Primjer onoga što se može vratiti prikazan je u nastavku
    {
    { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
    { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
    { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
    
    }

Interakcije poslužitelja niske razine s $http

$http je još jedan Angular JS servis koji se koristi za čitanje podataka s udaljenih poslužitelja. Najpopularniji oblik podataka koji se čita s poslužitelja su podaci u JSON formatu.

Pretpostavimo da imamo a PHP Stranica ( http://example/angular/getTopics.PHP ) koji vraća sljedeće JSON podatke

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

Pogledajmo AngularJS kod koristeći $http, koji se može koristiti za dobivanje gornjih podataka s poslužitelja

<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>

U gornjem primjeru

  1. Uslugu $http dodajemo našoj funkciji Kontrolora kako bismo mogli koristiti funkciju "get" usluge $http.
  2. Sada koristimo funkciju get iz HTTP usluge za dobivanje JSON objekata iz URL-a http://example /angular/getTopics.PHP
  3. Na temelju objekta 'response', stvaramo funkciju povratnog poziva koja će vratiti zapise podataka i potom ih pohranjujemo u objekt $scope.
  4. Zatim možemo koristiti varijablu $scope.names iz kontrolera i upotrijebiti je u našem prikazu za prikaz JSON objekata u skladu s tim.

Kako dohvatiti podatke iz SQL-a i MySQL Poslužitelj koji koristi AngularJS

Angular se također može koristiti za dohvaćanje podataka s poslužitelja koji radi MySQL ili SQL.

Ideja je da ako imate PHP stranicu koja se povezuje na a MySQL baza podataka ili an Asp.Net stranica koja se povezuje s MS-om SQL baze podataka poslužitelja, morate osigurati da i PHP i ASP.Net stranica prikazuju podatke u JSON formatu.

Slijedi postupak korak po korak kako dohvatiti podatke iz SQL-a i MySQL Poslužitelj koji koristi AngularJS.

Pretpostavimo da imamo PHP stranicu (http://example /angular/getTopics.PHP) posluživanje podataka bilo iz a MySQL ili SQL baza podataka.

Korak 1) Uzmite podatke iz a MySQL baza podataka
Prvi korak je osigurati da PHP stranica preuzima podatke iz a MySQL bazu podataka i poslužuje podatke u JSON formatu.

Korak 2) Dobijte JSON podatke pomoću $http usluge
Napišite sličan kod prikazan gore da biste koristili $http uslugu za dobivanje JSON podataka.

Pogledajmo AngularJS kod koristeći $http koji se može koristiti za dobivanje gornjih podataka s poslužitelja

<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>

Korak 3) Prikaz podataka u vašem prikazu pomoću ng-repeat direktiva

U nastavku koristimo direktivu ng-repeat za prolazak kroz svaki od parova ključ-vrijednost u JSON objektima koje vraća metoda "get" usluge $http.

Za svaki JSON objekt prikazujemo ključ koji je "Ime", a vrijednost je "Description”.

<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>

rezime

  • Potpuni oblik AJAX-a je asinkroni JavaScript i XML.
  • Pogledali smo što a MIRAN arhitektura je, što nije ništa drugo nego funkcionalnost koju izlažu web aplikacije temeljene na uobičajenim HTTP glagolima GET, POST, PUT i DELETE.
  • Objekt $resource koristi se s Angularom za interakciju s RESTFUL web aplikacijama na visokoj razini, što znači da samo pozivamo funkcionalnost koju izlaže web aplikacija, ali se ne zamaramo time kako se funkcionalnost implementira.
  • Također smo pogledali uslugu $http koja se može koristiti za dobivanje podataka iz web aplikacije. To je moguće jer usluga $http može raditi s web aplikacijama na detaljnijoj razini.
  • Zbog snage $http usluge, ovo se može koristiti za dobivanje podataka iz a MySQL ili MS SQL Server preko PHP aplikacije. Podaci se zatim mogu prikazati u tablici pomoću direktive ng-repeat.