AngularJS:can't使用ui路由$state获取html5模式url
AngularJS: can't get html5 mode urls with ui-route $state
我正在使用ui路由器进行状态管理,但我认为我的.htaccess重写规则有问题。当使用/#/account样式的url时,我的所有状态都有效。现在我已经启用了html5模式,但我的应用程序没有像以前那样渲染。它似乎加载了我的index.html以及所有的js和css文件等,但实际上并没有初始化任何状态。
这是我的文件夹结构:
root/
app/
components/
angular/
...
images/
scripts/
controllers/
directives/
...
app.js
styles/
views/
.htaccess
...
我的vhosts DocumentRoot指向我的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路由器的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路由器常见问题解答。
如果在不允许编辑Apache配置的共享主机中工作,您可以在.htaccess
文件中设置它,以使$locationProvider.html5Mode(true)
工作(正如@Shanimal在@nfinitelop答案中指出的那样):
RewriteEngine on
RewriteBase /path/to/app #change this!
# 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]
不要忘记在HTML <head>
中添加<base href="/path/to/app/">
。
相关文章:
- Emberjs应用程序加载在除Index之外的所有路由上
- 正在使用$location.path(.)路由ng视图
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 未激发路由的控制器属性上的观察者
- AngularJS ui路由器html5模式中断路由
- 发送json对象或使用express路由呈现视图
- 使用主干网和rails的静态页面路由
- 如何使用Passport保护路由终结点
- 有没有办法用routerLink/router.navigation附加查询/路由参数
- Nodejs和express路由,如何处理客户端的承诺
- TinyMCE实例在切换角度路由选项时会消失
- 什么'在Express中路由时,应用程序级中间件和路由器级中间件之间的区别是什么
- 使用Ampersand.js路由模块化应用程序
- Angular 2路由已弃用:如何检测CanActivate
- 格式化获取请求的路由
- AngularJS:can't使用ui路由$state获取html5模式url
- 以编程方式打开一个state在react中的路由
- $state.go()不路由到其他状态,#/null在url
- 用jasmine测试路由时,Angular的空$state名称