Realizzare un client REST con Angular.js

Dopo aver visto nel precedente articolo come costruire un server che espone un API di tipo RESTful, in questo articolo vedremo come realizzare un client web che usi il nostro servizio. Per far ciò quello che ci serve è essere in grado di effettuare delle richieste HTTP asincrone dalla nostra pagina web. Questo modalità di sviluppo di applicazioni web è conosciuta con l’acronimo Ajax che sta per Asynchronous JavaScript and XML, anche se in realtà il formato dei dati scambiati non deve essere necessariamente quest’ultimo.

A questo scopo si possono usare molte tecnologie differenti come ad esempio la funzione $.ajax() della libreria jQuery, oppure l’oggetto Ajax.Updater del framework Prototype.js. In questo articolo però useremo il framework Angular.js che è uno dei più completi ed in voga al momento tra la miriade di framework Javascript che stanno emergendo. Per inizire possiamo quindi scaricare il file angular.min.js dal sito ufficiale linkato in precendenza e spostarlo all’interno della nostra cartella di lavoro. A questo punto creiamo un nuovo file HTML con il seguente contenuto che spiegheremo successivamente:

<html ng-app="todo-app">
  <head>
    <title>Client REST con Angular.js</title>
    <script src="./angular.min.js"></script>
    <script src="./todo-app.js"></script>
  </head>
  <body ng-controller="main-ctrlr">
    <p>
      <h1>Cose da fare:</h1>
      <ul><li ng-repeat="todo in todos">
        {{todo.content}}
      </li></ul>
   </p>
 </body>
</html>

Come possiamo vedere si tratta di semplice codice HTML a cui sono state aggiunti degli “ornamenti”. In particolare nel tag <html> è stata aggiunta la direttiva ng-app=”todo-app” che specifica al nostro framework quale modulo javascript (che vedremo in seguito) richiamare, e al tag <body> è stato aggiunto ng-controller=”main-ctrlr” che specifica all’interno della nostra modulo quale funzione javascript gestisce quella porzione di pagina (nel nostro caso tutta). Successivamente è stata usata anche la direttiva ng-repeat per far si di avere un elemento <li> per ogni oggetto fornito dal nostro server di cui poi viene visualizzato il contenuto con {{todo.content}}. Vediamo ora il nostro codice javascript così sarà tutto più chiaro:

var app = angular.module('todo-app', []);
    app.controller('controller', function($scope, $http) {
        $http.get('http://localhost:4567/todo-app/todos').then(function(resp) {
   	    $scope.todos = resp.data; });
});

Come possiamo vedere in questo breve frammento dichiariamo il nostro modulo todo-app che contiene il controller main-ctrlr, in cui non facciamo altro che fare una richiesta HTTP di tipo GET all’indirizzo del nostro server che restituisce l’elenco di tutti i promemoria contenuti nel nostro database. Dopodichè assegniamo la risposta del server alla variabile todos che fa parte del nostro $scope, che altro non è che l’insieme di tutti i dati gestiti dal framework referenziabili all’interno del nostro HTML.

A questo punto possiamo già provare se tutto funziona e se abbiamo dei dati nel nostro database vedremo comparire l’elenco di tutte le nostre cose da fare. Da notare che Angular.js ha provveduto da solo ha fare il parsing dei nostri dati che sono in formato JSON. Andando avanti, il prossimo passo è fare in modo di poter aggiungere un elemento alla nostra lista direttamente dalla nostra pagina web. Per far questo aggiungiamo il seguente frammento in fondo al nostro HTML in cui creiamo una form per l’immissione dei nostri promemoria:

Inserisci un promemoria:
  <form>
    <input type="text" ng-model="contenuto">
    <input type="submit" ng-click="add(contenuto)">
</form>

Da notare la direttiva ng-model e ng-click che indicano al framework rispettivamente la variabile in cui inserire l’input dell’utente e la funzione da chiamare al click sul pulsante. Per completare aggiungiamo all’interno nostro main-ctrlr le seguenti righe:

    $scope.add = function(contenuto) {
        $http.post('http://localhost:4567/todo-app/todos', {content: contenuto});
        window.location.reload();
    }

In questo modo effettuiamo una richiesta di tipo POST passando come parametro la stringa immessa dall’utente che il nostro server memorizzerà nel database e ricarichiamo la pagina per vedere immediatamente la lista aggiornata.

Per ora è tutto, nei prossimi articoli vedremo come realizzare un client per il nostro servizio sotto forma di applicazione mobile ibrida, ovvero sviluppata con gli strumenti del web ma pacchettizzata come se fosse un’applicazione nativa distribuita attraverso l’App store o Google Play.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *