AngularJS
Partage de données
Recherche…
Remarques
Une question très courante lorsque vous travaillez avec Angular est de partager des données entre contrôleurs. L'utilisation d'un service est la réponse la plus fréquente. Il s'agit d'un exemple simple démontrant un modèle d' usine pour partager tout type d'objet de données entre deux ou plusieurs contrôleurs. Comme il s'agit d'une référence d'objet partagé, une mise à jour dans un contrôleur sera immédiatement disponible dans tous les autres contrôleurs utilisant le service. Notez que le service et l'usine et les deux fournisseurs .
Utiliser ngStorage pour partager des données
Tout d'abord, incluez la source ngStorage dans votre index.html.
Un exemple d'injection de ngStorage src serait:
<head>
<title>Angular JS ngStorage</title>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
ngStorage vous donne 2 stockage à savoir: $localStorage et $sessionStorage . Vous devez exiger ngStorage et Inject les services.
Supposons que si ng-app="myApp" , alors vous injecteriez ngStorage comme suit:
var app = angular.module('myApp', ['ngStorage']);
app.controller('controllerOne', function($localStorage,$sessionStorage) {
// an object to share
var sampleObject = {
name: 'angularjs',
value: 1
};
$localStorage.valueToShare = sampleObject;
$sessionStorage.valueToShare = sampleObject;
})
.controller('controllerTwo', function($localStorage,$sessionStorage) {
console.log('localStorage: '+ $localStorage +'sessionStorage: '+$sessionStorage);
})
$localStorage et $sessionStorage sont globalement accessibles via tous les contrôleurs tant que vous injectez ces services dans les contrôleurs.
Vous pouvez également utiliser localStorage et sessionStorage de HTML5 . Cependant, l'utilisation de HTML5 localStorage nécessiterait que vous sérialisiez et désérialisiez vos objets avant de les utiliser ou de les enregistrer.
Par exemple:
var myObj = {
firstname: "Nic",
lastname: "Raboy",
website: "https://www.google.com"
}
//if you wanted to save into localStorage, serialize it
window.localStorage.set("saved", JSON.stringify(myObj));
//unserialize to get object
var myObj = JSON.parse(window.localStorage.get("saved"));
Partage de données d'un contrôleur à un autre en utilisant le service
Nous pouvons créer un service pour set et get les données entre les controllers , puis injecter ce service dans la fonction de contrôleur où nous voulons l'utiliser.
Un service :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Contrôleurs:
app.controller('myCtrl1', ['setGetData',function(setGetData) {
// To set the data from the one controller
var data = 'Hello World !!';
setGetData.setData(data);
}]);
app.controller('myCtrl2', ['setGetData',function(setGetData) {
// To get the data from the another controller
var res = setGetData.getData();
console.log(res); // Hello World !!
}]);
Ici, nous pouvons voir que myCtrl1 est utilisé pour setting les données et myCtrl2 est utilisé pour getting les données. Nous pouvons donc partager les données d'un contrôleur avec un autre comme celui-ci.