AngularJS
Udostępnianie danych
Szukaj…
Uwagi
Bardzo częstym pytaniem podczas pracy z Angularem jest sposób udostępniania danych między kontrolerami. Korzystanie z usługi jest najczęstszą odpowiedzią i jest to prosty przykład demonstrujący fabryczny wzorzec udostępniania dowolnego typu obiektu danych między co najmniej dwoma sterownikami. Ponieważ jest to odwołanie do obiektu współdzielonego, aktualizacja na jednym kontrolerze będzie natychmiast dostępna na wszystkich innych kontrolerach korzystających z usługi. Pamiętaj, że zarówno usługodawcy, jak i fabryki oraz obaj dostawcy .
Używanie ngStorage do udostępniania danych
Po pierwsze, umieść źródło ngStorage w pliku index.html.
Przykładem wstrzykiwania ngStorage src byłoby:
<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 daje 2 miejsca do przechowywania, a mianowicie: $localStorage i $sessionStorage . Musisz wymagać ngStorage i wstrzyknąć usługi.
Załóżmy, że jeśli ng-app="myApp" , to wstrzykujesz ngStorage w następujący sposób:
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 i $sessionStorage są globalnie dostępne za pośrednictwem dowolnych kontrolerów, o ile wstrzykujesz te usługi do kontrolerów.
Możesz także użyć localStorage i sessionStorage HTML5 . Jednak użycie HTML5 localStorage wymagałoby szeregowania i deserializacji obiektów przed ich użyciem lub zapisaniem.
Na przykład:
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"));
Udostępnianie danych między kontrolerami za pomocą usługi
Możemy stworzyć service do set i get danych między controllers a następnie wstawić tę usługę do funkcji kontrolera tam, gdzie chcemy jej użyć.
Usługa :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Kontrolery:
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 !!
}]);
Tutaj widzimy, że myCtrl1 służy do setting danych, a myCtrl2 służy do getting danych. Możemy więc udostępniać dane z jednego kontrolera drugiemu kontrolerowi w ten sposób.