Partager des données entre les contrôleurs dans AngularJS
- Partager des données entre les contrôleurs parents et enfants dans AngularJS
- Partager des données entre les contrôleurs à l’aide d’usine ou de service dans AngularJS
Nous pouvons utiliser plusieurs méthodes pour partager des données entre les contrôleurs dans AngularJS, mais ici nous ne discuterons que de deux façons. La première consiste à définir la portée des variables. La deuxième façon est d’utiliser une usine ou un service.
Partager des données entre les contrôleurs parents et enfants dans AngularJS
La portée d’un contrôleur enfant hérite de la portée du contrôleur parent, permettant aux données d’être partagées simplement en utilisant l’héritage du contrôleur.
Lorsqu’un composant enfant est imbriqué dans un composant parent, le composant enfant peut accéder aux données du parent.
Ceci est accompli grâce à l’utilisation d’une liaison de données bidirectionnelle. Le composant parent peut transmettre des données à l’enfant à l’aide d’une liaison de propriété ou d’une liaison d’événement.
L’enfant peut ensuite retransmettre ces données au parent à l’aide d’une liaison de propriété ou d’une liaison d’événement sur son contrôleur. Ce modèle est également utilisé pour partager des sélections entre des composants liés.
L’objet portée
L’objet scope est créé lorsqu’un contrôleur est instancié, et il contient à la fois les propriétés du modèle et de la vue.
La propriété model contient ou stocke toute information partagée avec d’autres contrôleurs. D’autre part, la propriété view contient ou stocke des informations sur l’affichage de ces informations à l’écran (telles que HTML).
Partager des données entre les contrôleurs à l’aide d’usine ou de service dans AngularJS
Dans AngularJS, nous pouvons partager des données entre des contrôleurs utilisant des usines ou des services.
Les usines renvoient un objet avec les méthodes pour créer et mettre à jour des objets. Nous pouvons utiliser des usines lorsque nous voulons créer un nouvel objet dans un contrôleur et le partager avec un autre contrôleur.
Les services sont utilisés lorsque nous voulons partager des données entre les contrôleurs et d’autres fichiers JavaScript.
En conclusion, les usines et les services AngularJS sont des modules JS qui exécutent un objectif spécifique et contiennent à la fois des méthodes et des propriétés.
Ils peuvent être injectés dans d’autres composants via l’injection de dépendances. Nous pouvons définir une variable partagée dans une usine, l’injecter dans les deux contrôleurs et lier les variables de portée aux données d’usine dans cette méthode.
Nous devons suivre les étapes ci-dessous.
-
Enregistrez l’usine ou le service.
-
Créez un service ou une usine qui sera responsable de la récupération des données.
-
Ajoutez le service ou l’usine à la liste des fournisseurs du module.
-
Créez un contrôleur avec une fonction qui utilisera le service.
Vous trouverez ci-dessous un exemple pour nous aider à comprendre comment partager des données entre les contrôleurs en utilisant les deux méthodes décrites ci-dessus.
Code Javascript :
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
Code HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook