如何捕获无效的 URL？答案

【问题标题】：How to catch the invalid URL?如何捕获无效的 URL？
【发布时间】：2015-12-09 12:11:54
【问题描述】：

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

我已经构建了一个自定义 404 页面 ('www.mysite/#/error/404')，如果用户键入 'www.mysite/#/invalidUrl' 之类的 url，用户将被重定向到该页面。这个功能是通过以下代码sn-p实现的：

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

还有以下状态sn-p：

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

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

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

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

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

【问题讨论】：

$stateNotFound 在未找到请求的状态时触发。因此，当您没有请求状态时，您可以从 $stateNotFound fun/event 中传递的 toState 参数中捕获该状态。您需要通过 javascript 获取您的域 url。两者结合将产生您正在寻找的东西。
当在地址栏中输入无效的 URL 时，它会经历一系列事件，然后才会进入我之前解释的错误状态。但是，在此过程中的任何时候都不会触发“$stateNotFound”。
那是因为您已经提到发生错误时您的目标是特定状态“.otherwise('/error/404')”。尝试从路由文件中删除它一段时间并测试是否发生 $StateNotfound 。我想，一旦你删除“否则”部分，它就会被解雇。
尝试删除 'otherwise' 条件，并尝试将假状态添加到其他条件，例如 '.otherwise('/meaningless')'。但还是一样
你检查过这个问答：stackoverflow.com/questions/23298021/… 吗？

标签： angularjs angular-ui-router http-status-code-404

【解决方案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。

【讨论】：

很高兴看到这一点 ;) 祝你好运，强大的 UI-Router ;)
我一定会的！谢谢