AngularJS
Daten teilen
Suche…
Bemerkungen
Eine sehr häufige Frage bei der Arbeit mit Angular ist, wie Daten zwischen Controllern gemeinsam genutzt werden. Die Verwendung eines Dienstes ist die häufigste Antwort. Dies ist ein einfaches Beispiel, das ein Fabrikmuster zeigt , mit dem alle Arten von Datenobjekten zwischen zwei oder mehr Steuerungen gemeinsam genutzt werden können. Da es sich um eine gemeinsame Objektreferenz handelt, ist eine Aktualisierung in einem Controller sofort in allen anderen Controllern verfügbar, die den Dienst verwenden. Beachten Sie, dass sowohl Service als auch Factory und beide Provider .
Verwenden von ngStorage zum Freigeben von Daten
Fügen Sie zunächst die Quelle ngStorage in Ihre index.html ein.
Ein Beispiel für das ngStorage src wäre:
<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 bietet Ihnen 2 Speicher, nämlich $localStorage und $sessionStorage . Sie müssen die Dienste ngStorage und Inject anfordern.
Angenommen, wenn ng-app="myApp" , würden Sie ngStorage wie folgt ngStorage :
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 und $sessionStorage über jeden Controller global $sessionStorage solange Sie diese Dienste in den Controller $sessionStorage .
Sie können auch localStorage und sessionStorage von HTML5 . Bei der Verwendung von HTML5 localStorage müssen Sie Ihre Objekte jedoch vor dem Verwenden oder Speichern serialisieren und deserialisieren.
Zum Beispiel:
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"));
Freigeben von Daten von einem Controller zu einem anderen über den Dienst
Wir können einen erstellen service zu set und get die Daten zwischen den controllers und dann diesen Dienst in der Reglerfunktion injizieren , wo wir sie verwenden möchten.
Bedienung :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Controller:
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 können wir sehen , dass myCtrl1 für verwendet wird , setting der Daten und myCtrl2 wird verwendet für getting die Daten. So können wir die Daten von einem Controller zu einem anderen Controller wie diesem weitergeben.