使用 Angular 1.X 如何跨控制器保存 $http 请求的结果?

Using Angular 1.X how can you persist the results of an $http request across controllers?

我已经阅读了多个可以与 services/providers/factories 跨控制器共享数据的地方。也许我错误地解释了这些结果,但据我了解,services/providers/factories 是一个抽象,可以跨控制器重新 运行 提供相同的数据。

我想从数据库查询中获得一次结果,而不想跨不同的控制器再次发出相同的请求。 services/providers/factories 这样做还是我需要 ngStorage 或 localStorage 之类的东西?或者还有其他我没有想到的方法吗?我看到有人提到在启动时进行初始查询 (.运行?),但我不确定是否要开始。

这取决于。如果您正在寻找每个应用程序会话仅加载一次数据的方法(例如在应用程序 bootstrap 和 window reload/close/navigate 外部之间)服务将成为您的解决方案。但是,如果您正在寻找能够在会话之间存储数据的解决方案,则需要依赖服务内部的某些浏览器存储解决方案。

根据我上面的评论总结...

"I'd like to get result from a database query once without making the same request over again across different controllers. Do services/providers/factories do this..."

是的。 Angular 中的提供者是单例,因此它们在不同的消费者(控制器等)中都是相同的实例。您可以在其中存储数据,这些数据将持续 在内存中

工厂仅在您打开页面并且不重新加载或导航离开时持续存在,而本地存储之类的东西会在该范围之外持续存在。


这是一个在应用程序启动时进行 HTTP 查询的示例(即,打开/重新加载页面),可以在控制器和其他消费者之间共享

angular.module('so', [])

.factory('sharedData', function($http) {
  // this factory is a promise  
  return $http.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(res => res.data);
})

.controller('someController', function(sharedData) {
  sharedData.then(post => {
    this.post = post;
  });
})

.controller('anotherController', function(sharedData) {
  sharedData.then(post => {
    this.post = post;
  });
});
<div ng-app="so">
  <dl ng-controller="someController as s">
    <dt>Post title</dt>
    <dd>{{s.post.title || 'Loading...'}}</dd>
    <dt>Post body</dt>
    <dd>{{s.post.body || 'Loading...'}}</dd>
  </dl>
  
  <pre ng-controller="anotherController as a">post = {{a.post|json}}</pre>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>