在航线附加段angularjs UI路由器奇怪的行为 [英] angularjs ui-router strange behaviour with additional segment in route
问题描述
当我添加一个错误段的路线，我的痛苦与UI的路由器有问题。
I'm suffering a problem with ui-router when I add a wrong segment to the route.
一个例子...... http://xxx.xxxxx.xxx/roles 的正常工作。这是一个没有参数定义的路由。但是，如果我在浏览
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.
这code是在我的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
推荐答案
没有完全确定哪里是theissue这里...但我创建的工作plunker ，这应该有助于看到看到 HTML所需要的5 和 UI路由器一起工作。在这情况下，服务器端的配置正确，这应该工作的开箱。请首先检查：
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:
- How to: Configure your server to work with html5Mode
现在，这将被调整状态画质，展现深层链接嵌套：
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',
...
});
要做出以下wroking所有这些调用：
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>
我们必须不能忘记正确设置基本URL，在我们的例子：
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路由器奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
