AngularJS: server communication

AngularJS Server Communication

Intro
● AngularJS web apps sono interamente client-side
applications!
● Senza un back end saremmo limitati a mostrare e
utilizzare solo le info presenti a load time.
● Angularjs fornisce servizi per la comunicazione con il
server:
o $http;
o $resource;
● Ci sono inoltre servizi di terze parti:
o restangular

$http
$http è un servizio che facilita la comunicazione con il
server via
● XMLHttpRequest;
● JSONP.
E’ un wrapper del XMLHttpRequest object.

$http
// Simple GET request example
$http({
method: 'GET',
url: '/api/users'
})
.success(function(data, status, headers, config)
{
// this callback will be called
asynchronously when the response is available
})
.error(function(data, status, headers, config) {
// called asynchronously if an error
occurs or server returns response with an error
status
});
$http({
method: 'GET',
url: '/api/users'
})
.then(function(resp) {
// resp is response object
}, function(resp){
// resp with error
});

$http - Shortcut Methods
● get
o $http.get('/someUrl', config)
● post
o $http.post('/someUrl', someObject, config)
● delete
o $http.delete('/someUrl', config)
● ...

$http - Config
● {params: {param1:value, .., paramN:value}}
● {cache: boolean}
● …..
$http.get('/api/getUser’, {params: {id: $idUtente}})
.success(function(data, status, headers, config) {
})
.error(function(data, status, headers, config) {
});

$http - Cache
Di default il servizio $http non usa la cache.
E’ possibile impostare la cache per
● request
o $http.get('/api/getUser’, {cache: true})
● per applicazione
o .config(function($httpProvider, $cacheFactory) {
$httpProvider.defaults.cache = true
}
Default cache: $cacheFactory

$http - Custom Cache
// Custom cache request example
var lru = $cacheFactory('lru', {
capacity: 20
});
// $http request
$http.get('/api/users', { cache: lru })
.success(function(data) {})
.error(function(data) {});
// Custom cache config example
angular.module('myApp')
.config(function($httpProvider, $cacheFactory) {
$httpProvider.defaults.cache =
$cacheFactory('lru', {
capacity: 20
});
});

Web App sempre più RESTful
● L’approccio REST è venuto alla ribalta negli ultimi anni
ed è attualmente molto usato
● RESTful VS. SOAP - REST propone una visione del
Web incentrata sul concetto di risorsa mentre i SOAP
Web Service mettono in risalto il concetto di servizio.
● Angularjs propone il servizio $resource

RESTful
● Apparso la prima volta nel 2000 nella tesi di Roy
Fielding
● Definisce una serie di principi:
o Identificazione delle risorse
o Utilizzo esplicito dei metodi HTTP
o Risorse autodescrittive
o Collegamenti tra risorse
o Comunicazione senza stato
● Il WWW è un esempio concreto di questi principi

Servizi RESTful
● In una architettura REST è definita una mappatura uno ad uno tra
le tipiche operazioni CRUD e i metodi http
o POST - Create
o GET - Read
o PUT - Update
o DELETE - Delete
● Un oggetto è identificabile univocamente attraverso una URI
● Nessun vincolo sulle modalità di rappresentazione di una risorsa
● Diversi formati di rappresentazione: XML, JSON, HTML, … .

$resource
$resource è una factory che incapsula i servizi $http e
aggiunge supporto per l’interazione con i servizi RESTful
server-side
Richiede
● L’importazione della lib angular-resource.js
● La definizione della dipendenza dal modulo ngResource
o angular.module('myApp', ['ngResource']);

$resource
Sintassi
$resource(url, [paramDefaults], [actions], options);
Dove:
● url può essere parametrizzato mediante il simbolo : Es:
https://api.mongolab.com/api/1/databases/angworkshop/collections/contat
to/:id
● actions è un hash che permette di indicare comportamenti custom che estendono le action di
default di resource.
{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}

$resource - [actions]
● action – {string} – Nome dell’azione
● method – {string} – Case insensitive HTTP method (e.g. GET, POST, PUT, DELETE, JSONP,
etc).
● params – {Object} – Set opzionale di parametri..
● isArray – {boolean} – True se il result è un array
● ...
{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}

$resource - EXAMPLE
// Definizione
contattoModel.factory('Contatto', ['$resource',
function($resource){
return
$resource('https://api.mongolab.com/api/1/databases/angworkshop/collections/contatto/:id', {},
{
// actions
show: { method: 'GET', params: {apiKey:'WLKPfaC3ztzHpxYtyTD85D7-7iXaO4dj', id: '@id'} },
update: { method: 'PUT', params: {apiKey:'WLKPfaC3ztzHpxYtyTD85D7-7iXaO4dj', id: '@id'} },
delete: { method: 'DELETE', params: {apiKey:'WLKPfaC3ztzHpxYtyTD85D7-7iXaO4dj', id: '@id'} },
create: { method: 'POST', params: {apiKey:'WLKPfaC3ztzHpxYtyTD85D7-7iXaO4dj'} }
});
}]);

$resource - EXAMPLE
// Uso
Contatto.create($scope.contatto,
function(response){
// success
console.log('Successo', response);
$scope.showSuccess = true;
},function(response){
// error
console.log('Error', response);
$scope.showDanger = true;
});
// Uso con $promise
Contatto.create($scope.contatto)
.$promise
.then(function(response) {
// success
console.log('Successo', response);
$scope.showSuccess = true;
})
.then(function(response) {
// error
tconsole.log('Error', response);
$scope.showDanger = true
});

$resource - Cache
Analoga alla cache $http. Può assumere i valori:
● false/true - $cacheFactory
● custom cache

Restangular
Libreria esterna.
Si propone di rendere ancora più semplice la
comunicazione con il mondo esterno.
Richiede
● L’importazione della lib restangular.js
● La definizione della dipendenza dal modulo restangular
o angular.module('myApp', ['restangular']);

Perché Restangular
The idea is that Restangular can also handle all of your URLs, so that you don't have to know anything about them.
Suppose that you have something like this for cars : /users/123/cars/456
In $resource, You'd have to construct that URL manually and you'd also have to construct the $resource object for this manually.
Restangular helps you in this by "remembering" the URLs.
So if you do in some place
Restangular.one("users", 123).get()
.then(function(user) {
$scope.user = user;
});
// Some other code //Automatically does the request to
/users/123/cars as it remembers in which object you're asking it.
$scope.user.getList('cars')
Martin Gontovnikas www.stackoverflow.com

Approfondimenti: promise
Contesto:
● chiamate asincrona
Alternative
● callback

// Callback example
asyncCall(function(err, data1){
if(err) return callback(err);
anotherAsyncCall(function(err2, data2){
if(err2) return calllback(err2);
oneMoreAsyncCall(function(err3, data3){
if(err3) return callback(err3);
// and so on
});
});
});
Problemi callback:
● una scarsa leggibilità del
codice
● difficoltà di composizione delle
callback
● difficoltà di gestione degli errori
e di debug

Sono oggetti che rappresentano il risultato di una chiamata di funzione
asincrona.
Stato:
● pending è lo stato in cui non è stato ancora ottenuto il risultato della
chiamata asincrona
● resolved in questo stato la chiamata asincrona ha prodotto un risultato

// promise example
asyncCall()
.then(function(data1){
// do something...
return anotherAsyncCall();
})
.then(function(data2){
// do something...
return oneMoreAsyncCall();
}).fail(function(err) {
// handle any error resulting from any of the above
calls
})
.done();
Non nativamente supportate da
javascript
Bisogna utilizzare la libreria “Q”
Vantaggi:
● codice più leggibile

Approfondimenti: XMLHttpRequest
● Insieme di API Javascript disegnato da Microsoft e
adottato da Google, Apple e Mozilla
● Consentono di scambiare dati con il server senza dover
ricaricare l’intera pagina
● A discapito del nome può essere usato per recuperare
diversi formati di file (es. JSON)

Approfondimenti: JSON
Acronimo di JavaScript Object Notation, è un formato
adatto all'interscambio di dati fra applicazioni client-server
// JSON example
{name1: value, name2: [{nameAr1: value}, {nameAr2:value}]}

Approfondimenti: JSONP
Same-domain-policy impedisce a script scaricati dalla rete di
accedere, tramite qualsiasi tipo di richiesta HTTP, a risorse che
si trovano su server diversi rispetto a quello iniziale che ha
inviato lo script.
JSONP Acronimo di JavaScript Object Notation with Padding è
una tecnica che permette di ovviare a questa limitazione
permettendo a un browser di accedere, ovviamente con alcuni
limiti, a risorse remote indipendentemente dall’host di origine.

Approfondimenti: Service, Factory e Provider
● I tre servizi sono in realtà un unico servizio: provider
● factory e service sono implementazioni differenti di
provider
● vengono registrati come singleton all'interno
dell'applicazione AngularJS

Service
Dal punto di vista sintattico un Services restituisce un oggetto singleton che rimane in vita fino alla
chiusura del browser.
Sintassi:
mymodule.service('serviceName', function([d1,...,dn]))
dove
● function([d1,..,dn]) è il costruttore della funzione che verrà istanziata;
● e [d1,...,dn] è un array di 0 o più dipendenze.
.

Service - Example
La più semplice implementazione di provider, rappresenta l'istanza di una funzione creata usando
l'operatore new
angular.module(‘app', [])
.service(‘myService’, function(a){
...
}]);
Angular lo inizializza così: var myServiceSingleton = new myService();

Factory
Una Factory è una funzione responsabile della creazione di un nuovo Servizio.
La sintassi per definire una Factory è la seguente
mymodule.factory(“serviceID”, function([d1,...,dn]))
dove
● function([d1,...,dn]) è la funzione che angular richiamerà per creare una nuova istanza
del servizio;
Un classico esempio d’uso di una Factory è per creare un nuovo servizio
che dipende da $resource.

Factory - Example
angular.module('app',[])
.factory('myFactory', ['d1', function(d1){
return Service()
}]);
Angular lo inizializza così: var myFactorySingleton = myFactory();

Provider
Il provider è definito come un tipo custom configurabile in fase di configurazione che implementa il
metodo $get. Questo metodo altro non è che una funzione Factory.
La sintassi per definire un provider è la seguente:
mymodule.provider(“providerName”, function([d1,...,dn]))
dove
● f([d1,...,dn]) è una funzione che crea una nuova istanza di un servizio;
Nel pratico una funzione Provider è utile per isolare il Service creato dal resto dell’applicazione e
consentire l’intercambiabilità di Service che implementano la stessa interfaccia o il comportamento
dello stesso in modo configurabile e trasparente per il resto dell’applicazione.

Provider - Example
angular.module('app',[]).provider('myProvider', function() {
var PREFIX = 'https://api.mongolab.com/api/angworkshop/collections/';
// API accessibili in fase di configurazione
this.setPrefix = function setPrefix(value) {
PREFIX = value;
};
this.$get = function myProviderFactory() {
return return {
say = function say(msg) {
return PREFIX + msg;
}
};
};});
Angular lo inizializza così var myProviderSingleton = myProvider();

AngularJS: server communication

More Related Content

What's hot (20)

Similar to AngularJS: server communication (20)

AngularJS: server communication

Editor's Notes