Angularjs ngRoute重定向到"未找到"基于ajax数据的页面

时间:2015-07-03 18:54:16

标签: angularjs angular-ui-router ngroute angularjs-ng-route

我在这里使用https://docs.angularjs.org/tutorial/step_07https://docs.angularjs.org/tutorial/step_08中的示例进行演示。我们有以下路由:

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

当我们转到链接/phones/abcdefg时,没有json文件与查询匹配,并且会出现一个空模板。在这种情况下,我们应该被重定向到" 404 not found"页。在实际情况中,例如,当我们去链接" / phones /:phoneId"时,会发回下面的json。没有匹配的phoneId。

{phoneIdMatch: false}

根据ajax数据,将ng-route重定向到的传统方式或最佳方式是什么?

1 个答案:

答案 0 :(得分:1)

如果要求不存在的电话,一个好的RESTful后端会回复404响应。

要处理该响应,您只需向$ http承诺添加错误回调:

$http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
  $scope.phone = response.data;
}).catch(function(response) {
    // do what you want here
});

如果您想要的是转到特定路线,例如' / 404',您可以使用$ location服务:

.catch(function(response) {
    if (response.status === 404) {
        $location.url('/404');
    }
});