Nueva respuesta
Las promises mantienen su estado una vez que se han cumplido, esto significa que si vuelves a invocar then
sobre una la promesa que ya se cumplio, esta invocara el callback con el resultado de la promesa. Es decir, la promesa ya almacena el resultado obtenido por ti!, lo que falta hacer es almacenar la promesa.
Quedando el servicio así:
app.service('svc', ['$http',
function($http) {
this.promiseCache = null;
this.getData = function(url) {
return this.promiseCache || (this.promiseCache = $http.get(url));
}
}
]);
Ahora el problema con esto es que una vez que esta resuelta una Promise, no podrás obtener nuevas URLs ni recargar voluntariamente la misma URL. Para superar este problema, te dejo un ejemplo: utiliza un arreglo para la chache por URL y con la opción de recagar cualquier URL.
app.service('svc', ['$http',
function($http) {
this.promiseCache = [];
this.getData = function(url, reload) {
// si se pone reload = true, se borra la cache y vuelve a empezar
if (reload) { delete this.promiseCache[url] }
// si la promise esta en la chache, retorna la promise o lanza el get
return this.promiseCache[url] || (this.promiseCache[url] = $http.get(url));
}
}
]);
Ejemplo completo: (puedes comprobar por la consola que la solicitud XHR se lanza una única vez)
var app = angular.module('app', []);
app.service('svc', ['$http',
function($http) {
this.promiseCache = null;
this.getData = function(url) {
return this.promiseCache || (this.promiseCache = $http.get(url));
}
}
]);
app.controller('ctrl', ['$scope', 'svc',
function($scope, svc) {
$scope.reload = function() {
svc.getData('http://ipinfo.io/8.8.8.8/json')
.then(function(datos) {
$scope.datos = datos.data
});
}
// lo invocamos la primera vez.
$scope.reload();
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<pre>
{{datos | json}}
<a style="cursor: pointer" ng-click="reload()">Recargar</a>
</pre>
</div>
Respuesta original
¿existe alguna manera con AngularJS de mantener los datos aunque cambiemos de vista?
Asumindo que los datos están en un controlador (y por eso se pierden al cambiar de vista, pues cambia el controlador) lo que puedes hacer es utilizar un Service.
Un service
es un singleton que nace la primera vez que se lo inyecta y luego, en las posteriores inyecciones, siempre se inyectara la misma instancia del servicio a todos los posteriores usuarios (controladores) del service en si.
Esto lo convierte en una buena herramienta para compartir información durante todo el ciclo de vida de la web app y tiene la ventaja de que con hacer F5, al recargarse la web app, el servicio se reconstruye y se pierden los datos.
Hay muchos services built-in como: $interval
, $http
, $location
y otros. Y tu puedes hacer uno propio.
var app = angular.module('miApp', []);
app.service('datos', ['$http', function ($http) {
// aqui dentro, this es la instancia del service.
// por lo que todo lo que almacenes aqui, sera compartido entre todos los
// contraladores que injectan el servicio.
this.unMetodo = function(url) {
return $http.get(url); // este es un ejemplo de funcion del servicio
}
}]);
Luego en el controlador lo que debes hacer es injectar el servico (en todos los contoladores)
// fijate que injectamos DATOS
app.controller('controlador1', ['$scope', 'datos', function ($scope, datos) {
// aqui dentro `datos` es el `this` del servicio datos.
// si haces algo como esto se refleja en todos los usuarios del servicio
datos['algo'] = 'valor';
}]);
En otro controlador
// fijate que injectamos DATOS
app.controller('controlador2', ['$scope', 'datos', function ($scope, datos) {
// aqui dentro `datos` tambien es el `this` del servicio datos.
// este controlador tiene el valor de datos['algo']
// (siempre y cuando se alla ejecutado primero el codigo del otro controller)
console.log( datos['algo'] );
}]);
Utilizando esta técnica es muy fácil compartir recursos/datos entre controladores y por ente entre las vistas.