Как обрабатывать ресурс, не найденный с помощью маршрутизации AngularJS

Question

В традиционном веб-приложении, управляемом данными, мы часто пытаемся загрузить ресурс на основе идентификатора, переданного в URL-адресе. Если ресурс не существует, мы возвращаем страницу 404.

Как мы должны достичь того же в AngularJS? Я следовал AngularJS телефон каталог учебника и в настоящее время, выполнив следующие действия следует ресурс не существует (обратите внимание, это использует угловую $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