AngularJS
Compartir datos
Buscar..
Observaciones
Una pregunta muy común cuando se trabaja con Angular es cómo compartir datos entre controladores. El uso de un servicio es la respuesta más frecuente y este es un ejemplo simple que muestra un patrón de fábrica para compartir cualquier tipo de objeto de datos entre dos o más controladores. Debido a que es una referencia de objeto compartido, una actualización en un controlador estará disponible inmediatamente en todos los demás controladores que usen el servicio. Tenga en cuenta que tanto el servicio y la fábrica y los dos proveedores .
Usando ngStorage para compartir datos
En primer lugar, incluya la fuente ngStorage en su index.html.
Un ejemplo de inyección de ngStorage src sería:
<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 le ofrece 2 ngStorage de almacenamiento: $localStorage y $sessionStorage . Necesita requerir ngStorage e inyectar los servicios.
Supongamos que si ng-app="myApp" , estaría inyectando ngStorage siguiente manera:
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 y $sessionStorage son accesibles globalmente a través de cualquier controlador siempre y cuando inyecte esos servicios en los controladores.
También puede utilizar el localStorage y sessionStorage de HTML5 . Sin embargo, usar HTML5 localStorage requeriría que localStorage y deserialice sus objetos antes de usarlos o guardarlos.
Por ejemplo:
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"));
Compartir datos de un controlador a otro usando el servicio
Podemos crear un service para set y get los datos entre los controllers y luego inyectar ese servicio en la función del controlador donde queremos usarlo.
Servicio :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Controladores:
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 !!
}]);
Aquí, podemos ver que myCtrl1 se usa para setting los datos y myCtrl2 se usa para getting los datos. Entonces, podemos compartir los datos de un controlador a otro como este.
