在ui路由器的家庭路线

Question

我使用https://github.com/angular-ui/ui-router库.当我尝试访问索引路由('/')时,我被重定向到404.代码:

angular.module('cr').config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'views/index.html'
        });

    $urlRouterProvider.otherwise('/404');
});

这段代码出了什么问题？虽然当我使用ui-sref ="home"时它可以工作但是网址看起来像'/#/'但是当用户输入网站名称时他只使用域名,比如'mysite.com',而不是'mysite.com/# /"

Answer 1

您已经声明了在提供任何未知/其他路线时的行为方式- 转到/404.

但是,我们还必须定义如何操作,当某些预期但不是"精确"/"未知"路径被访问时,即.创建别名

这就是.when()可以/应该使用的地方:

...

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// the unknown
$urlRouterProvider.otherwise('/404');

Answer 2

您的代码没有任何问题.您只是缺少404的显式状态.请尝试添加以下内容:

.state('404', {
    url: '{path:.*}',
    templateUrl: 'views/404'
});

要摆脱哈希(#)符号,您需要在配置模块中再注入一个依赖项:

$locationProvider

并使用.html5Mode()方法将HTML5模式设置为true,就像这样

$locationProvider.html5Mode(true);

此外,请确保您的服务器配置为允许Angular处理您的路由.例如,这是一个允许上述技术工作的Node/Express配置:

app.get('*', routes.index);

在index.js文件中(或者您配置node.js实例):

exports.index = function(req, res){
   res.render('index');
};