如何捕获无效的URL？

Question

我正在使用 Angular JS ui-router 创建一个简单的 HTML 站点。

我有一个自定义的 404 页面 ('www.mysite/#/error/404')，如果用户键入 url，例如 'www.mysite/#/invalidUrl'，用户将被重定向到该页面。此功能是通过以下代码片段实现的：

$urlRouterProvider
            .when('', '/')
            .when('/home', '/')
            .otherwise('/error/404');

以及以下状态片段：

$stateProvider.state('404', {
            parent: 'app',
            url: '^/error/404',
            views: {
                'errorContent@main': {
                    controller: 'error404Controller',
                    templateUrl: 'js/general/templates/error404.html'
                }
            }
        });

我正在尝试捕获用户请求的无效 URL 以显示给用户，如下所示。

找不到您请求的 URL
请求：www.mysite.com/#/invalidUrl

我试过监听“$stateNotFound”事件，该事件似乎只在请求特定的无效状态时触发。我也尝试过监听事件“$stateChangeStart”、“$locationChangeStart”和“$locationChangeSuccess”，但找不到实现此功能的方法。

这可能吗？请分享您的想法 - 谢谢

Answer 1

太棒了！谢谢 Radim Köhler. I don't know how I didn't land on that thread 我搜索时帮助我得到了答案。

我更改了该线程中的答案以适合我的场景，我将在下面留下以供其他用户参考。

$stateProvider.state('404', {
            parent: 'app',
            url: '^/error/404',
            views: {
                'errorContent@main': {
                    controller: 'error404Controller',
                    templateUrl: 'js/general/templates/error404.html'
                }
            }
        });

        $urlRouterProvider
            .when('', '/')
            .when('/home', '/')
            .otherwise(function ($injector, $location) {
                var state = $injector.get('$state');
                state.go('404', { url: $location.path() }, { location: true });
        });

所以神奇的变化是为 'otherwise' 选项定义的函数。我没有更改 'error' 状态的 URL。相反，我使用 'state.go' 激活状态“404”并将位置路径作为状态参数传递。

设置location=true会带你到URL的状态，location=false不会。无论您喜欢哪种方式，现在都可以轻松访问无效 URL。

如何捕获无效的URL？

How to catch the invalid URL?

http-status-code-404

angularjs

angular-ui-router