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

2022-01-21 00:00:00 angularjs html angular-ui-router

我有一个使用 angular-ui-router 和 html5mode(true) 的应用.在运行和路由到其他状态时,一切似乎都运行良好.

我的默认状态是 app/calendar,它是在 module.run() 期间设置的

但是当我在其他路线中刷新页面时(比如说 app/profile),它会将我带回应用程序/日历.

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

对象 {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' });});

我总是提供同一个文件.

还有我的前端状态配置

<代码>(功能(){angular.module('Appt.Main').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider){$locationProvider.html5Mode(true);var 日历 = {名称:'日历',网址:'应用程序/日历',控制器:'Appt.Main.CalendarController',controllerAs: '日历',模板网址:'/app/main/calendar/calendar.html'},客户 = {名称:'客户',网址:'应用程序/客户',控制器:'Appt.Main.CustomersController',controllerAs : '客户',模板网址:'/app/main/customers/customers.html'},个人资料 = {名称:'个人资料',网址:'应用程序/个人资料',控制器:'Appt.Main.ProfileController',控制器作为:'配置文件',模板网址:'/app/main/profile/profile.html'},设置 = {名称:'设置',网址:'应用程序/设置',控制器:'Appt.Main.SettingsController',controllerAs : '设置',模板网址:'/app/main/settings/settings.html'};$stateProvider.state(日历);$stateProvider.state(客户);$stateProvider.state(profile);$stateProvider.state(设置);}]);})();

我的模块.run

<代码>(功能(){'使用严格';angular.module('Appt.Main',['ngRoute','ui.router','Appt.Directives']).run(['$state','$stateParams', function ($state,$stateParams) {console.log('Appt.Main 正在运行')控制台.log($state.current);控制台.log($stateParams);$state.transitionTo('日历');}])})();

解决方案

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

<IfModule mod_rewrite.c>重写引擎开启#RewriteBase/relative/web/path/RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -d重写规则 ^(.+) - [PT,L]RewriteCond %{REQUEST_URI} !=/favicon.ico重写规则 ^(.*) index.htmlRewriteCond %{HTTP:Authorization} !^$RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]</IfModule>

您可以在 来自 ui-router 的文档

另外,您最好为您的应用设置一个基础或不使用基础.

您可以将 <base href="/" >插入您的 head 标签(或其他基本文件夹,具体取决于您的结构).

或者你可以使用:

$locationProvider.html5Mode({启用:真,要求基础:假});

所以你不必使用基地.

另外,您不需要 .run 来定义默认状态,ui-router 可以使用 $urlRouterProvider.when$urlRouterProvider.otherwise您可以阅读更多文档p>

由于我是 Angular 的新用户,这正是我为解决我的问题所做的,这与您的问题非常相似.希望对你有帮助.

I have an app that uses angular-ui-router with html5mode(true). Everything seems to work fine when running and routing to other states.

My default state is app/calendar which is set during module.run()

But when i refresh the page while i'm currently in other routes(lets say app/profile) it takes me back to app/calendar.

Debugging i noticed that the $state.current is always empty after i refresh the page

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

if only the $state.current has value i can just transistion to the current state.

Is there anything that i am missing?

Hopefully someone can help.

My server routing looks like

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

i'm always serving the same file.

and my front-end state configuration

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

        }]);

    }
)();

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


            }])
    }
)();

解决方案

I'm not sure if this is going to solve your problem, but I had a very similar problem. First thing I had to do to use html5mode was to use a rewrite property so the app would reload from the index file when i refresh the page, no matter what $state I'm. This is the code I´m using, but it may be different, depending on the serverside you are using.

<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>

You can read more here, in the docs from ui-router

Also, you'd better set a base or not use a base for your app.

You either insert <base href="/" >inside your head tag (or other base folder, depending on your structure).

Or you can use:

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

So you don't have to use a base.

Also, you don't need a .run to define a default state, ui-router can do it with $urlRouterProvider.when or $urlRouterProvider.otherwise You can read more in the docs

Since I'm new user to Angular, this is just what i did to solve my problem, which was very similar to yours. Hope it can help you.

相关文章