angularjs ui-router 奇怪的行为，在路由中有额外的段 [英] angularjs ui-router strange behaviour with additional segment in route
问题描述
当我向路由添加错误的段时，我遇到了 ui-router 的问题.
I'm suffering a problem with ui-router when I add a wrong segment to the route.
示例... http://xxx.xxxxx.xxx/roles 工作正常.这是一个没有参数定义的路由.但是如果我在浏览中添加另一个片段 http://xxx.xxxxx.xxx/roles/kk $urlRouteProvider.otherwise('/') 不起作用，并且应用程序正在尝试从像 http://xxx.xxxxx.xxx/roles/app/app.css 在控制台返回很多错误.
An example... http://xxx.xxxxx.xxx/roles works fine. This is a route defined without parameters. But if I add another segment in the browse http://xxx.xxxxx.xxx/roles/kk the $urlRouteProvider.otherwise('/') does not work and the application is trying to load all web resources (css, html, javascript, etc.) from a route like http://xxx.xxxxx.xxx/roles/app/app.css returning a lot of errors in console.
此代码在我的 app.config 中:
This code is in my app.config:
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
这是一个路由定义的例子:
And this is an example of route definition:
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('roles', {
url: '/roles',
templateUrl: 'app/modules/admin/roles/index.html',
controller: 'RolesCtrl',
authenticate: true
})
.state('logs', {
url: '/logs',
templateUrl: 'app/modules/admin/logs/index.html',
controller: 'LogsCtrl',
authenticate: true
})
.state('parameters', {
url: '/parameters',
templateUrl: 'app/modules/admin/parameters/parameters.html',
controller: 'ParametersCtrl',
authenticate: true
});
}]);
对这种行为有帮助吗?问候何塞
Any help with this behavior? Regards Jose
推荐答案
不完全确定问题出在哪里...但我创建了 工作plunker，这应该有助于了解HTML 5 和ui-router 协同工作所需的条件.如果服务器端配置正确，这应该是开箱即用的.请先检查一下:
Not fully sure where is theissue here... but I created working plunker, which should help to see what is needed to see the HTML 5 and ui-router working together. In case that server side is configured properly, this should work out of the box. Please, check this firstly:
现在，这将调整状态 def，以显示深层 url 嵌套:
Now, this would be adjusted state def, to show the deep url nesting:
$stateProvider
.state('roles', {
url: '/roles/:id',
...
})
.state('roles.logs', {
url: '/logs',
...
})
.state('roles.logs.parameters', {
url: '/parameters',
...
});
要使下面的所有这些调用都有效:
To make all these call below wroking:
<nav>
<a href="roles/11">roles/11/</a><br />
<a href="roles/22/logs">roles/22/logs</a><br />
<a href="roles/33/logs/parameters">roles/33/logs/parameters</a><br />
</nav>
<nav>
<a ui-sref="roles({id:1})">roles </a><br />
<a ui-sref="roles.logs({id:2})">roles.logs</a><br />
<a ui-sref="roles.logs.parameters({id:3})">roles.logs.parameters</a><br />
</nav>
我们必须不要忘记正确设置基本网址，在我们的示例中:
we have to not forget to properly set the base url, in our example:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
...
<base href="/cTRk4o9HRELCQ4OK/" />
但是对于plunker，我们应该动态设置:
But for plunker we should set that dynamically:
<script>
document.write('<base href="'+ document.location.pathname +'" />')
</script>
检查工作示例此处
这篇关于angularjs ui-router 奇怪的行为，在路由中有额外的段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
