angularjs ui-router 奇怪的行为与路由中的附加段答案

【问题标题】：angularjs ui-router strange behaviour with additional segment in routeangularjs ui-router 奇怪的行为与路由中的附加段
【发布时间】：2014-09-24 13:55:49
【问题描述】：

当我向路由添加错误的段时，我遇到了 ui-router 的问题。

一个例子...http://xxx.xxxxx.xxx/roles 工作正常。这是一个没有参数定义的路由。但是，如果我在浏览 http://xxx.xxxxx.xxx/roles/kk 中添加另一个段，则 $urlRouteProvider.otherwise('/') 不起作用，并且应用程序正在尝试从 @ 之类的路由加载所有 Web 资源（css、html、javascript 等） 987654323@ 在控制台返回很多错误。

此代码在我的 app.config 中：

    $urlRouterProvider
        .otherwise('/');
    $locationProvider.html5Mode(true);

这是一个路由定义的例子：

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
        });
}]);

对这种行为有什么帮助吗？问候何塞

【问题讨论】：

这不是 ui-router 而是服务器问题。检查this并正确设置服务器端...
您好 Radim，非常感谢您的快速响应，但我不明白为什么如果路由不存在（例如 /roles/kk 未定义，而 /roles 未定义参数定义），.otherwise 不工作。

标签： angularjs angular-ui-router

【解决方案1】：

不完全确定问题出在哪里...但我创建了working plunker，这应该有助于了解查看HTML 5 和ui-router 协同工作所需的条件。如果服务器端配置正确，这应该是开箱即用的。请先检查：

How to: Configure your server to work with html5Mode

现在，这将调整状态定义，以显示深层 url 嵌套：

$stateProvider
    .state('roles', {
        url: '/roles/:id',
        ...
    })
    .state('roles.logs', {
        url: '/logs',
        ...
    })
    .state('roles.logs.parameters', {
        url: '/parameters',
        ...
    });

在下面进行所有这些调用：

<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：

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    ...
    <base href="/cTRk4o9HRELCQ4OK/" />

但是对于 plunker，我们应该动态设置：

<script>
  document.write('<base href="'+ document.location.pathname +'" />')
</script>

检查工作示例here

【讨论】：

嘿Radim...非常感谢。只是添加了“”标签，一切正常。
我是这么认为的，但是如果没有完整的示例，很难提示/找到罪魁祸首 ;) 享受 ui-router，先生 ;)

【解决方案2】：

您还必须定义一个指向 otherwise url 的状态，这样 UI 路由器就知道如何处理默认状态。

var app = angular.module('demo', ['ui.router']);


app.config(function($stateProvider, $urlRouterProvider){
  
  $stateProvider
    .state('roles', {
      url: '/roles',
      templateUrl: 'roles.html'
  })
  
  .state('otherwise', {
     url: '/',
     templateUrl: 'otherwise.html'
   })
  
  $urlRouterProvider
        .otherwise('/');
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>

<div ng-app="demo">

    <ul>
      <li><a href="#/roles">Roles</a></li>
      <li><a href="#/roles/ejvwekjfbkjewbv">Otherwise</a></li>
      <li><a href="#/roles/404">Not Found</a></li>
    </ul>
    
    <ui-view></ui-view>
    
      <script type="text/ng-template" id="roles.html">
        <h2>Roles Template</h2>
      </script>
      
      <script type="text/ng-template" id="otherwise.html">
        <h2>Otherwise Template</h2>
      </script>
  
 </div>

【讨论】：