ui-router的$ urlRouterProvider.otherwise与HTML5模式

时间:2014-06-06 17:04:11

标签: html5 angularjs angular-ui-router

考虑以下ui-router的wiki稍微修改过的代码。

var myApp = angular.module('myApp',['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    // for any unmatched url
    $urlRouterProvider.otherwise("/state1");

    $locationProvider.html5Mode(true);

    // now set up the states
    $stateProvider
        .state('state1', {
            url: '/state1',
            templateUrl: "partials/state1.html"
        })
        .state('state1.list', {
            url: "/list",
            templateUrl: "partials/state1.list.html",
            controller: function($scope) {
                $scope.items = ["A", "List", "of", "Items"];
            }
        })
        .state('state2', {
            url: "/state2",
            templateUrl: "partials/state2.list.html",
            controller: function($scope) {
                $scope.things = ["a", "set", "of", "things"];
            }
        })
});

运行python 3的SimpleHttpServer,尝试访问时遇到404 errorhttp://localhost:8000/state1234324324

为什么$urlRouterProvider.otherwise("/state1");没有/state1将所有未知路由重定向到state,其中question具有与/state1关联的已定义{{1}} URL?

1 个答案:

答案 0 :(得分:9)

这是因为当您使用“/ state123413”等网址点击服务器时,它会直接返回404响应(客户端没有路由)。

你需要做的是拥有一条捕获路线。例如,你可以做快递

app.get('/*', function(req, res){
   res.render('defaulttemplate')   
}

这将强制在客户端进行路由。有关常用服务器的信息,请参阅ui路由器faq以设置捕获路由。