angularjs - 如何捕获无效的 URL？

Question

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

我已经构建了一个自定义 404 页面('www.mysite/#/error/404')，如果用户键入一个像 'www.mysite/#/invalidUrl' 这样的 url，用户就会被重定向到该页面。此功能是通过以下代码片段实现的:

$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'
                }
            }
        });

我正在 try catch 用户请求的无效 URL，如下所示显示给用户。

找不到您请求的网址
请求:www.mysite.com/#/invalidUrl

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

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

Answer 1

惊人的!谢谢Radim Köhler .我不知道我怎么没有降落在那个 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 });
        });

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

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