AngularJS
Dela data
Sök…
Anmärkningar
En mycket vanlig fråga när man arbetar med Angular är hur man delar data mellan kontrollerare. Att använda en tjänst är det vanligaste svaret och detta är ett enkelt exempel som visar ett fabriksmönster för att dela vilken typ av dataobjekt som helst mellan två eller flera kontroller. Eftersom det är en referens för delat objekt kommer en uppdatering i en kontroller att finnas omedelbart tillgängligt i alla andra styrenheter som använder tjänsten. Observera att både service och fabrik och båda leverantörer .
Använda ngStorage för att dela data
Först inkludera ngStorage- källan i din index.html.
Ett exempel på att injicera ngStorage src skulle vara:
<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 ger dig 2 lagring, nämligen: $localStorage och $sessionStorage . Du måste kräva ngStorage och injicera tjänsterna.
Antag att om ng-app="myApp" skulle du injicera ngStorage enligt följande:
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 och $sessionStorage är globalt tillgängligt via alla kontroller så länge du injicerar dessa tjänster i kontrollerna.
Du kan också använda localStorage och sessionStorage av HTML5 . Att använda HTML5 localStorage kräver dock att du serielliserar och deserialiserar dina objekt innan du använder eller sparar dem.
Till exempel:
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"));
Dela data från en controller till en annan med hjälp av tjänst
Vi kan skapa en service att set och get data mellan controllers och sedan injicera den tjänsten i kontrollfunktionen där vi vill använda den.
Service:
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Styrenheter:
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 !!
}]);
Här kan vi se att myCtrl1 används för att setting in data och myCtrl2 används för getting myCtrl2 data. Så vi kan dela uppgifterna från en controller till en annan controller så här.