AJAX è la forma abbreviata di JavaScript e XML asincrono. AJAX è stato progettato principalmente per aggiornare parti di una pagina Web, senza ricaricare l'intera pagina.
Il motivo per progettare questa tecnologia era ridurre il numero di round trip effettuati tra il client e il server e il numero di aggiornamenti dell'intera pagina che si verificavano ogni volta che un utente richiedeva determinate informazioni.
AJAX ha consentito di aggiornare le pagine Web 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.
In questo tutorial imparerai-
- Interazioni di alto livello con i server che utilizzano $ resource
- Interazioni con il server di basso livello con $ http
- Recupero dei dati da un server che esegue SQL e MySQL
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 merito alla funzionalità e non di ciò che esattamente il server fa in dettaglio rispetto a questa funzionalità.
Ad esempio, se il server ospitava un'applicazione che conserva le informazioni sui dipendenti di una determinata azienda, il server potrebbe esporre funzionalità a client come GetEmployeeDetails, SetEmployeeDetails, ecc.
Quindi, ad un livello elevato, sappiamo cosa possono fare queste due funzioni e possiamo invocarle utilizzando la proprietà $ resource. Ma poi non conosciamo esattamente i dettagli delle funzioni "GetEmployeeDetails" e "SetEmployeeDetails" e come vengono implementate.
La spiegazione sopra spiega quella che è nota come architettura basata su REST.
- REST è noto come Representational State Transfer, un'architettura seguita in molti moderni sistemi basati sul web.
- Significa che puoi utilizzare i normali verbi HTTP di GET, POST, PUT e DELETE per lavorare con un'applicazione basata sul web.
Quindi supponiamo di avere un'applicazione web che mantiene un elenco di eventi.
Se volessimo accedere 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'intero elenco di eventi se l'applicazione segue un'architettura basata su REST.
Quindi, ad esempio, se c'era un evento con ID 1, possiamo ottenere i dettagli di questo evento tramite l'URL. http: // esempio / eventi / 1
Qual è l'oggetto $ resource
L'oggetto $ resource in Angular aiuta a lavorare con i server che servono le applicazioni su un'architettura basata su REST.
La sintassi di base dell'istruzione @resource insieme alle varie funzioni sono fornite di seguito
Sintassi dell'istruzione @resource
var resource Object = $resource(url);
Una volta che hai a portata di mano resourceObject, puoi usare 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 usato per effettuare la chiamata POST standard.
3. query ([params], [success], [error]) - Può essere utilizzato per effettuare la chiamata GET standard, ma come parte della risposta viene restituito un array.
4. remove ([params], postData, [success], [error]) - Può essere usato per effettuare la chiamata DELETE standard.
In tutte le funzioni fornite di seguito il parametro "params" può essere utilizzato 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 as
- get (' http: // example / events ', '{Topic:' Angular '}')
- L'URL http: // example / events? Topic = Angular viene richiamato come parte della funzione get.
Come utilizzare la proprietà $ resource
Per utilizzare la proprietà $ resource, è necessario seguire i seguenti passaggi:
Passaggio 1) Il file "angular-resource.js" deve essere scaricato dal sito Angular.JS e deve essere posizionato nell'applicazione.
Passaggio 2) Il modulo dell'applicazione deve dichiarare una dipendenza dal modulo "ngResource" per poter utilizzare $ resource.
Nell'esempio seguente, stiamo chiamando il modulo "ngResource" dalla nostra applicazione "DemoApp".
angular.module(DemoApp,['ngResource']); //DemoApp is our main module
Passaggio 3) Chiamare la funzione $ resource () con l'endpoint REST, come mostrato nell'esempio seguente.
In tal caso, l'oggetto $ resource avrà la capacità di richiamare la funzionalità necessaria esposta dagli endpoint REST.
L'esempio seguente chiama 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
-
Quando si definisce l'applicazione Angular, viene creato un servizio utilizzando l'istruzione "DemoApp.services" dove DemoApp è il nome dato alla nostra applicazione Angular.
-
Il metodo .factory viene utilizzato per creare i dettagli di questo nuovo servizio.
-
"Entry" è il nome che diamo al nostro servizio, che può essere qualsiasi nome tu voglia fornire.
-
In questo servizio, stiamo creando una funzione che chiamerà l'API $ resource
-
$ risorsa ('/ esempio / Evento /: 1).
La funzione $ resource è un servizio che viene utilizzato per chiamare un endpoint REST. L'endpoint REST è normalmente un URL. Nella funzione sopra, stiamo usando l'URL (/ example / Event /: 1) come nostro endpoint REST. Il nostro endpoint REST (/ example / Event /: 1) denota che esiste un'applicazione Event che si trova sul nostro sito principale "example". Questa applicazione Event è sviluppata utilizzando un'architettura basata su REST.
-
Il risultato della chiamata alla funzione è un oggetto della classe di risorse. L'oggetto risorsa ora avrà le funzioni (get (), query (), save (), remove (), delete ()) che possono essere invocate.
Passaggio 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, stiamo usando 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 viene 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. L'eventuale output dell'intero codice sarebbe un oggetto JSON che restituirebbe l'elenco degli eventi esposti dal sito web "esempio".
Di seguito è riportato 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 con il server di basso livello con $ http
$ Http è un altro servizio JS angolare che viene utilizzato per leggere i dati da server remoti. La forma più popolare di dati letti dai server sono i dati in formato JSON.
Supponiamo di avere una pagina PHP ( 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 usando $ http, che può essere utilizzato per ottenere i dati di cui sopra dal server
Nell'esempio sopra
- Stiamo aggiungendo il servizio $ http alla nostra funzione Controller in modo da poter utilizzare la funzione "get" del servizio $ http.
- Stiamo ora utilizzando la funzione get dal servizio HTTP per ottenere gli oggetti JSON dall'URL http: // example /angular/getTopics.PHP
- In base all'oggetto "risposta", stiamo creando una funzione di callback che restituirà i record di dati e successivamente li stiamo memorizzando nell'oggetto $ scope.
- Possiamo quindi utilizzare la variabile $ scope.names dal controller e utilizzarla nella nostra vista per visualizzare di conseguenza gli oggetti JSON.
Recupero dei dati da un server che esegue SQL e MySQL
Angular può anche essere utilizzato per recuperare dati da un server che esegue MySQL o SQL.
L'idea è che se si dispone di una pagina PHP che si connette a un database MySQL o di una pagina Asp.Net che si connette a un database di server MS SQL, è necessario assicurarsi che sia la pagina PHP che la pagina ASP.Net eseguano il rendering dei dati in formato JSON.
Supponiamo di avere un sito PHP ( http: // example /angular/getTopics.PHP ) che serve dati da un database MySQL o SQL.
Passaggio 1) Il primo passaggio è assicurarsi che la pagina PHP prenda i dati da un database MySQL e serva i dati in formato JSON.
Passaggio 2) Scrivi il codice simile mostrato sopra per utilizzare il servizio $ http per ottenere i dati JSON.
Diamo un'occhiata al codice AngularJS usando $ http che può essere utilizzato per ottenere i dati di cui sopra dal server
Passaggio 3) Eseguire il rendering dei dati nella vista utilizzando la 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, stiamo visualizzando la chiave che è "Nome" e il valore è "Descrizione".
{{x.Name}} {{x.Description}}
Sommario:
- Abbiamo esaminato cos'è un'architettura RESTFUL, che non è altro che una funzionalità esposta dalle applicazioni web basate sui normali verbi HTTP di 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 la funzionalità è implementata.
- 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.
- A causa della potenza del servizio $ http, questo può essere utilizzato per ottenere dati da MySQL o MS SQL Server tramite un'applicazione PHP. I dati possono quindi essere visualizzati in una tabella utilizzando la direttiva ng-repeat.