AngularJS e JSON

Mattepuffo's logo
AngularJS e JSON

AngularJS e JSON

Programmazione, Javascript - AJAX

Bhe devo dire che ormai Javascript mi sta piacendo sempre di più come linguaggio, visto anche la quantità di framework e librerie in giro.

Oggi introduciamo AngularJS, ottimo framework per Javscript sponsorizzato direttamente da Google!

AngularJS si ispira al pattern MVC (Model-View-Controller) come altri concorrenti; quello che fa di questo framework quello vincente, almeno per me, è la semplcitià e il poco codice da usare.

Qui vedremo come reperire i dati in formato JSON e metterli sulla pagina HTML, senza fare uso di linguaggi lato server (si presuppone che abbiate già una fonte JSON).

Questa la pagina web di base:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mattepuffo's Books</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body ng-app="listBooksApp">
        <div ng-controller="BooksCtrl">
            <ul>
                <li ng-repeat="book in books">
                    {{book.title}}
                </li>
            </ul>
        </div>
    </body>
</html>

Come vedete per usare AngularJS dobbiamo includere solo la sua libreria; non abbiamo bisogno di jQuery o di altro.

A questo punto vediamo lo script JS:

var app = angular.module('listBooksApp', []);

app.controller("BooksCtrl", function ($scope, $http) {
    $http.get('all_books.php').
            success(function (data, status, headers, config) {
                $scope.books = data;
            }).
            error(function (data, status, headers, config) {
                alert('Impossibile reperie la lista!');
            });
});

Prima inizializiamo la nostra app, che richiamiamo nel tag body della pagina con la direttiva ng-app.

Sotto creiamo un controller che richiamiamo con la direttiva ng-controller; e già qua vediamo due importanti argomenti: $scope e $http.

$scope indica il contesto in cui vengono salvati i dati ed in cui vengono valutate le espressioni che poi si vedranno nella pagina (la view).

In generale possiamo dire che ogni elemento di una view è associato ad uno scope; quindi lo scope è quello che fa da collante tra il controller e la view.

$http, invece, è il "servizio" con cui è possibile interagire con server e web-service tramite HTTP.

Questo servizio supporta i seguenti metodi HTTP:

  • post
  • get
  • head
  • put
  • delete
  • jsonp (utile per richieste cross-origin che di default non sono ammesse in Javascript)

Qui facciamo una richiesta GET ad un service che restituisce i dati in formato JSON.

In caso di successo i dati vengono assegnati a $scope.books, che poi richiamiamo nella pagina attraverso ng-repeat.

Il parsing viene fatto usando le doppie parentesi graffe {{}}; il resto è un classico modello di OOP (per AngularJS lo scope è un oggetto a tutti gli effetti).

Come vedete il codice usato è poco, non abbiamo fatto cicli (ci ha pensato ng-repeat), e soprattutto non abbiamo fatto iniezioni di HTML.

Lo trovo molto interessante, e facile se ci si perde qualche minuto iniziale.

Altre risorse utili le trovate qui: w3schools AngularJS Tutorial.

Enjoy!

Condividi

Commentami!