AngularJS - Portées : Comprendre la colle de votre application

Bonjour à tous, futurs magiciens d'AngularJS ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des portées (scopes) d'AngularJS. Ne vous inquiétez pas si vous êtes nouveau dans le monde de la programmation - je serai votre guide amical, expliquant tout pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et plongons dedans !

Qu'est-ce qu'une portée dans AngularJS ?

Premiers choses premières - qu'est-ce qu'une portée dans AngularJS exactement ? Eh bien, imaginez que vous construisez une maison. La portée est comme la fondation de votre maison. C'est l'endroit où toutes vos données et fonctions vivent, et elle connecte votre HTML (la vue) avec votre JavaScript (le contrôleur).

Regardons un exemple simple :

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{message}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Bonjour, AngularJS !";
});
</script>

Dans cet exemple, $scope est notre objet portée. Nous définissons une propriété message dessus, que nous affichons ensuite dans notre HTML en utilisant {{message}}. Magique, non ?

Héritage de la portée

Maintenant, parlons de quelque chose de plus avancé - l'héritage de la portée. C'est comme un arbre généalogique pour vos données !

Qu'est-ce que l'héritage de la portée ?

Dans AngularJS, les portées peuvent hériter des portées parentes, tout comme les enfants héritent des caractéristiques de leurs parents. Cela signifie que si une propriété n'est pas trouvée dans la portée actuelle, AngularJS cherchera dans la portée parente, puis dans la portée du grand-parent, et ainsi de suite.

Voyons cela en action :

<div ng-app="myApp" ng-controller="parentCtrl">
Parent : {{message}}
<div ng-controller="childCtrl">
Enfant : {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "Je suis le parent !";
});

app.controller('childCtrl', function($scope) {
// La portée enfant hérite du parent
});
</script>

Dans cet exemple, le parent et l'enfant afficheront tous deux "Je suis le parent !" car la portée enfant hérite de la portée parente.

Remplacement des propriétés héritées

Mais que faire si l'enfant veut être rebelle et avoir son propre message ? Pas de problème ! Nous pouvons remplacer les propriétés héritées :

<div ng-app="myApp" ng-controller="parentCtrl">
Parent : {{message}}
<div ng-controller="childCtrl">
Enfant : {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "Je suis le parent !";
});

app.controller('childCtrl', function($scope) {
$scope.message = "Je suis l'enfant !";
});
</script>

Maintenant, le parent dira "Je suis le parent !" et l'enfant dira "Je suis l'enfant !". L'enfant a réussi à affirmer son indépendance !

Exemple : Un arbre généalogique de portées

Mettons tout cela ensemble dans un exemple plus complexe. Nous allons créer un arbre généalogique de portées :

<div ng-app="familyApp" ng-controller="grandparentCtrl">
Grand-parent : {{message}}
<div ng-controller="parentCtrl">
Parent : {{message}}
<div ng-controller="childCtrl">
Enfant : {{message}}
<div ng-controller="grandchildCtrl">
Petit-enfant : {{message}}
</div>
</div>
</div>
</div>

<script>
var app = angular.module('familyApp', []);

app.controller('grandparentCtrl', function($scope) {
$scope.message = "Je suis le grand-parent !";
});

app.controller('parentCtrl', function($scope) {
// Hérite du grand-parent
});

app.controller('childCtrl', function($scope) {
$scope.message = "Je suis l'enfant !";
});

app.controller('grandchildCtrl', function($scope) {
// Hérite de l'enfant
});
</script>

Output

Lorsque vous exécutez ce code, vous verrez :

Grand-parent : Je suis le grand-parent !
Parent : Je suis le grand-parent !
Enfant : Je suis l'enfant !
Petit-enfant : Je suis l'enfant !

Reprenons cela :

1. Le grand-parent définit le message initial.
2. Le parent n'établit pas de message, donc il hérite du grand-parent.
3. L'enfant établit son propre message, remplaçant celui hérité.
4. Le petit-enfant n'établit pas de message, donc il hérite de son parent immédiat (l'enfant), pas du grand-parent.

Méthodes de la portée

Les portées ne servent pas seulement à stocker des données - elles peuvent également contenir des méthodes ! Voici un tableau de quelques méthodes courantes de la portée :

Méthode	Description
$watch()	Enregistre un écouteur qui est appelé lorsque l'expression surveillée change
$apply()	Démarre manuellement le cycle de digestion
$on()	Enregistre un écouteur d'événement
$emit()	Déclenche un événement vers le haut dans la hiérarchie des portées
$broadcast()	Déclenche un événement vers le bas vers toutes les portées enfant

Voyons un exemple de $watch() en action :

<div ng-app="watchApp" ng-controller="watchCtrl">
<input ng-model="name">
<p>{{greeting}}</p>
</div>

<script>
var app = angular.module('watchApp', []);

app.controller('watchCtrl', function($scope) {
$scope.name = 'Monde';
$scope.greeting = 'Bonjour, ' + $scope.name + ' !';

$scope.$watch('name', function(newValue, oldValue) {
$scope.greeting = 'Bonjour, ' + newValue + ' !';
});
});
</script>

Dans cet exemple, nous utilisons $watch() pour mettre à jour notre salutation chaque fois que le nom change. Essayez de taper dans le champ d'entrée - vous verrez la salutation se mettre à jour en temps réel !

Conclusion

Et voilà, les amis - un voyage éclair dans les portées d'AngularJS ! Nous avons couvert ce qu'elles sont, comment elles héritent les unes des autres, et même plongé dans quelques concepts plus avancés comme les méthodes de la portée.

Souvenez-vous, les portées sont la colle qui tient votre application AngularJS ensemble. Elles sont la manière dont vos données circulent de votre JavaScript à votre HTML, et comment les interactions utilisateur dans l'HTML peuvent mettre à jour votre JavaScript.

Alors continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Le monde d'AngularJS est immense et passionnant, et vous venez de faire vos premiers pas dedans. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset