Question

在传统的数据驱动的Web应用程序中，我们经常尝试根据URL中传递的ID加载资源。如果资源不存在，我们返回404页面。

我们应该如何在AngularJS中实现同样的目标？我已经按照AngularJS电话目录教程进行操作，如果资源不存在，我目前正在执行以下操作（注意这使用了Angular $resource服务）：

controllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$location', 'Phone',
  function($scope, $routeParams, $location, Phone) {

    $scope.phone = Phone.get({ phoneId: $routeParams.phoneId }, 
      function(phone) {
        $scope.mainImageUrl = phone.images[0];
      },
      function(response) {
        if (response.status === 404) {
          $location.path('/404'); // show phone not found page
        }
      });
}]);

这是推荐的方法吗？考虑到我需要在几乎所有资源上执行此操作，我想知道它是否会在$routeProvider内更好地处理？

Answer 1

我通常使用ngRoute并通过resovle提供资源：

angular.module('myApp').config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/phone/:phoneId', {
         templateUrl: 'views/phone.html',
         controller: 'PhoneDetailCtrl',
         resolve: {
             phone: ['$route', 'Phone', function($route, Phone) {
                 return Phone.get({ phoneId: $route.current.params.phoneId }).$promise
             }]
         }
    });
}]);

现在，电话被声明为此路由的依赖关系，并且当响应返回错误时，路由将不会更改。然后，如果您想显示错误页面，则需要收听$routeChangeError事件

angular.module('myApp').run(['$rootScope', '$location', function($rootScope, $location) {
   $rootScope.$on('$routeChangeError', function(event, current, previous, error) {
       if(error.status === 404) {
          $location.path('/404');
       }
   });
}]);

如果您有多个资源，这种方法允许您将错误处理代码保存在一个地方，并从这个逻辑中清除控制器非常方便

Answer 2

内部ngResource使用$ http以处理您可以使用的http interceptors

这种情况

如何处理AngularJS路由找不到的资源

2 个答案: