Scrivere un app Angular è un gioco da ragazzi, ovviamente giorno dopo giorno le conoscenze aumentano tanto da migliorar e rendere più sicuro il proprio codice, quello che seguirà in questo post e nei prossimi sono tutte le fasi, dalla più “spaghetti code” alla più sistemata di come strutturare un app Angular

Seconda Fase: Services, Filtri e librerie esterne

Nello scorso step abbiamo visto come far partire un app Angular base, quali sono i componenti principali e come dare un minimo di struttura, in questo post vedremo come usare e creare dei filtri Angular, come prendere delle informazioni dall’esterno della nostra applicazione (api o json a parte) e l’utilizzo di moduli esterni come Bootstrap tramite Bower

Services

I Services in Angular sono dei componenti che vengono utilizzati per implementare la logica dell’applicazione, ovvero tutte quelle funzionalità che si occupano di elaborare e/o recuperare i dati che andremo a visualizzare sulle view attraverso il controllers, nel nostro caso lo utilizzeremo per prendere l’array degli utenti dal un file JSON esterno.
Iniziamo a creare il nostro JSON all’interno della cartella app/external:

[{
 “name”: “Riccardo”,
 “surname”: “Lorio”,
 “fullName”: “Riccardo Lorio”,
 “age”: “14”,
 “email”: “riccardo@lorio.it”
}, {
 “name”: “Filippo”,
 “surname”: “Lorio”,
 “fullName”: “Filippo Lorio”,
 “age”: “15”,
 “email”: “filippo@lorio.it”
}, {
“name”: “Roberto”,
“surname”: “Lorio”,
“fullName”: “Roberto Lorio”,
“age”: “44”,
“email”: “roberto@lorio.it”
}, {
 “name”: “Ludovico”,
 “surname”: “Lorio”,
 “fullName”: “Ludovico Lorio”,
 “age”: “35”,
 “email”: “ludovico@lorio.it”
}]

Adesso creiamo il nostro Services dentro il file JS di users dopo la definizione del controllers:

.controller(‘UsersCtrl’, function($scope, Users) {....})
.factory(“Users”, function($http) {
 return {
 getAll: function(success, error) {
    $http.get(‘external/users.json’).success(success).error(error);
 }
 };
});

Adesso dentro il controllers “UsersCtrl” andiamo a definire cosa succederà all’interno della nostra view quando richiediamo tutti gli utenti, per fare in modo da “attaccare allo scope” gli utenti presi dal JSON esterno

.controller(‘UsersCtrl’, function($scope, Users) {
 Users.getAll(function(data) { 
 $scope.users = data; 
}, 
function(err) { 
alert(err); 
});
})

ora aprendo la nostra applicazione angular vedremo come senza cambiare nulla lato html riusciremo a vedere come è stato semplice prendere i dati dei nostri utenti da una fonte esterna, ovviamente questo metodo funziona anche con api terze parti o nostre basterà cambiare il path della chiamata e , se serve, il tipo di chiamata, ad esempio:

$http.get(‘v1/api/users’)
$http.post(‘v1/api/users’, obj)
$http.delete(‘v1/api/users/’+id+’’)
$http.post(‘v1/api/users’+id+’’, obj)

Filtri

I filtri Angular sono componenti con il compito di formattare o comunque applicare una elaborazione al risultato di una espressione. Il loro utilizzo all’interno di una view è abbastanza semplice ed è basato sull’uso dell’operatore pipe (|), come nel seguente esempio:

 <td>{{user.fullName | uppercase}}</td>

un altro filtro importante è il filter che utilizzeremo per creare una veloce ricerca nella nostra applicazione tutto nella view senza toccar codice javascript ma utilizzando solamente i costrutti base di Angular
Iniziamo aggiungendo sopra la nostra tabella una campo di ricerca assegnandogli una variabile nello scope con l’ ng-model:

 Filtra: <input type=”text” ng-model=”filtro”>ù

e andiamo a inserire il filtro all’interno dell’ ng-repeat in modo da non visualizzare le righe della tabella che non combaciano con il nostro filtro

 <tr ng-repeat=”user in users | filter:filtro”>
o
<tr ng-repeat=”user in users | filter:{email:filtro}”>
nel caso volessimo applicare il filtro a un solo campo.  

adesso scrivendo all’interno del nostro filtro potremmo vedere come in tempo reale Angular modifica e aggiorna la tabella sotto creata.

Just 2 line of code? that’s great!! :D

Librerie esterne

Per l’uso di librerie esterne, che siano JQuery, Angualar o banalmente css consiglio sempre l’utilizzo di bower.
Bower è un package manager progettato per JavaScript che ci aiuta a tenere le nostre dipendenze, sistemate, aggiornate e semplici da reperire senza doverle caricare su i nostri repo Git (sconsigliatissimo!)
Vediamo come utilizzare Bootstrap tramite bower.

Per prima cosa dovremmo modificare il file bower.json inserendo tra le dipendenze bootstrap:

“dependencies”: {
“angular”: “~1.4.0”,
“angular-route”: “~1.4.0”,
“angular-loader”: “~1.4.0”,
“angular-mocks”: “~1.4.0”,
“html5-boilerplate”: “~5.2.0”,
“bootstrap”: “^3.3.6”,
“jquery”: “^2.2.3”
}

In questo modo digitando il comando bower install da terminale troveremmo nella cartella bower_components dentro app (grazie al file .bowerrc) l’ultima versione di bootstrap (nel nostro caso per come è stato scritto il file bower.json troveremo l’ultima versione maggiore alla 3.3.6 ma che non superi la versione 3.x

una volta installato basterà aggiungere al file index.html il path dei file che ci server per poter utilizzare bootstrap

<link rel=”stylesheet”  href=”bower_components/bootstrap/dist/css/bootstrap.min.css”>
<script src=”bower_components/bootstrap/dist/js/bootstrap.min.js”></script>

RICORDA: Tutte le librerie che non riguardano Angular, tipo jquery o bootstrap.js, vanno dichiarate nel file index.html prima della dichiarazione di Angular

Una volta importate le librerie potremmo sbizzarrirci nel personalizzare la nostra applicazione Angular visto che tutta la parte di view è html puro quindi utilizza tutti i costrutti dell’html

Conclusioni

Abbiamo visto i primi costrutti base di Angular, come importare librerie esterne e come poter parlare con api o file esterni,
l’esempio completo lo trovate a questo link su git:https://github.com/thecreazy/angular-base-project
il progetto conterrà man mano tutte le evolutive che pian piano andremo a studiar nei post a seguire, da questa lezione in poi troverete nella cartella lessons le precedenti lezioni in modo da poter seguire l’evolutiva del progetto

Lezioni