Cos'è $Scope in AngularJS? Tutorial con funzione (esempi)
James Hartmann
Cos'è $scope in AngularJS?
$ambito in AngularJS è un oggetto integrato che fondamentalmente lega il "controller" e la "vista". È possibile definire variabili membro nell'ambito del controller a cui è quindi possibile accedere dalla vista.
Considera l'esempio seguente:
angular.module('app',[]).controller('HelloWorldCtrl'
function($scope)
{
$scope.message = "Hello World"
});
Spiegazione del codice:
- Il nome del modulo è “app”
- Il nome del controller è "HelloWorldCntrl"
- L'oggetto Scope è l'oggetto principale che viene utilizzato per passare le informazioni dal controller alla vista.
- Variabile membro aggiunta all'oggetto ambito
Impostazione o aggiunta di comportamenti
Per reagire agli eventi o eseguire qualche tipo di calcolo/elaborazione nella View, dobbiamo fornire un comportamento all'ambito.
I comportamenti vengono aggiunti agli oggetti ambito per rispondere a eventi specifici che possono essere attivati dalla vista. Una volta definito il comportamento nel controller, è possibile accedervi dalla vista.
Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta chrset="UTF 8">
<title>Guru99</title>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module("DemoApp", []);
app.controller("DemoController", function($scope) {
$scope.fullName=function(firstName,lastname){
return firstName + lastname;
}
} );
</script>
</body>
</html>
Spiegazione del codice:
- Stiamo creando un comportamento chiamato "fullName". Questo comportamento è una funzione che accetta 2 parametri (firstName,lastname).
- Il comportamento restituisce quindi la concatenazione di questi 2 parametri.
- In questa vista stiamo chiamando il comportamento e passando 2 valori di "Guru" e "99" che vengono passati come parametri al comportamento.
Se il comando viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Nel browser vedrai una concatenazione di entrambi i valori di Guru e 99 che sono stati passati al comportamento nel controllore.
Sommario
- È possibile aggiungere varie variabili membro all'oggetto ambito a cui è possibile fare riferimento nella vista.
- È possibile aggiungere un comportamento per lavorare con gli eventi generati per le azioni eseguite dall'utente.
- AngularJS
$rootScopeè l'ambito dell'intera applicazione. Un'applicazione può avere solo un $rootScope e viene utilizzata come una variabile globale. In Angular JS gli $scope sono ambiti figlio e $rootScope è l'ambito genitore
