使用 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>
我已经阅读了多个可以与 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>