AngularJS
Gegevens delen
Zoeken…
Opmerkingen
Een veel voorkomende vraag bij het werken met Angular is hoe gegevens moeten worden gedeeld tussen controllers. Het gebruik van een service is de meest voorkomende reactie en dit is een eenvoudig voorbeeld dat een fabriekspatroon laat zien om elk type gegevensobject te delen tussen twee of meer controllers. Omdat het een gedeelde objectreferentie is, is een update in één controller onmiddellijk beschikbaar in alle andere controllers die de service gebruiken. Merk op dat zowel service als fabriek en beide providers .
NgStorage gebruiken om gegevens te delen
Neem eerst de ngStorage- bron op in uw index.html.
Een voorbeeld van het injecteren van ngStorage src zou zijn:
<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 biedt u 2 opslag, namelijk: $localStorage en $sessionStorage . U moet ngStorage nodig hebben en de services injecteren.
Stel dat als ng-app="myApp" , u ngStorage als volgt zou injecteren:
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 en $sessionStorage is wereldwijd toegankelijk via alle controllers, zolang u die services in de controllers injecteert.
U kunt ook de localStorage en sessionStorage van HTML5 . Als u echter HTML5 localStorage , moet u uw objecten serialiseren en deserialiseren voordat u ze gebruikt of opslaat.
Bijvoorbeeld:
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"));
Gegevens delen van de ene controller naar de andere met behulp van service
We kunnen een service maken get de gegevens tussen de controllers te set en op te get en die service vervolgens in de controllerfunctie te injecteren waar we deze willen gebruiken.
Onderhoud :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Controllers:
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 !!
}]);
Hier kunnen we zien dat myCtrl1 wordt gebruikt voor setting de gegevens en myCtrl2 wordt gebruikt voor getting de gegevens. Dus we kunnen de gegevens van de ene controller naar de andere contrller zoals deze delen.