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. lezione
    5 di 38

    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. 16 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
  • Gerarchia di scope
lezione
5 di 38

Gerarchia di scope

  • di Andrea Chiarelli
  • 21 Aprile 2015

Abbiamo visto come ciascun controller ha uno scope associato che consente il dialogo tra il modello dei dati e la view. Una importante caratteristica degli scope è la loro organizzazione gerarchica e il meccanismo di ereditarietà prototipale tipica degli oggetti JavaScript.

Se definiamo controller annidati, lo scope del controller più interno eredita le proprietà e i metodi dello scope più esterno. Anzi, per essere più precisi, eredita le proprietà e i metodi di tutti gli scope più esterni, a partire dallo scope associato all’applicazione chiamato $rootScope.

Consideriamo ad esempio il seguente codice HTML:


<div ng-controller="userController"> 
   <p>Nome: <input type="text" ng-model="utente.nome"></p> 
   <p>Cognome: <input type="text" ng-model="utente.cognome"></p> 
   <p ng-controller="greetingController">{{saluta()}}</p> 
</div>

Si tratta della riorganizzazione del codice visto negli esempi precedenti in cui abbiamo definito una view interna gestita dal controller greetingController. Ridefiniamo il codice dei rispettivi controller annidati come nel seguente esempio:

<script type="text/javascript"> 
angular.module("myApp", []) 
	.controller("userController",   
		function($scope) { 
			$scope.utente = {nome: "Mario", cognome: "Rossi"}; 
		}) 
	.controller("greetingController",   
		function($scope) { 
			$scope.saluta = function() { 
				return "Buongiorno " + $scope.utente.nome + " " + $scope.utente.cognome + "!" 
			};   
		}); 
</script> 

Notiamo che il controller userController si limita a definire il modello dei dati, mentre il controller greetingController definisce il metodo saluta(). Quest’ultimo metodo però accede al nome e cognome dell’utente come se il modello dei dati fosse stato definito nello scope corrente. Questa possibilità è derivata proprio dal fatto che lo scope del controller greetingController eredita il modello dei dati definito dal controller padre userController.

Questa caratteristica risulta molto comoda in diversi contesti, ma introduce una dipendenza tra gli scope dei vari controller che occorre tener presente in caso di refactoring dell’interfaccia utente.

Controller senza scope

È possibile definire un controller senza ricorrere agli scope. In questo caso è lo stesso controller a veicolare il modello dei dati e le funzionalità necessarie alla view. Infatti possiamo definire il nostro controller come costruttore del modello dei dati come mostrato di seguito:

<script type="text/javascript"> 
angular.module("myApp", []) 
	.controller("userController",   
		function() {
			this.utente = {nome: "Mario", cognome: "Rossi"}; 
			this.saluta = function() {
				return "Buongiorno " +
				       this.utente.nome + " " +
					   this.utente.cognome + "!" 
			};   
		}); 
</script> 

Possiamo notare l’assenza del parametro $scope e l’utilizzo di this come supporto al modello dei dati e delle funzionalità utili alla view.

Utilizzando questo approccio dovremo modificare l’aggancio del controller nella view nel seguente modo:


<div ng-controller="userController as userCtrl"> 
   <p>Nome: <input type="text" ng-model="userCtrl.utente.nome"></p> 
   <p>Cognome: <input type="text" ng-model="userCtrl.utente.cognome"></p> 
   <p>{{userCtrl.saluta()}}</p> 
</div>

In pratica associamo una sorta di alias al controller tramite il costrutto controller as ed utilizziamo questo alias per accedere al modello dei dati ed ai metodi.

Questo approccio consente di ottenere una maggiore chiarezza nel codice HTML quando abbiamo controller annidati, ma ha l’inconveniente di non poter sfruttare l’ereditarietà degli scope. Riprendendo l’esempio dei controller annidati visto nella sezione precedente, con questo approccio possiamo riscriverlo nel seguente modo:

<div ng-controller="userController as userCtrl">
	<p>Nome: <input type="text" ng-model="userCtrl.utente.nome"></p>
	<p>Cognome: <input type="text" ng-model="userCtrl.utente.cognome"></p>
	<p ng-controller="greetingController as greetingCtrl">{{greetingCtrl.saluta(userCtrl.utente)}}</p>
</div>

<script type="text/javascript">
angular.module("myApp", [])
	.controller("userController",
		function() {
			this.utente = {nome: "Mario", cognome: "Rossi"};
		})
	.controller("greetingController",
		function() {
			this.saluta = function(utente) {
				return "Buongiorno " + utente.nome + " " + utente.cognome + "!"
			};
		});
</script>

A parte l’esplicitazione dell’appartenenza dei vari elementi ai rispettivi controller, notiamo che abbiamo dovuto modificare la definizione del metodo saluta() prevedendo il passaggio dell’oggetto utente per sopperire alla mancanza dell’ereditarietà degli scope.

Osservazioni sui controller

Uno degli errori più frequenti soprattutto da parte di chi si avvicina per la prima volta ad Angular è il sovraccaricare i controller di funzionalità che non gli appartengono. Per il principio della separazione delle competenze tra i componenti Angular, è opportuno sottolineare che il compito principale di un controller consiste nell’impostare lo stato iniziale del modello dei dati e la definizione di funzionalità per la view.

In particolare un controller non deve:

  1. Manipolare il DOM,
    questo compito è riservato alle direttive
  2. Formattare l’input,
    per questo compito è opportuno utilizzare i form Angular
  3. Formattare l’output,
    questo è compito dei filtri
  4. Condividere dati con altri controller,
    per questo compito è opportuno creare dei servizi
  5. Implementare funzionalità generali,
    l’implementazione di funzionalità che non riguardano direttamente l’interazione tra dati e view deve essere fatta nei servizi

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:

6 / 38

Direttive predefinite, bind, hide e show

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

Come localizzare Blender in italiano

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