Question

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

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

此代码位于我的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
        });
}]);

对此行为有何帮助？问候何

Answer 1

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

How to: Configure your server to work with html5Mode

现在，这将调整状态def，以显示深层网址嵌套：

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

我们不得忘记在我们的示例中正确设置基本网址：

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

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

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

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

检查工作示例here

Answer 2

您还必须定义指向否则 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>

angularjs ui-router奇怪的行为与路线中的附加段

2 个答案: