Question

我有以下Angular功能。

功能：

var App = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

App.config(['$routeProvider', function($routeProvider) {

    $routeProvider

        .when('/', {
            templateUrl: 'views/dashboard.html'
        })
        .when('/:pages', {
            templateUrl: function(routeParams) {
                return 'views/' + routeParams.pages + '.html';
            }
        })
        .otherwise({redirectTo: '404.html'})

}]);

我有侧边栏导航控件。我已经创建了4页。

因此，当我点击这些导航项时，相应的页面会正确打开。

还有一些我尚未创建的页面。但是按照以下功能。

当我没有不存在的东西时，它必须返回到文件夹根目录中的404.html文件。

发生的事情是，我在控制台中没有收到错误，地址栏中的网址反映了最后点击的有效页面。

有人让我知道我在哪里犯了错误，这种方法对于动态路由是否正确？

Answer 1

otherwise()部分捕获与任何指定路线不匹配的路径在您的情况下，路由匹配，但模板在指定的URL处不可用 $routeProvider对此一无所知，也无能为力。

你能做什么，以某种方式（见下文）检查模板是否可用以及是否使用$location重定向到适当的路径（例如{{1} }）。

为了确定页面是否有效（即其模板是否可用），您可以尝试访问模板（使用/error/404）并捕获任何错误（表示没有模板）等。但我不喜欢不喜欢这种方法（因为依赖于模板的可用性来确定页面的存在/有效性不是一个非常好的实践 - 例如，在网络或服务器问题等情况下，它很容易导致误导性的错误消息）

我最喜欢的方法是保留“有效”/现有页面的列表并检查它。如果当前页面可用，请像往常一样继续获取模板等。如果没有，请重定向到错误页面。

上面描述的逻辑可以放在$http的{{1}}属性中（因此它会在实例化控制器并加载视图之前执行）。

E.g：

$routeProvider

另请参阅此 short demo 。

Answer 2

否则将在没有其他定义匹配时调用。但是你的/：页面定义总是匹配，否则就不会被调用。在尝试加载模板时，否则定义不会对服务器上的404作出反应。

为每个页面创建路径定义的最简单的解决方案，而不是通用的。例如 .when（'/ page1'，...） .when（'/ page2'，...）等等

Answer 3

redirect要更新$ location，因此您不必指定.html，而是指定routeParameter。

你最好这样做：

[...]
.when('/error', { templateUrl: '404.html' })
.otherwise({redirectTo: '/error'});

页面不会重定向到无效网址上的指定页面

3 个答案: