2

Tengo montada una app, la cual esta estructurada de la siguiente manera:

Menú

 - Sección 1
 - Sección 2
 - Sección 3

Cada una de las secciones es una vista, la cual carga los datos de una API, la cual se ejecuta al acceder a cada una de las vistas.

Mi duda es, ¿Existe alguna manera con AngularJS de mantener los datos aunque cambiemos de vista? Es decir, que al acceder a la sección 2 desde la 1, la uno no pierda los datos al volver a ella y que no tenga que volver a consultar a la API.

Busco el poder cargar los datos una única vez, si no que luego tenga que ir haciendo llamadas cada vez que entro a una vista.

Si existiese alguna mejor manera de hacerlo, no dudéis en decírmelo.

EDIT 1

Ahora mismo lo tengo así:

app.controller('IncidenciasCtrl', ['$scope', '$cookies', 'serviceDatosApi', function($scope, $cookies, serviceDatosApi) {
  'use strict';

  serviceDatosApi.devuelveIncidencias("gttp://192.168.1.1/llamadaAPI")
    .then(function(datos){

        $scope.incidencias = datos.data;

    });

}]);


app.service('serviceDatosApi', ['$http', function ($http) {

    this.devuelveIncidencias = function(url) {
      return $http.get(url);
    } 

}]);
1
  • Fijate que edite la respuesta.. Salu2 el 28 ene. 2017 a las 18:29

2 respuestas 2

2

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.

14
  • Una explicación buenísima! gracias. Una duda, cada vista la cargo con una llamada a la API, entiendo que debería hacer un servicio por cada llamada. ¿Es así?
    – Diego
    el 20 ene. 2017 a las 18:17
  • @Diego si hacer un servicio para llamar el api. el 20 ene. 2017 a las 18:52
  • @AlbertArias Gracias, ¿como podría detectar en el controller que el servicio ya está cargado o no, para hacer la llamada o no?.
    – Diego
    el 20 ene. 2017 a las 18:53
  • @Diego Incluyes el nombre del servicio del controlador y ya está cargado el servicio y dependiendo como hiciste el servicio haces la llamada y por tu pregunta usas localstorage y asi quedas con los datos necesarios al cambiar de cada vista. el 20 ene. 2017 a las 18:56
  • @AlbertArias Bueno no me queda muy clara esta parte, pero bueno, probare lo antes posible, a ver si lo consigo.
    – Diego
    el 20 ene. 2017 a las 18:57
1

existen muchas formas de realizar lo que tu quieres, y esas son:

  • LocalStorage
  • WebSQL - SQLite
  • IndexDB

Conozco los dos primero por que he trabajado con ellos, el ultimo que puse en la lista, nunca lo he trabajado, pero existe.

Todo depende de que cantidad de información vallas a almacenar, pero al ver que ya tienes desarrollada una aplicacion, te recomiendo usar SQLite o WebSQL.

La diferencia entre uno y otro, es que WebSQL no depende de ningún plugin o complemento para usar ya sea en el navegador o ya compilada la apk, mientras que, el SQLite, solo funciona en el dispositivo mediante un complemento, en tu caso que trabajas con AngularJS (Angular 1), no se que tan avanzado estés, te recomiendo utilizar Ionic Framework, no se si lo conoces pero te ayudaría mucho.

4
  • No se si te he entendido bien, pero me comentas de guardar la información, no necesito guardarla en una base de datos, si no que persista en una vista, cuando cambie a otra, para no andar haciendo llamadas a API's todo el rato y por lo tanto teniendo unos tiempos de carga enormes.
    – Diego
    el 20 ene. 2017 a las 18:21
  • Claro, luego de que ya la guardes, puedes hacer evitar que hagas peticiones sin necesidad. Ya si quieres aplicar XMPP o alguna forma de que el mismo servidor te envié las actualizaciones, sin necesidad de saturar el servidor. el 20 ene. 2017 a las 19:37
  • No es lo que busco, pero gracias por la ayuda.
    – Diego
    el 21 ene. 2017 a las 11:31
  • @Diego pues, si no es lo que buscas no entiendo, primero dejame saber si tienes conocimiento de lo que te recomiendo en la respuesta, respondeme para saber. el 21 ene. 2017 a las 23:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.