AngularJS AJAX: effettua chiamate AJAX utilizzando $http

AngularJS AJAX

AJAX è la forma abbreviata di Asynchronous JavaScript e XML. AJAX è stato progettato principalmente per aggiornare parti di una pagina web, senza ricaricare l'intera pagina.

Il motivo per cui è stata progettata questa tecnologia è stato quello di ridurre il numero di viaggi di andata e ritorno effettuati tra il client e il server e il numero di aggiornamenti dell'intera pagina che avvenivano ogni volta che un utente richiedeva determinate informazioni.

AJAX ha permesso alle pagine web di essere aggiornate in modo asincrono scambiando piccole quantità di dati con il server dietro le quinte. Ciò significava che era possibile aggiornare parti di una pagina web, senza ricaricare l'intera pagina.

Molte applicazioni web moderne seguono effettivamente questa tecnica per aggiornare la pagina o ottenere dati dal server.

Interazioni di alto livello con i server che utilizzano $resource

Angular fornisce due diverse API per gestire le richieste Ajax. Sono

• $risorsa
• $http

Esamineremo la proprietà “$resource” in Angular, che viene utilizzata per interagire con i server ad alto livello.

Quando parliamo di interazione a un livello superiore, significa che ci preoccuperemo solo di ciò che il server ha da offrire in termini di funzionalità e non di cosa fa esattamente il server in dettaglio rispetto a questa funzionalità.

Ad esempio, se il server ospitasse un'applicazione che gestisce le informazioni sui dipendenti di una determinata azienda, il server potrebbe esporre ai client funzionalità quali GetEmployeeDetails, SetEmployeeDetails, ecc.

Quindi, a un livello elevato, sappiamo cosa possono fare queste due funzioni e possiamo invocarle usando la proprietà $resource. Ma poi non conosciamo esattamente i dettagli delle funzioni "GetEmployeeDetails" e "SetEmployeeDetails" e come vengono implementate.

La spiegazione precedente illustra la cosiddetta architettura basata su REST.

• REST è noto come Representational State Transfer, un'architettura adottata in molti moderni sistemi basati sul web.
• Ciò significa che puoi utilizzare i normali verbi HTTP GET, POST, PUT e DELETE per lavorare con un'applicazione basata sul web.

Supponiamo quindi di avere un'applicazione Web che mantiene un elenco di Eventi.

Se volessimo arrivare all'elenco di tutti gli eventi,

• L'applicazione Web può esporre un URL come http://example/events e
• Possiamo usare il verbo “GET” per ottenere l’elenco completo degli eventi se l’applicazione segue un’architettura basata su REST.

Ad esempio, se si è verificato un evento con ID 1, possiamo ottenere i dettagli di questo evento tramite l'URL. http://example/events/1

Qual è l'oggetto $resource

L'oggetto $resource in Angular facilita l'utilizzo di server che gestiscono applicazioni su un'architettura basata su REST.

Di seguito viene fornita la sintassi di base dell'istruzione @resource insieme alle varie funzioni

Sintassi dell'istruzione @resource

var resource Object = $resource(url);

Una volta che hai ResourceObject a portata di mano, puoi utilizzare le funzioni seguenti per effettuare le chiamate REST richieste.

1. get([params], [success], [error]) – Può essere utilizzato per effettuare la chiamata GET standard.

2. save([params], postData, [success], [error]) – Può essere utilizzato per effettuare la chiamata POST standard.

3. query([params], [success], [error]) – Può essere utilizzata per effettuare la chiamata GET standard, ma come parte della risposta viene restituito un array.

4. delete([params], postData, [success], [error]) – Può essere utilizzato per effettuare la chiamata DELETE standard.

In tutte le funzioni indicate di seguito è possibile utilizzare il parametro 'params' per fornire i parametri richiesti, che devono essere passati nell'URL.

Per esempio,

• Supponiamo di passare un valore di Topic: 'Angular' come 'param' nella funzione get come
• Ottenere('http://example/events' ,'{ Argomento: 'Angolare' }')
• L'URL http://example/events?Topic=Angular viene richiamato come parte della funzione get.

Come utilizzare la proprietà $resource di AngularJS

Per utilizzare la proprietà $resource, è necessario seguire i seguenti passaggi:

Passo 1) Il file “angular-resource.js” deve essere scaricato dal sito Angular.JS e inserito nell'applicazione.

Passo 2) Il modulo dell'applicazione dovrebbe dichiarare una dipendenza dal modulo "ngResource" per utilizzare $resource.

Nell'esempio seguente, chiamiamo il modulo "ngResource" dalla nostra applicazione 'DemoApp'.

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

Passo 3) Chiamare la funzione $resource() con l'endpoint REST, come mostrato nell'esempio seguente.

In questo caso, l'oggetto $resource avrà la capacità di richiamare la funzionalità necessaria esposta dagli endpoint REST.

L'esempio seguente richiama l'URL dell'endpoint: http://example/events/1

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

Nell'esempio sopra vengono eseguite le seguenti operazioni

