Home / Questions / 45151
Accepted
Diego
Asked: 2020-01-21 08:33:03 +0800 CST 2020-01-21 08:33:03 +0800 CST

AngularJS 中的数据持久性

  • 772

我安装了一个应用程序，其结构如下：

Menú

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

每个部分都是一个视图，它从 API 加载数据，在访问每个视图时都会执行该 API。

我的问题是，即使我们改变视图，AngularJS 有没有办法保留数据？即从1访问section 2时，返回时不会丢失数据，也不必再次查询API。

我希望能够只加载一次数据，如果不能，那么我每次进入视图时都必须拨打电话。

如果有更好的方法，请随时告诉我。

编辑 1

现在我有这样的：

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);
    } 

}]);
javascript

2 Answers

  1. Best Answer

    新答案

    一旦它们被履行，承诺就会保持它们的状态，这意味着如果你then在一个已经履行的承诺上再次调用承诺，它将使用承诺的结果调用回调。即promise已经存储了你得到的结果！剩下要做的就是存储promise。

    像这样离开服务：

    app.service('svc', ['$http',
  function($http) {
    this.promiseCache = null;
    this.getData = function(url) {
      return this.promiseCache || (this.promiseCache = $http.get(url));
    }
  }
]);

    现在的问题是，一旦解决了 Promise ，您将无法获得新的 URL 或自愿重新加载相同的 URL。为了克服这个问题，我给你举个例子：使用 URL 的 chache 修复和重新加载任何 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));
    }
  }
]);

    完整示例：（您可以在控制台中查看 XHR 请求仅启动一次）

    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>

    原始答案

    即使我们更改视图，AngularJS 有没有办法保留数据？

    假设数据在控制器中（这就是为什么在更改视图时它会丢失，因为控制器发生了变化），你可以做的是使用服务。

    Aservice是一个单例，它在第一次注入时诞生，然后在后续注入中，服务的同一实例将始终注入服务本身的所有后续用户（控制器）。

    这使它成为在整个 Web 应用程序的整个生命周期中共享信息的好工具，并且具有通过按 F5 键，当重新加载 Web 应用程序时，重新构建服务并丢失数据的优势。

    有许多内置服务，例如：、$interval等。你可以自己做。$http$location

    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
    } 
}]);

    然后在控制器中你要做的就是注入服务（在所有控制器中）

    // 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';
}]);

    在另一个控制器上

    // 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']  );
}]);

    使用这种技术，很容易在控制器之间以及视图之间共享资源/数据。

    • 2

  2. 有很多方法可以做你想做的事，它们是：

    • 本地存储
    • WebSQL - SQLite
    • 索引数据库

    我知道前两个，因为我和他们一起工作过，最后一个我放在名单上，我从未合作过，但它存在。

    这完全取决于您要存储多少信息，但鉴于您已经开发了一个应用程序，我建议使用 SQLite 或 WebSQL。

    一个和另一个之间的区别在于，WebSQL 不依赖于任何插件或附加组件在浏览器中或已编译 apk 时使用，而 SQLite 仅在您的情况下通过附加组件在设备上工作你使用 AngularJS (Angular 1)，我不知道你有多先进，我推荐使用 Ionic 框架，我不知道你是否知道，但它会对你有很大帮助。

    • 1