Angular-UI-Router 与 Html5Mode 刷新页面问题

我有一个应用程序使用角度 ui 路由器 with html5模式（真）。当运行和路由到其他状态时，一切似乎都工作正常。

我的默认状态是应用程序/日历这是在 module.run() 期间设置的

但是当我刷新页面而我当前处于其他路线时（可以说应用程序/个人资料）它带我回到应用程序/日历。

调试我注意到刷新页面后 $state.current 始终为空

Object {name: "", url: "^", views: null, abstract: true}

如果只有 $state.current 有值，我就可以转换到当前状态。

我有什么遗漏的吗？

希望有人可以提供帮助。

My 服务器路由好像

app.get('/:var(/|app/calendar|app/customers|app/profile|app/settings)?', function(req, res) {
    res.sendFile('/app/main/main.html',{ root: '../Appt/public' });
});

我总是提供同一个文件。

and my 前端状态配置

(
    function()
    {
        angular.module('Appt.Main').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider)
        {
            $locationProvider.html5Mode(true);

            var calendar = {
                    name: 'calendar',
                    url: 'app/calendar',
                    controller: 'Appt.Main.CalendarController',
                    controllerAs: 'calendar',
                    templateUrl: '/app/main/calendar/calendar.html'
                },
                customers = {
                    name: 'customers',
                    url: 'app/customers',
                    controller : 'Appt.Main.CustomersController',
                    controllerAs : 'customers',
                    templateUrl : '/app/main/customers/customers.html'
                },
                profile = {
                    name: 'profile',
                    url: 'app/profile',
                    controller : 'Appt.Main.ProfileController',
                    controllerAs : 'profile',
                    templateUrl : '/app/main/profile/profile.html'
                },
                settings = {
                    name: 'settings',
                    url: 'app/settings',
                    controller : 'Appt.Main.SettingsController',
                    controllerAs : 'settings',
                    templateUrl : '/app/main/settings/settings.html'
                };


            $stateProvider.state(calendar);
            $stateProvider.state(customers);
            $stateProvider.state(profile);
            $stateProvider.state(settings);

        }]);

    }
)();

我的模块.运行

(
    function()
    {
        'use strict';

        angular.module('Appt.Main',['ngRoute','ui.router','Appt.Directives'])
            .run(['$state','$stateParams', function ($state,$stateParams) {
                console.log('Appt.Main is now running')


                console.log($state.current);
                console.log($stateParams);

                $state.transitionTo('calendar');


            }])
    }
)();

我不确定这是否能解决您的问题，但我遇到了非常相似的问题。我必须做的第一件事是使用html5mode是使用重写属性，以便当我刷新页面时应用程序将从索引文件重新加载，无论发生什么$state我是。这是我正在使用的代码，但它可能会有所不同，具体取决于您使用的服务器端。

<IfModule mod_rewrite.c>
    RewriteEngine On
    #RewriteBase /relative/web/path/

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.+) - [PT,L]

    RewriteCond %{REQUEST_URI} !=/favicon.ico
    RewriteRule ^(.*) index.html

    RewriteCond %{HTTP:Authorization}  !^$
    RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
</IfModule>

您可以在此处阅读更多内容来自 ui-router 的文档 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

另外，您最好为您的应用程序设置一个基础或不使用基础。

你要么插入<base href="/" >在您的 head 标签（或其他基本文件夹，具体取决于您的结构）中。

或者您可以使用：

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

所以你不必使用底座。

另外，你不需要.run定义默认状态，ui-router可以用$urlRouterProvider.when or $urlRouterProvider.otherwise你可以在文档中阅读更多内容 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#urlrouterprovider-1

由于我是 Angular 的新用户，这就是我为解决我的问题所做的，这与你的问题非常相似。希望它可以帮助你。