AngularJS UI路由器处理404s

Question

我有一个应用程序,其中包含我的API调用的服务:

var ConcernService = {
    ...
    get: function (items_url, objId) {
        var defer = $q.defer();
        $http({method: 'GET', 
            url: api_url + items_url + objId}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                console.log('ConcernService.get status',status);
                defer.reject(status);
            });
        return defer.promise;
    },

我正在使用UI-Router在状态之间转换:

concernsApp

    .config( function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/404/");


        $stateProvider.state('project', {
        url: '/project/:projectId/',
        resolve: {
            project: function ($stateParams, ConcernService) {
                return ConcernService.get('projects/', $stateParams.projectId);
            },
        },
        views: {
            ...
        }
    });

我正在使用普通的AngularJS路由器,我很难理解如何实现404s.我可以看到ConcernService抛弃console.log状态被拒绝,但我如何在状态路由器中捕获它？

Answer 1

otherwise()仅当没有其他路由匹配时才会调用该规则.你真正想要的是拦截$stateChangeError事件,这是在状态转换中出现问题时被触发的事件(例如,解决失败).您可以在状态更改事件文档中阅读有关该内容的更多信息.

对于您尝试做的最简单的实现将是这样的:

$rootScope.$on('$stateChangeError', function(event) {
  $state.go('404');
});

此外,由于$http它本身是基于promises(可以resolve解析),你的ConcernService方法可以简化为单行(我意识到你扩展它用于调试目的,但你可以很容易地链接它,只是FYI):

var ConcernService = {

  get: function (items_url, objId) {
    return $http.get(api_url + items_url + objId);
  }
}

Answer 2

我在两个404州之间有所不同:

服务器:

• 显示404页面,具体取决于服务器响应HTTP代码404
• 重要的是要确定没有网址,使用户停留在URL的地方发生了错误

客户:

• angular ui路由器找不到URL(没有定义的URL)

Angular UI-Router状态的代码:

$stateProvider
  .state('404server', {
    templateUrl: '/views/layouts/404.html'
  })
  .state('404client', {
    url: '*path',
    templateUrl: '/views/layouts/404.html'
  });

$httpProvider拦截器中的代码:

if(response.status === 404) {
  $injector.get('$state').go('404server');
}

为什么我用$injector而不是在这里$state解释.