如果尚未加载数据，则在每个 angular 控制器中调用一个 API

Question

我正在使用 angular 和 .net 后端构建单页应用程序。除了控制器调用的单个 restful 资源外，我还有一个系统资源，它为应用程序提供系统范围的信息，我的大多数控制器都是 used/needed。我在用户第一次登录的时候调用系统服务，把数据存到rootScope中。

但是，如果由于某种原因用户刷新页面将丢失 rootScope，那么系统数据将丢失并且控制器不再可用。

如果发生页面重新加载，我已经设法让系统服务触发，但问题是在许多情况下，来自控制器的服务运行在系统服务调用之前发生，这意味着数据是控制器运行时并不总是可用。

在 angular 中处理此问题的正确方法是什么？有没有办法让我的控制器依赖于某个 rootScope 状态，如果有必要，这会导致我的系统服务 API 在控制器发出自己的服务调用之前被调用？

谢谢

Answer 1

一种方法是创建一个 factory/service ，它被注入到每个需要此信息的控制器中并被调用。这样你就不必搞乱 $rootScope.

应该缓存获取信息的请求，这样您就不必在每次切换控制器时都触发获取。如果您想在页面刷新后保留信息，您可以使用 localstorage 来存储您的数据。

示例工厂：

angular.module('appName')
    .factory('Settings', ['$http', function ($http) {
        function getData() {
            var url = 'url/to/endpoint';
            return $http.get(url, {cache: true});
        }
        return {
            promise: getData()
        };
    }]);

通过从工厂返回承诺，我们确保 getData() 调用仅运行一次。虽然在这个特定实例中它几乎没有什么区别（因为它已经返回了一个内在的承诺），但它是最佳实践要遵循的模式。

此模式还意味着 getData() 在首次使用时被调用，而不管消费控制器是否访问承诺。这允许在某些用例中无需使用承诺即可轻松公开数据（数据绑定）。

在控制器中使用：

angular.module('appName')
    .controller('VeryNiceCtrl', ['$scope','Settings', function ($scope, Settings) {
        Settings.promise.success(function(response){
            var appSettings = response;
            // do stuff
        })
}])

如果尚未加载数据，则在每个 angular 控制器中调用一个 API

Call an API in every angular controller if data not yet loaded

http

angularjs