Question

我的应用程序使用 angular-ui-router 和 html5mode（true）。在运行和路由到其他州时，一切似乎都能正常工作。

我的默认状态是 app / calendar ，它是在module.run（）期间设置的

但是当我在目前处于其他路线时刷新页面时（比如 app / profile ），它会将我带回应用程序/日历。

调试我注意到刷新页面后$ state.current总是空的

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

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

我有什么遗失的吗？

希望有人可以提供帮助。

我的服务器路由类似于

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

我总是提供相同的文件。

和我的前端状态配置

(
    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);

        }]);

    }
)();

我的module.run

(
    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');


            }])
    }
)();

Answer 1

我不确定这是否能解决您的问题，但我遇到了类似的问题。我必须要做的第一件事就是使用重写属性，这样当我刷新页面时应用程序会从索引文件重新加载，无论我是html5mode。这是我使用的代码，但可能会有所不同，具体取决于您使用的服务器端。

$state

您可以在docs from ui-router

中阅读更多内容

此外，您最好为您的应用设置基础或不使用基础。

您可以在头标记（或其他基础文件夹中）插入<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>，具体取决于您的结构。

或者您可以使用：

<base href="/" >

所以你不必使用基地。

此外，您不需要$locationProvider.html5Mode({ enabled: true, requireBase: false });来定义默认状态，.run可以使用ui-router或$urlRouterProvider.when来执行此操作你可以read more in the docs

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

Answer 2

我遇到了同样的问题，我通过添加以下内容来修复它：

app.config(..., $urlMatcherFactoryProvider) {
    $urlMatcherFactoryProvider.strictMode(false);
});

这是因为我的路线在路径的末尾添加了一个尾部斜杠/，$stateProvider无法识别该网址，从而将我带回了本地状态。

具有Html5Mode刷新页面问题的Angular-UI-Router

2 个答案: