AngularJS:无法使用 ui-route $state 获取 html5 模式网址 [英] AngularJS: can't get html5 mode urls with ui-route $state
问题描述
我正在使用 ui-router 进行状态管理，但我想我是我的 .htaccess 重写规则有问题.使用/#/account 样式 url 时，我的所有状态都有效.现在我启用了 html5 模式，但我的应用程序没有像以前那样呈现.它似乎加载了我的 index.html 以及我所有的 js 和 css 文件等，但实际上并未初始化任何状态.
I'm using ui-router for state management but I think I'm having trouble with my .htaccess rewrite rules. All my states worked when using /#/account style urls. Now I've enabled html5 mode but my app isn't rendering as it was before. It seems to load my index.html and all my js and css files, etc. but not actually initialise any states.
这是我的文件夹结构:
root/
app/
components/
angular/
...
images/
scripts/
controllers/
directives/
...
app.js
styles/
views/
.htaccess
...
我的虚拟主机 DocumentRoot 指向我的 app/
My vhosts DocumentRoot points to my app/
这是我的 app.js 和我的状态:
Here is my app.js with my states:
'use strict';
angular.module('appointeddPortalApp', ['ngResource', 'ui.state', 'ui.compat', 'fundoo.services', 'ui.date', 'ngCookies'])
.config(function ($stateProvider, $routeProvider, $locationProvider, $httpProvider) {
var access = routingConfig.accessLevels;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.useXDomain = true;
$locationProvider.html5Mode(true);
$stateProvider
.state('root', {
abstract: true,
url: '',
views: {
'header': {
templateUrl: 'views/partials/header.html'
},
'search': {
templateUrl: 'views/partials/search.html',
controller: 'SearchCtrl'
},
'main': {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
},
'footer': {
templateUrl: 'views/partials/footer.html'
},
},
})
.state('root.home', {
url: '',
views: {
'content': {
templateUrl: 'views/home/index.html',
controller: 'MainCtrl',
}
},
access: access.anon
})
.state('root.about', {
url: '/about',
parent: 'root',
views: {
'content': {
templateUrl: 'views/about.html',
controller: 'StaticCtrl'
},
'search@': {}
},
access: access.anon
})
.state('root.search', {
url: '/search/:city/:category',
views: {
'content': {
templateUrl: 'views/search.html',
controller: 'SearchCtrl'
}
},
access: access.anon
})
.state('root.salons_profile', {
url: '/salons/{id}',
views: {
'content': {
templateUrl: 'views/salons.profile.html',
controller: 'SalonCtrl',
},
'search@': {}
},
access: access.anon
})
.state('root.account', {
url: '/account',
abstract: true,
views: {
'content': {
templateUrl: 'views/user/account.html',
controller: 'AccountCtrl'
}
},
})
.state('root.account.info', {
url: '',
views: {
'account_head': {
templateUrl: 'views/user/account.head.html',
},
'account_body': {
templateUrl: 'views/user/account.my_appointedd.html',
},
},
menus: {
'account': {
identifier: 'my_appointedd',
class: 'active'
}
},
access: access.user
})
.state('root.account.appointments', {
url: '/appointments',
views: {
'account_head': {
templateUrl: 'views/user/account.head.html',
},
'account_body': {
templateUrl: 'views/user/account.appointments.html',
},
},
menus: {
'account': {
identifier: 'appointments',
class: 'active'
}
},
access: access.user
})
.state('root.account.details', {
abstract: true,
views: {
'account_head': {
templateUrl: 'views/user/account.head.html',
},
'account_body': {
templateUrl: 'views/user/account.details.html',
},
},
access: access.user
})
.state('root.account.details.account', {
url: '/details',
views: {
'right': {
templateUrl: 'views/user/account.details.account.html',
},
},
menus: {
'account': {
identifier: 'details',
class: 'active'
},
'settings': {
identifier: 'account',
class: 'active'
}
},
access: access.user
})
.state('root.account.details.profile', {
url: '/profile',
views: {
'right': {
templateUrl: 'views/user/account.details.profile.html',
},
},
menus: {
'account': {
identifier: 'details',
class: 'active'
},
'settings': {
identifier: 'profile',
class: 'active'
}
},
access: access.user
});
})
.run( [ '$location', '$state', '$stateParams', '$rootScope', '$cookies', 'Auth', function( $location, $state, $stateParams, $rootScope, $cookies, Auth){
$rootScope.client_id = '51a741eb3152c3ae7e000103';
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$cookies = $cookies;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
if (!Auth.authorize(toState.access)) {
if(Auth.isLoggedIn()) $state.transitionTo('root.account');
else $state.transitionTo('root.home');
}
});
这是我的重写代码，位于/app 中的 .htaccess 中.我认为这可能是错误的.
Here is my rewrite code that sits in .htaccess in /app. I think this is might be wrong.
<IfModule mod_rewrite.c>
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^(components|images|scripts|styles|views)($|/) - [L]
RewriteRule ^(.*)$ index.html [L]
</IfModule>
推荐答案
此配置适用于我们许多使用 html5mode 和 ui-router 的 Apache 用户.
This configuration has worked for many of our Apache users using html5mode and ui-router.
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
另外请确保您不是
Also please make sure you are not a victim of <base href> bug. See the ui-router FAQ for more info.
这篇关于AngularJS:无法使用 ui-route $state 获取 html5 模式网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
