angularjs - 如果尚未加载数据，则在每个 Angular Controller 中调用 API

Question

我正在使用 Angular 和 .net 后端构建单页应用程序。除了 Controller 调用的各个 restful 资源之外，我还有一个系统资源，它为应用程序提供我的大多数 Controller 使用/需要的系统范围的信息。当用户首次登录时，我调用系统服务并将数据存储在 rootScope 中。

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

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

用 Angular 处理这个问题的正确方法是什么？有没有办法让我的 Controller 依赖于某个 rootScope 状态，如果有必要，这会导致在 Controller 进行自己的服务调用之前调用我的系统服务 API？

谢谢

Answer 1

一种方法是创建一个工厂/服务，它被注入(inject)到每个需要此信息的 Controller 中并由其调用。这样你就不必弄乱 $rootScope。

应该缓存获取信息的请求，这样您就不必在每次切换 Controller 时都触发获取。如果您想在页面刷新后保留信息，您可以使用 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()
        };
    }]);

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

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

在 Controller 中使用:

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