Question

我正在使用AngularJS和ui-router并使用以下代码捕获404并加载到404模板中：

$urlRouterProvider.otherwise(function($injector, $location){
  $injector.invoke(['$state', function($state) {
    $state.go('404');
  }]);
});

它保持URL完整而不是重定向，但显示404模板：

.state('404',
{
    views: {
        'body': {
            templateUrl: 'partials/404.html',
        }
    }
});

通常它会重定向到根状态：$urlRouterProvider.otherwise('/');

但是，当HTML5模式关闭且用户访问根网址时，例如http://www.domain.com/app/它会加载404状态，而不是重定向到http://www.domain.com/app/#/

如何保持上面的404状态代码，但在访问初始页面时将其重定向到hashbang？如果请求是主页以外的其他内容，那么只有404加载吗？

我无法使用$stateNotFound或$stateChangeSuccess并且需要一种方法来检查它是否是实际配置设置本身内的主页请求，可以在/和state.404之间切换在其他声明中{{1}}。

Answer 1

这样的事情（似乎确实奏效）。

$urlRouterProvider.otherwise(function($injector, $location){
    $injector.invoke(['$state', function($state) {
        if( $location.$$path == '')
            $state.go('home'); // redirect to /#/
        else
            $state.go('404'); // else go to 404 state
    }]);
});

但是有更好的方法来解决这个问题吗？

Answer 2

使用httpErrorResponseInterceptor！当httpResponse发生时，这将被触发。这是一个例子

angular
    .module('myApp')
    .factory('httpErrorResponseInterceptor', ['$q', '$state', function ($q, $state) {
     return {
         responseError: function error(response) {
             switch (response.status) {
                 case 404:
                     $state.go('404');
                     break;

                 default:
                     console.log("Unhandled HTTP error:", response);
             }

             return $q.reject(response);
         }
     };
 }
]);

使用AngularJS Router加载404状态

2 个答案: