如何使用AngularJS和RESTful API提供404

时间:2013-07-20 17:42:06

标签: rest angularjs

假设您有一个连接到RESTful API的AngularJS应用程序,并且您有“/ item /:itemId”的路由。

.when('/item/:itemId', {
    templateUrl: '/static/partials/item-detail.html',
    controller: ItemDetailController
})

angular.module('angServices', ['ngResource']).factory('Item', function($resource) {
    return $resource('/api/item/:itemId', {}, {
        query: { method: 'GET', params: { itemId: '' }, isArray: true }
    });
});

如果用户转到“/ item / 9”并且不存在具有itemId 9的对象,Angular将从API接收404,但不会自然地将404返回给用户。

在其他问题中,我看到人们建议创建一个拦截器,并在找不到资源时将Angular重定向到404错误页面。

var interceptor = ['$rootScope', '$q', function(scope, $q) {
    ...
    function error(response) {
        if (response.status == 404) { window.location = '/404'; }
    ...
$httpProvider.responseInterceptors.push(interceptor);

但是,我想返回一个正确的404与原始请求的URL用于搜索引擎优化目的。

此外,上面的解决方案首先加载页面然后重定向(就像Twitter曾经做的那样),所以它是次优的。

在将请求传递给Angular应用程序之前,我是否应检查服务器端以首先查看资源是否存在?这样做的缺点是它不适用于应用程序中的断开链接。

最好的方法是什么?

1 个答案:

答案 0 :(得分:0)

也许这个jsfiddle可以帮到你。

http://jsfiddle.net/roadprophet/VwS2t/

angular.module('dgService', ['ngResource']).factory("DriveGroup", function ($resource) {
    return $resource(
        '/', {}, {
        update: {
            method: 'PUT'
        },
        fetch: {
            method: 'GET',
            // This is what I tried.
            interceptor: {
                response: function (data) {
                    console.log('response in interceptor', data);
                },
                responseError: function (data) {
                    console.log('error in interceptor', data);
                }
            },
            isArray: false
        }
    }
    );
});

var app = angular.module('myApp', ['ngResource', 'dgService']);
app.controller('MainController', ['$scope', 'DriveGroup', function ($scope, svc) {

    $scope.title = 'Interceptors Test';

    svc.fetch(function (data) {
        console.log('SUCCESS');
    }, function () {
        console.log('FAILURE');
    });

}]);

我试过这个并且工作正常。我只将获取方法更改为获取

在您的情况下,您需要将console.log('FALIURE');更改为$location.path('/404');

GL!