Uno degli utilizzi tipici di un servizio è la condivisione di dati tra controller diversi. Proviamo ad illustrare questo concetto con un esempio. Supponiamo di avere un elenco di città e di voler consentire all’utente di aggiungere nuove città con la relativa regione. Da un punto di vista grafico abbiamo la seguente situazione:
Da un punto di vista architetturale possiamo organizzare il contenuto della pagina in due view con i relativi controller. La prima view è responsabile dell’inserimento di una nuova città:
<div ng-controller="cittaController">
<p>Città: <input type="text" ng-model="nome"/></p>
<p>Regione: <input type="text" ng-model="regione"/></p>
<p><button ng-click="aggiungiCitta()">Aggiungi</button></p>
</div>
La seconda view si occupa della visualizzazione dell’elenco delle città:
<div ng-controller="elencoController">
<ul>
<li ng-repeat="citta in elencoCitta">{{citta.nome}}</li>
</ul>
</div>
I controller delle due viste, che abbiamo chiamato rispettivamente cittaController
ed elencoController
, condividono l’elenco delle città: il primo controller ne ha bisogno per poter aggiungere un nuovo elemento, il secondo controller per visualizzarlo.
Possiamo quindi implementare l’elenco delle città come un servizio:
angular.module("myApp")
.service("elencoCitta", function() {
this.elenco = [
{nome: "Roma", regione: "Lazio"},
{nome: "Latina", regione: "Lazio"},
{nome: "Milano", regione: "Lombardia"},
{nome: "Napoli", regione: "Campania"},
{nome: "Como", regione: "Lombardia"},
{nome:"Palermo", regione: "Sicilia"},
{nome: "Caserta", regione: "Campania"},
{nome: "Avellino", regione: "Campania"},
{nome:"Trapani", regione: "Sicilia"},
{nome:"Agrigento", regione: "Sicilia"}
];
this.aggiungi = function(citta) {
this.elenco.push(citta);
};
});
Come possiamo vedere, abbiamo creato il servizio tramite il metodo service()
, quindi il risultato sarà la funzione stessa, cioè un oggetto con la proprietà elenco
che contiene le città ed un metodo aggiungi()
per aggiungere una nuova città all’elenco.
Il controller elencoController
si limiterà ad agganciare allo scope
l’elenco delle città:
angular.module("myApp")
.controller("elencoController", function($scope, elencoCitta) {
$scope.elencoCitta = elencoCitta.elenco;
});
Il controller cittaController
metterà a disposizione la funzione per aggiungere una nuova città all’elenco:
angular.module("myApp")
.controller("cittaController", function($scope, elencoCitta) {
$scope.aggiungiCitta = function() {
elencoCitta.aggiungi({nome: $scope.nome, regione: $scope.regione});
};
});
In questo modo abbiamo organizzato i componenti della nostra applicazione Angular in modo ottimale per interagire tra loro e condividere dei dati. Da notare come, grazie al two-way binding
, l’aggiunta di un nuovo elemento all’elenco delle città aggiorna automaticamente l’elenco visualizzato.
Se vuoi aggiornamenti su AngularJS, JavaScript inserisci la tua e-mail nel box qui sotto:
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Scopriamo il framework più utilizzato da sviluppatori web e mobile alla sua seconda edizione! I punti di forza, le differenze con la 1.x e le semplificazioni introdotte per essere sempre più compliant con EcmaScript 2015.
Una panoramica completa dei tre principali framework Javascript, che utilizza diverse metriche per confrontare tutti i pro e contro di ognuno di essi.