Chiamate Http 2421 Visite) AngularJs
L’oggetto $http di AngularJs è lo strumento che il framework ci offre per contattare il server tramite chiamate Ajax. Il suo utilizzo è relativamente semplice:
Innanzitutto aggiungiamo l’oggetto ad uno dei nostri oggetti (esempio una factory)
app.factory("angularFactory", ['$http', function ($http)
Ora è possibile utilizzarlo in uno dei nostri metodi.
Ad esempio
$http.get("/Home/GetUsers");
Questo metodo, ad esempio, esegue una GET verso un url restituendo quella che viene chiamata HttpPromise.
Questo perché, come saprete, le chiamate Ajax sono asincrone, quindi il metodo prosegue la sua esecuzione dopo questa istruzione. Questo oggetto ha un metodo chiamato then che riceve come parametri 2 funzioni:
-
Eseguita al termine della chiamata
-
Eseguita in caso di errore
$http.get("/Home/GetUser?id=1”).then(
function (response)
{
},
function(response)
{
});
Entrambe le funzioni restituiscono un oggetto strutturato
L’oggetto response contiene le seguenti informazioni
-
data : I dati restituiti dal server
-
status : lo stato (200, 404, 500 etc)
-
headers : funzione per ottenere l’header (gli si passa la chiave e verrà restituito il valore)
-
config : configurazione usata per la chiamata
-
statusText : una descrizione testuale di ciò che è successo (esempio “Ok” se la lettura è andata bene)
L’oggetto data conterrà ciò che il server avrà restituito. Potrà essere quindi una pagina html, un dato json, un’immagine, etc. Dovrete quindi decidere che farne.
Il comando post invece esegue una chiamata POST al server. Qui, anziché concatenare i parametri nell’url, potrete passare dei dati Json
$http.post("/Home/SaveUser", { name:”Jack”,surname:”Johnson”}).then(
function (response) {
},
function (response) {
});
Come vedete il secondo parametro è un oggetto Json contenente name e surname.
Come utilizzo questi 2 metodi? Semplicemente all’indirizzo che verrà chiamato ci dovrà essere qualcosa in grado di leggere e rispondere alle nostre chiamate.
In Asp.Net MVC basta semplicemente una Action all’interno di un controller
[HttpGet]
public ActionResult GetUser(int id)
{
…………………………
return Json(user, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult SaveUser(ClassUser user)
{
……………………………
return Json(true);
}
Potete anche usare WebApi o gli equivalenti di altri linguaggi (Java, Php, NodeJs etc).
Potete usare anche metodi put, delete, etc (non esiste solo GET e POST). Infine, se volete avere il controllo completo
$http({
url: url,
method: 'POST',
data: data,
})
.success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
Utilizzando direttamente $http potrete decidere metodo, url e tutta una serie di parametri. I principali
-
method: (GET,POST, etc)
-
url : path del percorso
-
params: mappa chiave/valore che verrà concatenate all’url
-
data: dati in format Json che arriveranno al Server
-
headers: opzionale, per inviare header al server (mappa di stringhe)
-
timeout : millisecond dopo cui la richiesta andrà in timeout o addirittura un oggetto Promise in cui potrete decidere quando lanciare il timeout (ad esempio potrete creare un pulsante che annulli una richiesta quando sta durando troppo)
C’è ne sono ovviamente altri che potrete vedere sull’Help online di AngularJs
Vi lascio una semplicissima applicazione MVC5 che salva e legge dati nella sessione.
- AngularJs.zip 9928 KB) Download File