AngularJS AJAX – Efectuați un apel AJAX folosind $http

prin: James Hartman James Hartman
Hours Actualizat

AngularJS AJAX

AJAX este forma scurtă de Asynchronous JavaScript și XML. AJAX a fost conceput în primul rând pentru a actualiza părți ale unei pagini web, fără a reîncărca întreaga pagină.

Motivul pentru proiectarea acestei tehnologii a fost acela de a reduce numărul de călătorii dus-întors care au fost efectuate între client și server și numărul de reîmprospătare a întregii pagini care aveau loc oricând un utilizator solicita anumite informații.

AJAX a permis ca paginile web să fie actualizate asincron prin schimbul de cantități mici de date cu serverul din culise. Aceasta a însemnat că era posibil să se actualizeze părți ale unei pagini web, fără a reîncărca întreaga pagină.

Multe aplicații web moderne urmează de fapt această tehnică pentru a reîmprospăta pagina sau a obține date de la server.

Interacțiuni la nivel înalt cu serverele folosind $resource

Angular oferă două API-uri diferite pentru a gestiona solicitările Ajax. Sunt

  • $resursa
  • $http

Ne vom uita la proprietatea „$resource” din Angular, care este folosită pentru a interacționa cu serverele la un nivel înalt.

Când vorbim despre interacțiunea la un nivel superior, înseamnă că ne vom deranja doar de ceea ce are serverul de oferit în ceea ce privește funcționalitatea și nu de ceea ce face serverul în detaliu în ceea ce privește această funcționalitate.

De exemplu, dacă serverul găzduia o aplicație care menține informațiile angajaților unei anumite companii, serverul ar putea expune funcționalități unor clienți precum GetEmployeeDetails, SetEmployeeDetails etc.

Deci, la un nivel înalt, știm ce pot face aceste două funcții și le putem invoca folosind proprietatea $resource. Dar atunci nu știm exact detaliile „GetEmployeeDetails” și „SetEmployeeDetails” și cum este implementat.

Explicația de mai sus explică ceea ce este cunoscut ca arhitectură bazată pe REST.

  • REST este cunoscut ca Transfer de stat reprezentativ, care este o arhitectură urmată de multe sisteme moderne bazate pe web.
  • Înseamnă că puteți utiliza verbele HTTP normale ale GET, POST, PUT și DELETE pentru a lucra cu o aplicație bazată pe web.

Deci, să presupunem că avem o aplicație web care menține o listă de Evenimente .

Dacă vrem să ajungem la lista tuturor evenimentelor,

  • Aplicația web poate expune o adresă URL, cum ar fi http://example/events si
  • Putem folosi verbul „GET” pentru a obține întreaga listă de evenimente dacă aplicația urmează o arhitectură bazată pe REST.

Deci, de exemplu, dacă a existat un eveniment cu un ID de 1, atunci putem obține detaliile acestui eveniment prin adresa URL. http://example/events/1

Care este obiectul $resource

Obiectul $resource din Angular ajută la lucrul cu servere care servesc aplicații pe o arhitectură bazată pe REST.

Sintaxa de bază a instrucțiunii @resource împreună cu diferitele funcții sunt prezentate mai jos

Sintaxa instrucțiunii @resource

var resource Object = $resource(url);

Odată ce aveți resourceObject la îndemână, puteți utiliza funcțiile de mai jos pentru a efectua apelurile REST necesare.

1. get([params], [succes], [error]) – Acesta poate fi folosit pentru a efectua apelul GET standard.

2. save([params], postData, [succes], [error]) – Aceasta poate fi folosită pentru a efectua apelul POST standard.

3. query([params], [success], [error]) – Aceasta poate fi folosită pentru a efectua apelul GET standard, dar o matrice este returnată ca parte a răspunsului.

4. remove([params], postData, [succes], [error]) – Aceasta poate fi folosită pentru a efectua apelul standard DELETE.

În toate funcțiile prezentate mai jos, parametrul „params” poate fi folosit pentru a furniza parametrii necesari, care trebuie să fie trecuți în URL.

De exemplu,

  • Să presupunem că treceți o valoare a Topic: „Angular” ca „param” în funcția get ca
  • obține('http://example/events' ,'{ Subiect: 'Angular' }')
  • Adresa URL http://example/events?Topic=Angular este invocat ca parte a funcției get.

ARTICOLE SIMILARE

Cum se utilizează proprietatea $resource AngularJS

Pentru a utiliza proprietatea $resource, trebuie urmați următorii pași:

Pas 1) Fișierul „angular-resource.js” trebuie descărcat de pe site-ul Angular.JS și trebuie plasat în aplicație.

Pas 2) Modulul aplicației ar trebui să declare o dependență de modulul „ngResource” pentru a utiliza $resource.

În exemplul următor, apelăm modulul „ngResource” din aplicația noastră „DemoApp”.

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

Pas 3) Apelarea funcției $resource() cu punctul final REST, așa cum se arată în exemplul următor.

Dacă faceți acest lucru, atunci obiectul $resource va avea capacitatea de a invoca funcționalitatea necesară expusă de punctele finale REST.

Următorul exemplu apelează URL-ul punctului final: http://example/events/1

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

