带有 Html5Mode 的 Angular-UI-Router 刷新页面问题 [英] Angular-UI-Router with Html5Mode refresh page issue
问题描述
我有一个使用 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.
这篇关于带有 Html5Mode 的 Angular-UI-Router 刷新页面问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
