Question

我确定这是一个配置错误，但不确定如何使用角度正确地绕它。

我的状态设置如此

$stateProvider
    .state('app', {
        url: '',
        abstract: true,
        templateProvider: ['$templateCache', function ($templateCache) {
            return $templateCache.get('app/main/main.html');
        }],
        controller: 'MainController',
        resolve: {
            Pages: ['PageFactory', function (PageFactory) {
                return PageFactory.getAll();
            }]
        }

    })
    .state('app.home', {
        url: '/home',
        views: {
            'content@app': {
                templateProvider: ['$templateCache', function ($templateCache) {
                    return $templateCache.get('app/page/page.html');
                }],
                controller: 'PageController'
            }
        },
        resolve: {
            Page: ['$stateParams', 'PageFactory', function ($stateParams, PageFactory) {
                return PageFactory.get($stateParams.id);
            }],
            ModuleData: function () {
                return {};
            },
            Form: function () {
                return {};
            }
        }
    });

现在我的问题是如果PageFactory.get（$ stateParams.id）失败，那么页面会重新加载，然后重新加载并重新加载。

以下是PageFactory的示例，如您所见，它返回一个promise

angular.module('app').factory('PageFactory', ['$http', '$q', function ($http, $q) {

    var urlBase = 'api/page';
    var factory = {};

    factory.getAll = function () {
        var $defer = $q.defer();

        $http.get(urlBase)
            .success(function (data) {
                $defer.resolve(data);
            })
            .error(function (error) {
                $defer.reject(error);
            });

        return $defer.promise;
    };

    factory.get = function (id) {
        var $defer = $q.defer();

        $http.get(urlBase + '/' + id)
            .success(function (data) {
                $defer.resolve(data);
            })
            .error(function (error) {
                $defer.reject(error);
            });

        return $defer.promise;
    };

}]);

可以限制尝试解析的次数，或者我应该首先以不同的方式设置它？

我在将网站从一个地方移动到另一个地方时注意到这一点，并且需要在我的index.html页面中指定一个基本href。因为$ http试图连接到一个不存在的URL，它只是继续尝试并尝试和尝试，如果有人离开它会损害我们的Web服务器性能。

我的状态应用是我的路线状态（抽象状态），用户在进入网站时默认为app.home。我想这就是为什么它只是在重试决心？

Answer 1

当解析中出现错误时，我们也有无限循环，所以我们最终在$ stateChangeError事件处理程序中有了更多的逻辑。由于我们有这个，我们没有麻烦循环。

看看我们如何检查我们试图去哪里以及如果我们在进入家庭状态时失败，我们不会再次尝试并重定向到简单的错误状态。

这是我们的示例，这是在我们的主模块的run方法中设置的：

        $rootScope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) {

            console.log('Error on StateChange from: "' + (fromState && fromState.name) + '" to:  "'+ toState.name + '", err:' + error.message + ", code: " + error.status);

            if(error.status === 401) { // Unauthorized

                $state.go('signin.content');

            } else if (error.status === 503) {
                // the backend is down for maintenance, we stay on the page
                // a message is shown to the user automatically by the error interceptor
                event.preventDefault();
            } else {

                $rootScope.$emit('clientmsg:error', error);
                console.log('Stack: ' + error.stack);

                // check if we tried to go to a home state, then we cannot redirect again to the same
                // homestate, because that would lead to a loop
                if (toState.name === 'home') {
                    return $state.go('error');
                } else {
                     return $state.go('home');
                }

            }

        });

Answer 2

对promises使用resolve的常用方法是使用$ q.defer（）

Pages: ['PageFactory', '$q', function (PageFactory, $q) {

          var deffered = $q.defer();
          PageFactory.getAll()
            .success(function(data) {
               deffered.resolve(data);
            })
            .error(function(data) {
               deffered.reject();
            })

          return deferred.promise;
        }]

如果失败则拒绝状态更改，或者失败时可以执行任何操作。如果成功，它会传递数据。

另见这篇文章同样的事情。

Angular ui-router get asynchronous data with resolve

使用ui-router时的角度解析

2 个答案: