我正在使用ui-router进行状态管理,但是我认为自己的.htaccess重写规则遇到了麻烦。使用/#/帐户样式网址时,我所有的状态均有效。现在,我启用了html5模式,但我的应用程序没有像以前那样呈现。它似乎加载了我的index.html以及我的所有js和css文件等,但实际上并未初始化任何状态。
这是我的文件夹结构:
root/ app/ components/ angular/ ... images/ scripts/ controllers/ directives/ ... app.js styles/ views/ .htaccess ...
我的虚拟主机DocumentRoot指向我的 app/
app/
这是我的状态为我的app.js:
'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中的重写代码。我认为这可能是错误的。
<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用户有效。
<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>
另外,请确保您不是<base href>错误的受害者。有关更多信息,请参见ui路由器常见问题。
<base href>