带有 Html5Mode 刷新页面问题的 Angular-UI-Router [英] Angular-UI-Router with Html5Mode refresh page issue
问题描述
我有一个应用程序使用 angular-ui-router 和 html5mode(true).运行并路由到其他状态时，一切似乎都正常.
我的默认状态是 app/calendar，它是在 module.run() 期间设置的
但是当我当前在其他路线中刷新页面时(比如 app/profile)，它会将我带回 app/calendar.
调试时我注意到刷新页面后 $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' });});我总是提供同一个文件.
和我的前端状态配置
<代码>(功能(){angular.module('Appt.Main').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider){$locationProvider.html5Mode(true);var 日历 = {name: '日历',网址:'应用程序/日历'，控制器:'Appt.Main.CalendarController'，controllerAs: '日历',templateUrl: '/app/main/calendar/calendar.html'},客户 = {name: '客户',网址:'应用程序/客户'，控制器:'Appt.Main.CustomersController'，控制器为:'客户'，templateUrl : '/app/main/customers/customers.html'},个人资料 = {name: '个人资料',网址:'应用程序/个人资料'，控制器:'Appt.Main.ProfileController'，控制器为:'个人资料'，templateUrl : '/app/main/profile/profile.html'},设置 = {name: '设置',网址:'应用程序/设置'，控制器:'Appt.Main.SettingsController'，controllerAs:'设置'，templateUrl : '/app/main/settings/settings.html'};$stateProvider.state(日历)；$stateProvider.state(customers);$stateProvider.state(profile);$stateProvider.state(settings);}]);})();我的module.run
<代码>(功能(){'使用严格';angular.module('Appt.Main',['ngRoute','ui.router','Appt.Directives']).run(['$state','$stateParams', 函数 ($state,$stateParams) {console.log('Appt.Main 正在运行')控制台日志($state.current)；控制台日志($stateParams)；$state.transitionTo('日历');}])})();我不确定这是否能解决您的问题，但我遇到了非常相似的问题.使用 html5mode 时我必须做的第一件事是使用重写属性，这样当我刷新页面时，应用程序将从索引文件重新加载，无论 $state 我是什么米.这是我正在使用的代码，但可能会有所不同，具体取决于您使用的服务器端.
重写引擎开启#RewriteBase/relative/web/path/RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -d重写规则 ^(.+) - [PT,L]RewriteCond %{REQUEST_URI} !=/favicon.ico重写规则 ^(.*) index.htmlRewriteCond %{HTTP:Authorization} !^$重写规则 .* - [E=REMOTE_USER:%{HTTP:Authorization}]</IfModule> 您可以在此处阅读更多内容，在 来自 ui-router 的文档
此外，您最好为您的应用设置一个基数或不使用基数.
您可以将 <base href="/" > 插入您的 head 标签(或其他基本文件夹，取决于您的结构).
或者你可以使用:
$locationProvider.html5Mode({启用:真，要求基础:假});因此您不必使用底座.
此外，您不需要 .run 来定义默认状态，ui-router 可以使用 $urlRouterProvider.when 来实现> 或 $urlRouterProvider.otherwise您可以阅读更多文档
由于我是 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.
这篇关于带有 Html5Mode 刷新页面问题的 Angular-UI-Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
