具有Html5Mode刷新页面问题的Angular-UI-Router [英] Angular-UI-Router with Html5Mode refresh page issue
问题描述
我有一个使用 angular-ui-router 和 html5mode(true)的应用。在运行和路由到其他州时,一切似乎都能正常工作。
I have an app that uses angular-ui-router with html5mode(true). Everything seems to work fine when running and routing to other states.
我的默认状态是 app / calendar ,它是在module.run期间设置的( )
My default state is app/calendar which is set during module.run()
但是当我在其他路线中刷新页面时(让我们说 app / profile ),它会带我回到应用程序/ calendar。
But when i refresh the page while i'm currently in other routes(lets say app/profile) it takes me back to app/calendar.
调试我注意到刷新页面后$ state.current总是空的
Debugging i noticed that the $state.current is always empty after i refresh the page
Object {name: "", url: "^", views: null, abstract: true}
如果只有$ state.current有价值我可以转换到当前状态。
if only the $state.current has value i can just transistion to the current state.
我有什么遗漏的吗?
希望有人可以提供帮助。
Hopefully someone can help.
我的服务器路由看起来像
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.
和我的前端状态配置
(
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
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');
}])
}
)();
推荐答案
我不确定这是否会解决你的问题,但我有一个非常类似的问题。我必须做的第一件事就是使用 html5mode
来使用重写属性,这样当我刷新页面时应用程序会从索引文件重新加载,无论 $ state
我是。这是我使用的代码,但可能会有所不同,具体取决于您使用的服务器端。
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>
您可以在来自ui-router的文档
此外,你最好设置一个基数或不使用你的应用程序的基础。
Also, you'd better set a base or not use a base for your app.
你要么插入在您的head标签(或其他基本文件夹,取决于您的结构)中< base href =/>
。
You either insert <base href="/" >
inside your head tag (or other base folder, depending on your structure).
或者您可以使用:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
因此您不必使用基数。
此外,您不需要 .run
来定义默认状态, ui-router
可以用 $ urlRouterProvider.when
或 $ urlRouterProvider.otherwise
你可以在文档中阅读更多内容
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
由于我是Angular的新用户,这正是我为解决我的问题所做的,这与你的问题非常相似。希望它可以帮到你。
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屋!