AngularJS：不能让HTML5模式的网址与UI路由$状态 [英] AngularJS: can't get html5 mode urls with ui-route $state
本文介绍了AngularJS：不能让HTML5模式的网址与UI路由$状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 UI路由器状态管理，但我认为我无法用我的。 htaccess的重写规则。我所有的州都在使用/＃/账户样式的URL工作。现在，我已经启用HTML5模式，但我的应用程序未呈现，像从前那样。它似乎加载我的index.html和我所有的JS和CSS等文件，但实际上没有任何初始化状态。
下面是我的文件夹结构：
根/
应用程序/
组件/
角/
...
图片/
脚本/
控制器/
指令/
...
app.js
款式/
意见/
的.htaccess
...
我的虚拟主机的DocumentRoot指向我的应用程序/
下面是我的app.js与我的状态：
使用严格的;
angular.module（'appointeddPortalApp'，['ngResource'，'ui.state'，'ui.compat'，'fundoo.services'，'ui.date'，'ngCookies']）
的.config（函数（$ stateProvider，$ routeProvider，$ locationProvider，$ httpProvider）{
访问var = routingConfig.accessLevels;
删除$ httpProvider.defaults.headers.common [X-要求，以];
$ httpProvider.defaults.useXDomain = TRUE;
$ locationProvider.html5Mode（真正的）;
$ stateProvider
.state（'根'，{
摘要：真正的，
网址：''，
观点：{
头：{
templateUrl：意见/谐音/ header.html中
}，
'搜索'： {
templateUrl：意见/谐音/ search.html'，
控制器：SearchCtrl
}，
'主要'： {
templateUrl：意见/ main.html中，
控制器：MainCtrl
}，
页脚：{
templateUrl：意见/谐音/ footer.html
}，
}，
}）
.state（'root.home'，{
网址：''，
观点：{
'内容'： {
templateUrl：意见的/ home / index.html的，
控制器：MainCtrl，
}
}，
访问：access.anon
}）
.state（'root.about'，{
网址：'/约，
父：根，
观点：{
'内容'： {
templateUrl：意见/ about.html'，
控制器：StaticCtrl
}，
'搜索@'： {}
}，
访问：access.anon
}）
.state（'root.search'，{
网址：/搜索/：城市/：类'，
观点：{
'内容'： {
templateUrl：意见/ search.html'，
控制器：SearchCtrl
}
}，
访问：access.anon
}）
.state（'root.salons_profile'，{
网址：/美发/ {ID}，
观点：{
'内容'： {
templateUrl：意见/ salons.profile.html'，
控制器：SalonCtrl，
}，
'搜索@'： {}
}，
访问：access.anon
}）
.state（'root.account'，{
网址：'/账号，
摘要：真正的，
观点：{
'内容'： {
templateUrl：意见/用户/ account.html'，
控制器：AccountCtrl
}
}，
}）
.state（'root.account.info'，{
网址：''，
观点：{
account_head：{
templateUrl：意见/用户/ account.head.html'，
}，
account_body：{
templateUrl：意见/用户/ account.my_appointedd.html'，
}，
}，
菜单：{
'帐户'： {
标识符：my_appointedd，
类：活跃
}
}，
访问：access.user
}）
.state（'root.account.appointments'，{
网址：/约会，
观点：{
account_head：{
templateUrl：意见/用户/ account.head.html'，
}，
account_body：{
templateUrl：意见/用户/ account.appointments.html'，
}，
}，
菜单：{
'帐户'： {
标识符：'约会'，
类：活跃
}
}，
访问：access.user
}）
.state（'root.account.details'，{
摘要：真正的，
观点：{
account_head：{
templateUrl：意见/用户/ account.head.html'，
}，
account_body：{
templateUrl：意见/用户/ account.details.html'，
}，
}，
访问：access.user
}）
.state（'root.account.details.account'，{
网址：'/详细信息，
观点：{
'对'： {
templateUrl：意见/用户/ account.details.account.html'，
}，
}，
菜单：{
'帐户'： {
标识符：'细节'，
类：活跃
}，
设置：{
标识符：账户，
类：活跃
}
}，
访问：access.user
}）
.state（'root.account.details.profile'，{
网址：'/个人资料，
观点：{
'对'： {
templateUrl：意见/用户/ account.details.profile.html'，
}，
}，
菜单：{
'帐户'： {
标识符：'细节'，
类：活跃
}，
设置：{
标识符：'个人资料'，
类：活跃
}
}，
访问：access.user
}）;
}）
.RUN（['$的位置，$状态，$ stateParams'，'$ rootScope'，'$饼干'，'验证'，函数（$位置，$状态，$ stateParams，$ rootScope，$饼干，验证）{
$ rootScope.client_id ='51a741eb3152c3ae7e000103';
$ rootScope $状态= $状态。
$ rootScope $ stateParams = $ stateParams。
$ rootScope $饼干= $的cookies。
$ rootScope。$在（'$ stateChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
如果（！Auth.authorize（toState.access））{
如果（Auth.isLoggedIn（））$ state.transitionTo（'root.account'）;
别的$ state.transitionTo（'root.home'）;
}
}）;
下面是我重写code，坐落在.htaccess中/应用程序。我认为这是可能是错误的。
＆LT; IfModule mod_rewrite.c＆GT;
选项+的FollowSymLinks
RewriteEngine叙述上
的RewriteBase /
重写规则^（组件|图片|脚本|款式|意见）（$ | /） - [L]
重写规则^（。*）$的index.html [L]
＆LT; / IfModule＆GT;
解决方案
这个配置已经工作了很多使用html5mode和UI路由器我们的Apache用户。
＆LT;虚拟主机*：80＆GT;
SERVERNAME我的应用程序内
DocumentRoot的/路径/到/应用
＆LT;目录/路径/到/ APP＆GT;
RewriteEngine叙述上
＃不要重写文件或目录
的RewriteCond％{} REQUEST_FILENAME -f [OR]
的RewriteCond％{} REQUEST_FILENAME -d
重写规则^ - [L]
＃改写一切以index.html来让HTML5状态的链接
重写规则^的index.html [L]
＆LT; /目录＆GT;
＆LT; /虚拟主机＆GT;
另外，请确保你不是℃的牺牲品;基地的HREF＆GT; 错误。请参阅<一href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading">ui-router常见问题解答更多信息。
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.
Here is my folder structure:
root/
app/
components/
angular/
...
images/
scripts/
controllers/
directives/
...
app.js
styles/
views/
.htaccess
...
My vhosts DocumentRoot points to my app/
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');
}
});
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>
解决方案
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：不能让HTML5模式的网址与UI路由$状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
