Qu'est-ce que $ Scope dans AngularJS? Tutoriel avec exemple

Qu'est-ce que $ scope dans AngularJS?

$ scope 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 au sein du contrôleur qui peuvent ensuite être accédées par la vue.

Prenons l'exemple ci-dessous:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Explication du code:

1. Le nom du module est "app"
2. Le nom du contrôleur est "HelloWorldCntrl"
3. L'objet Scope est l'objet principal utilisé pour transmettre les informations du contrôleur à la vue.
4. Variable de membre ajoutée à l'objet d'étendue

Configurer ou ajouter 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 d'étendue pour répondre à des événements spécifiques qui peuvent ê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.

Guru99 Global Event
{{fullName("Guru","99")}}

Explication du code:

1. Nous créons un comportement appelé "fullName". Ce comportement est une fonction qui accepte 2 paramètres (prénom, nom).
2. Le comportement retourne alors la concaténation de ces 2 paramètres.
3. Dans la vue, nous appelons le comportement et transmettons 2 valeurs de "Guru" et "99" qui sont passées comme paramètres du comportement.

Si la commande est exécutée avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.

Production:

Dans le navigateur, vous verrez une concaténation des deux valeurs de Guru et 99 qui ont été transmises au comportement dans le contrôleur.

Résumé

• Diverses variables de membre peuvent être ajoutées à l'objet d'étendue qui peuvent ensuite être référencées dans la vue.
• Le comportement peut être ajouté pour travailler avec des événements qui sont générés pour des actions effectuées par l'utilisateur.
• Le angularjs $rootScopeest la portée de toute l'application. Une application ne peut avoir qu'un seul $ rootScope et est utilisée comme une variable globale. Dans Angular JS $ les portées sont des portées enfants et $ rootScope est la portée parent