1. Quando si definisce l'applicazione Angular, viene creato un servizio utilizzando l'istruzione "DemoApp.services" dove DemoApp è il nome assegnato alla nostra applicazione Angular.
2. Per creare i dettagli di questo nuovo servizio viene utilizzato il metodo .factory.
3. "Entrata" è il nome che stiamo dando al nostro servizio e può essere qualsiasi nome tu voglia fornire.
4. In questo servizio, stiamo creando una funzione che chiamerà l'API $resource
5. $resource('/example/Event/:1). La funzione $resource è un servizio che viene utilizzato per chiamare un endpoint REST. L'endpoint REST è normalmente un URL. Nella funzione sopra, stiamo utilizzando l'URL (/example /Event/:1) come endpoint REST. Il nostro endpoint REST(/example /Event/:1) denota che c'è un'applicazione Event che si trova sul nostro sito principale "example". Questa applicazione Event è sviluppata utilizzando un'architettura basata su REST.
6. Il risultato della chiamata di funzione è un oggetto della classe di risorsa. L'oggetto risorsa ora avrà le funzioni ( get() , query() , save() ,remove(), delete() ) che possono essere richiamate.

Passo 4) Ora possiamo utilizzare i metodi restituiti nel passaggio precedente (che sono get() , query() , save() ,remove(), delete() ) nel nostro controller.

Nello snippet di codice seguente, utilizziamo la funzione get() come esempio

Diamo un'occhiata al codice che può utilizzare la funzione 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);
  });

Nel passaggio precedente,

• La funzione get() nello snippet precedente invia una richiesta GET a /example/Event/:1.
• Il parametro:1 nell'URL viene sostituito con $scope.id.
• La funzione get() restituirà un oggetto vuoto che verrà popolato automaticamente quando i dati effettivi provengono dal server.
• Il secondo argomento di get() è un callback che viene eseguito quando i dati arrivano dal server. Il possibile output dell'intero codice sarebbe un oggetto JSON che restituirebbe l'elenco degli eventi esposti dal sito Web "esempio". Di seguito è mostrato un esempio di ciò che può essere restituito

  {
  { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
  { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
  { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}
  
  }

Interazioni del server di basso livello con $http

$http è un altro servizio Angular JS utilizzato per leggere dati da server remoti. La forma più popolare di dati letti dai server sono i dati in formato JSON.

Supponiamo di avere a PHP Pagina ( http://example/angular/getTopics.PHP ) che restituisce i seguenti dati JSON

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

Diamo un'occhiata al codice AngularJS utilizzando $http, che può essere utilizzato per ottenere i dati di cui sopra dal 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>

Nell'esempio sopra

1. Stiamo aggiungendo il servizio $http alla nostra funzione Controller in modo da poter utilizzare la funzione "get" del servizio $http.
2. Ora stiamo utilizzando la funzione get dal servizio HTTP per ottenere gli oggetti JSON dall'URL http://example /angular/getTopics.PHP
3. Sulla base dell'oggetto 'risposta', stiamo creando una funzione di callback che restituirà i record di dati e successivamente li memorizzeremo nell'oggetto $scope.
4. Possiamo quindi utilizzare la variabile $scope.names dal controller e usarla nella nostra vista per visualizzare gli oggetti JSON di conseguenza.

Come recuperare i dati da SQL e MySQL Server che utilizza AngularJS

Angular può anche essere utilizzato per recuperare dati da un server in esecuzione MySQL oSQL.

L'idea è che se hai una pagina PHP che si connette a un file MySQL database o un Asp.Net pagina che si collega a un MS SQL server, è necessario assicurarsi che sia la pagina PHP che quella ASP.Net visualizzino i dati in formato JSON.

Di seguito è riportato il processo passo dopo passo su come recuperare dati da SQL e MySQL Server che utilizza AngularJS.

Supponiamo di avere un sito PHP (http://example /angular/getTopics.PHP) che forniscono dati da a MySQL o database SQL.

Passo 1) Prendi i dati da a MySQL banca dati
Il primo passo è assicurarsi che la pagina PHP prenda i dati da a MySQL database e fornisce i dati in formato JSON.

Passo 2) Ottieni i dati JSON utilizzando il servizio $http
Scrivi il codice simile mostrato sopra per utilizzare il servizio $http per ottenere i dati JSON.

Diamo un'occhiata al codice AngularJS utilizzando $http che può essere utilizzato per ottenere i dati di cui sopra dal 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>

Passo 3) Visualizza i dati nella tua vista utilizzando il file direttiva ng-repeat

Di seguito utilizziamo la direttiva ng-repeat per esaminare ciascuna delle coppie chiave-valore negli oggetti JSON restituiti dal metodo "get" del servizio $http.

Per ogni oggetto JSON, visualizziamo la chiave che è "Nome" e il valore è "Descriptione”.

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

Sintesi

• La forma completa di AJAX è Asynchronous JavaCopione e XML.
• Abbiamo dato un'occhiata a cosa a RIPOSANTE l'architettura è, che non è altro che una funzionalità esposta dalle applicazioni web basate sui normali verbi HTTP GET, POST, PUT e DELETE.
• L'oggetto $resource viene utilizzato con Angular per interagire con le applicazioni web RESTFUL ad alto livello, il che significa che invochiamo solo la funzionalità esposta dall'applicazione web ma non ci preoccupiamo di come viene implementata la funzionalità.
• Abbiamo anche esaminato il servizio $http che può essere utilizzato per ottenere dati da un'applicazione web. Ciò è possibile perché il servizio $http può funzionare con le applicazioni web a un livello più dettagliato.
• Grazie alla potenza del servizio $http, questo può essere utilizzato per ottenere dati da a MySQL o MS SQL Server tramite un'applicazione PHP. I dati possono quindi essere visualizzati in una tabella utilizzando la direttiva ng-repeat.