AngularJS
Condivisione dei dati
Ricerca…
Osservazioni
Una domanda molto comune quando si lavora con Angular è come condividere i dati tra i controller. L'utilizzo di un servizio è la risposta più frequente e questo è un semplice esempio che dimostra un modello factory per condividere qualsiasi tipo di oggetto dati tra due o più controller. Poiché si tratta di un riferimento a oggetti condivisi, un aggiornamento in un controller sarà immediatamente disponibile in tutti gli altri controller che utilizzano il servizio. Si noti che sia il servizio che la fabbrica e entrambi i provider .
Utilizzo di ngStorage per condividere i dati
In primo luogo, includi l'origine ngStorage nel tuo index.html.
Un esempio di iniezione di ngStorage src potrebbe essere:
<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 ti dà 2 storage vale a dire: $localStorage e $sessionStorage . È necessario richiedere ngStorage e Inject i servizi.
Supponiamo che se ng-app="myApp" , si stia iniettando ngStorage come segue:
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 e $sessionStorage sono accessibili a livello globale attraverso qualsiasi controller fintanto che si iniettano tali servizi nei controller.
Puoi anche utilizzare localStorage e sessionStorage di HTML5 . Tuttavia, l'uso di HTML5 localStorage richiede la serializzazione e la deserializzazione degli oggetti prima di utilizzarli o salvarli.
Per esempio:
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"));
Condivisione dei dati da un controller a un altro tramite il servizio
Possiamo creare un service per set e get i dati tra i controllers e quindi iniettare quel servizio nella funzione controller dove vogliamo usarlo.
Servizio :
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 !!
}]);
Qui, possiamo vedere che myCtrl1 è usato per setting i dati e myCtrl2 è usato per getting i dati. Quindi, possiamo condividere i dati da un controller a un altro controller come questo.