Cos'è $Scope in AngularJS? Tutorial con funzione (esempi)

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.

Sintesi

È 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

Cos'è $Scope in AngularJS? Tutorial con funzione (esempi)