Qu’est-ce que $Scope dans AngularJS ? Tutoriel avec fonction (exemples)
James Hartmann
Qu’est-ce que $scope dans AngularJS ?
$portée dans AngularJS est un objet intégré qui lie essentiellement le « contrôleur » et la « vue ». On peut définir des variables membres dans la portée du contrôleur auxquelles la vue peut ensuite accéder.
Prenons l'exemple ci-dessous :
angular.module('app',[]).controller('HelloWorldCtrl'
function($scope)
{
$scope.message = "Hello World"
});
Explication du code :
- Le nom du module est « app »
- Le nom du contrôleur est « HelloWorldCntrl »
- L'objet Scope est l'objet principal utilisé pour transmettre des informations du contrôleur à la vue.
- Variable membre ajoutée à l'objet de portée
Configuration ou ajout d'un comportement
Afin de réagir aux événements ou d'exécuter une sorte de calcul/traitement dans la vue, nous devons fournir un comportement à la portée.
Des comportements sont ajoutés aux objets de portée pour répondre à des événements spécifiques pouvant être déclenchés par la vue. Une fois le comportement défini dans le contrôleur, il est accessible par la vue.
Regardons un exemple de la façon dont nous pouvons y parvenir.
<!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>
Explication du code :
- Nous créons un comportement appelé « fullName ». Ce comportement est une fonction qui accepte 2 paramètres (prénom, nom).
- Le comportement renvoie alors la concaténation de ces 2 paramètres.
- Dans la vue, nous appelons le comportement et transmettons 2 valeurs « Guru » et « 99 » qui sont transmises comme paramètres au comportement.
Si la commande est exécutée avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
Dans le navigateur, vous verrez une concaténation des valeurs de Guru et 99 qui ont été transmises au comportement dans le contrôleur.
Résumé
- Diverses variables membres peuvent être ajoutées à l'objet scope qui peut ensuite être référencée dans la vue.
- Un comportement peut être ajouté pour travailler avec des événements générés pour les actions effectuées par l'utilisateur.
- Le manuel de formation AngularJS
$rootScopeest la portée de l’ensemble de l’application. Une application ne peut avoir qu’un seul $rootScope et s’utilise comme une variable globale. Dans Angular JS, les portées $ sont des portées enfants et $rootScope est la portée parent.
