HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Editor audio video
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Giochi
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Giochi >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Fotoritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
JavaScriptPHPHTMLLinguaggio CPythonDigital MarketingProgrammazioneWordPressJavaGame Design
INDICE DELLA GUIDA
  1. 1 AngularJS è un framework, non una libreria!

  2. 2 Hello Angular!

  3. 3 MV* in AngularJS

  4. 4 Scope e two-way data binding

  5. 5 Gerarchia di scope

Direttive predefinite
  1. 6 Direttive predefinite, bind, hide e show

  2. 7 ng-if e ng-switch, markup ...condizionale

  3. 8 ng-include

  4. 9 ng-class

  5. 10 ng-repeat

  6. 11 ng-options

  7. 12 Direttive di evento

Filtri
  1. 13 I filtri

  2. 14 Filtri nel controller

Servizi
  1. 15 Servizi

  2. lezione
    16 di 38

    Servizi per condividere dati e funzionalità

  3. 17 Il servizio $http

Form
  1. 18 Form, il binding dei controlli

  2. 19 Validare i dati con AngularJS

  3. 20 Invio dei dati

Moduli e Applicazioni Angular JS
  1. 21 I moduli AngularJS

  2. 22 Applicazioni Angular JS, definizione e controllo

  3. 23 Moduli e file

  4. 24 Dependency injection in Angular

Single Page Application e routing
  1. 25 Single Page Application e routing in AngularJS

  2. 26 Configurazione del routing

Angular Internals
  1. 27 Watch e digest loop

  2. 28 $apply e il contesto Angular

  3. 29 Creare un watch in AngularJS

Direttive Custom
  1. 30 Direttive personalizzate

  2. 31 Template, scope e composizione di direttive

  3. 32 Scope isolato

  4. 33 Scope isolato e modalità di mappatura

  5. 34 Linking nelle direttive Angular

AngularJS e il mondo mobile
  1. 35 AngularJS mobile, ngTouch, tap e $swipe

  2. 36 Angular- gestures

  3. 37 Angular e PhoneGap/Cordova

  4. 38 Tips and tricks per il mobile con AngularJS

  • Learn
  • Guida AngularJS
  • Servizi per condividere dati e funzionalità
lezione
16 di 38

Servizi per condividere dati e funzionalità

  • di Andrea Chiarelli
  • 23 Giugno 2015

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:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

17 / 38

Il servizio $http

Ultime notizie

ThisPersonDoesNotExist: generatore automatico di volti realistici

Microsoft: disattivare Windows Defender non risolve i problemi di WSL

Python 3.8 su Fedora 31?

Copyright: cosa prevede (veramente) la Direttiva

Red Hat: basta con MongoDB, largo a PostgreSQL

I Video di HTML.it

Un centralino su misura con Voverc

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Guida Angular 2

  • 25 Lezioni
  • Facile

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.

  • Ionic 2, la guida
  • AngularJS: prestazioni più elevate disabilitando il debug

Angular, React, Vue: framework Javascript a confronto

Una panoramica completa dei tre principali framework Javascript, che utilizza diverse metriche per confrontare tutti i pro e contro di ognuno di essi.

  • Onsen UI: un modo semplice per sviluppare web app ibride
  • JavaScript: Angular è il framework più popolare tra gli sviluppatori

Cyclotron: creare dashboard con NodeJS e AngularJS

AngularConf 2016. Codice sconto per i lettori di Html.it

Vanilla Web development o framework?

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.9.5