În exemplul de mai sus se fac următoarele lucruri

  1. La definirea aplicației Angular, se creează un serviciu folosind declarația „DemoApp.services”, unde DemoApp este numele dat aplicației noastre Angular.
  2. Pentru a crea detaliile acestui nou serviciu se folosește metoda .factory.
  3. „Intrare” este numele pe care îl dăm serviciului nostru, care poate fi orice nume pe care doriți să îl furnizați.
  4. În acest serviciu, creăm o funcție care va apela API-ul $resource
  5. $resource('/example/Event/:1). Funcția $resource este un serviciu care este folosit pentru a apela un punct final REST. Punctul final REST este în mod normal o adresă URL. În funcția de mai sus, folosim adresa URL (/example /Event/:1) ca punct final REST. Punctul nostru final REST (/example /Event/:1) indică faptul că pe site-ul nostru principal „exemplu” există o aplicație Event. Această aplicație pentru evenimente este dezvoltată folosind o arhitectură bazată pe REST.
  6. Rezultatul apelului de funcție este un obiect al clasei de resurse. Obiectul resursă va avea acum funcțiile ( get() , query() , save() , remove(), delete() ) care pot fi invocate.

Pas 4) Acum putem folosi metodele care au fost returnate în pasul de mai sus (care sunt get(), query() , save() , remove(), delete() ) în controlerul nostru.

În fragmentul de cod de mai jos, folosim funcția get() ca exemplu

Să ne uităm la codul care poate folosi funcția 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);
  });

În pasul de mai sus,

  • Funcția get() din fragmentul de mai sus emite o solicitare GET către / exemplu /Event/:1.
  • Parametrul:1 din adresa URL este înlocuit cu $scope.id.
  • Funcția get() va returna un obiect gol care este populat automat atunci când datele reale provin de la server.
  • Al doilea argument pentru get() este un callback care este executat atunci când datele sosesc de la server. Ieșirea posibilă a întregului cod ar fi un obiect JSON care ar returna lista de evenimente expuse de pe site-ul web „exemplu”. Un exemplu de ceea ce poate fi returnat este prezentat mai jos. 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Interacțiuni de nivel scăzut cu serverul $http

$http este un alt serviciu Angular JS care este folosit pentru a citi date de pe servere la distanță. Cea mai populară formă de date care este citită de pe servere sunt datele în format JSON.

Să presupunem că avem un PHP Pagina ( http://example/angular/getTopics.PHP ) care returnează următoarele date JSON

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

Să ne uităm la codul AngularJS folosind $http, care poate fi folosit pentru a obține datele de mai sus de la server

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

În exemplul de mai sus

  1. Adăugăm serviciul $http la funcția Controller, astfel încât să putem folosi funcția „get” a serviciului $http.
  2. Acum folosim funcția get din serviciul HTTP pentru a obține obiectele JSON din URL http://example /angular/getTopics.PHP
  3. Pe baza obiectului „răspuns”, creăm o funcție de apel invers care va returna înregistrările de date și, ulterior, le stocăm în obiectul $scope.
  4. Apoi putem folosi variabila $scope.names din controler și o putem folosi în viziunea noastră pentru a afișa obiectele JSON în consecință.

Cum să preluați date din SQL și MySQL Server folosind AngularJS

Angular poate fi folosit și pentru a prelua date de pe un server care rulează MySQL sau SQL.

Ideea este că, dacă aveți o pagină PHP care se conectează la un MySQL baza de date sau o Asp.Net pagina care se conectează la un MS SQL baza de date server, atunci trebuie să vă asigurați că atât pagina PHP, cât și pagina ASP.Net redă datele în format JSON.

Urmează procesul pas cu pas despre cum să preluați date din SQL și MySQL Server folosind AngularJS.

Să presupunem că avem un site PHP (http://example /angular/getTopics.PHP) difuzarea datelor fie de la a MySQL sau baza de date SQL.

Pas 1) Preluați date de la a MySQL Baza de date
Primul pas este să vă asigurați că pagina PHP preia datele de la a MySQL baza de date și servește datele în format JSON.

Pas 2) Obțineți datele JSON folosind serviciul $http
Scrieți codul similar afișat mai sus pentru a utiliza serviciul $http pentru a obține datele JSON.

Să ne uităm la codul AngularJS folosind $http, care poate fi folosit pentru a obține datele de mai sus de la server

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

Pas 3) Redați datele în vizualizarea dvs. utilizând directiva ng-repeat

Mai jos, folosim directiva ng-repeat pentru a parcurge fiecare dintre perechile cheie-valoare din obiectele JSON returnate de metoda „get” a serviciului $http.

Pentru fiecare obiect JSON, afișăm cheia care este „Nume” și valoarea este „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>

Rezumat

  • Forma completă a AJAX este cea asincronă JavaScenariu și XML.
  • Ne-am uitat la ce a ODIHNITOR arhitectura este, care nu este altceva decât o funcționalitate expusă de aplicațiile web bazate pe verbele HTTP normale de GET, POST, PUT și DELETE.
  • Obiectul $resource este folosit cu Angular pentru a interacționa cu aplicațiile web RESTFUL la un nivel înalt, ceea ce înseamnă că invocăm doar funcționalitatea expusă de aplicația web, dar nu ne deranjam cum este implementată funcționalitatea.
  • De asemenea, ne-am uitat la serviciul $http care poate fi folosit pentru a obține date dintr-o aplicație web. Acest lucru este posibil deoarece serviciul $http poate funcționa cu aplicații web la un nivel mai detaliat.
  • Datorită puterii serviciului $http, acesta poate fi folosit pentru a obține date de la a MySQL sau MS SQL Server printr-o aplicație PHP. Datele pot fi apoi redate într-un tabel folosind directiva ng-repeat.

S-ar putea sa-ti placa: