角路由参数约束上 [英] Angular route parameters contraints

问题描述

我是从Asp.net MVC世界里，路由约束是真正有用的到来。我目前正在开发一个角度JS SPA并入客户端的路由。

I'm coming from the Asp.net MVC world where route constraints are really useful. I'm currently developing an Angular JS SPA that incorporates client side routing.

我也想参约束添加到我的客户端路线为：

I would also like to add parameter constraints to my client-side routes as in:

$.routeProvider.when("/post/:id/:name?")

在这里，我想我的约束：ID 参数才有效，当这些数字

where I'd like to constrain my :id parameter to only be valid when these are numbers.

我还没有发现在角文档（这是可怕的，至少可以说）类似的事情。能不能做到？也许还参数默认？

I haven't found anything similar in Angular Docs (which are horrible to say the least). Can it be done? And maybe also parameter defaults?

推荐答案

有设置路由约束没有内置的方式，但你可以做到这一点很容易自己使用的决心功能pretty。

There's no built-in way to set route constraints, but you can do it pretty easily yourself by using the resolve feature.

module.config(function ($routeProvider) {
    $routeProvider.when('/post/:id/:name', {
        controller: 'PostCtrl',
        resolve: {
            id: function ($q, $route) {
                var deferred = $q.defer(),
                    id = parseInt($route.current.params.id, 10);

                if (!isNaN(id)) {
                    deferred.resolve(id);
                } else {
                    deferred.reject('Id is not a number');
                }

                return deferred.promise;
            },
            // This isn't really needed, you can extract the name using 
            // $routeParams.name as you usually would in the controller.
            name: function ($route) {
                return $route.current.params.name;
            }
        }
    });
});

通过做这种方式你可以注入 ID 和名称到 PostCtrl ：

module.controller('PostCtrl', function ($scope, $routeParams, id, name) {

});

ID 在这种情况下将是一个数字。当然你也可以同时使用 $ routeParams.id 和 $ routeParams.name 但那些总是字符串。

id in this case will be a number. You can of course also use $routeParams.id and $routeParams.name but those are always strings.

在案件多了一些别的东西通过，则承诺将被拒绝，你需要处理的是，通常在MainCtrl'或'AppCtrl如果你正在做一个SPA。

In case something else than a number is passed, then the promise is rejected and you need to handle that, usually in the 'MainCtrl' or 'AppCtrl' if you're doing a SPA.

module.controller('AppCtrl', function ($scope, $log) {
    $scope.$on('$routeChangeError', function (ev, current, previous, rejection) {
        $log.error('Error changing route: ' + rejection);
        // Will print: Error changing route: Id is not a number
    });
});

更新

您可以用决心与 $ routeChangeError 事件组合来验证路线和重定向错误。决心属性始终运行，即使它们没有在控制器注射

You can use resolve in combination with the $routeChangeError event to validate the route and redirect on error. The resolve properties are always run, even if they aren't injected in the controller.

resolve: {
    validation: function ($q, $route) {
        var deferred = $q.defer(),
            id = parseInt($route.current.params.id, 10);

        if (!isNaN(id)) {
            deferred.resolve();
        } else {
            deferred.reject('VALIDATION FAILED');
        }

        return deferred.promise;
    }
}

在您的家居控制器只需添加：

In your home controller simply add:

module.controller('AppCtrl', function ($scope, $location) {
    $scope.$on('$routeChangeError', function (ev, current, previous, rejection) {
        if (rejection === 'VALIDATION FAILED') {
            $location.path('/home');
        }
    });
});

这是解决这个问题一个比较哈克方式，你可能会使用UI的路由器（我没有尝试过的一种）的更好。不幸的是这是不可能听 $ routeChangeStart 并在需要时中止。否则，这可能已经解决了很多更好。

This is a quite hacky way to solve it and you might be better of using ui-router (I haven't tried that one). Unfortunately it's not possible to listen to $routeChangeStart and abort if needed. Otherwise this could've been solved a lot nicer.

这篇关于角路由参数约束上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！