angularjs ui-router strange behaviour with additional segment in route

问题

I'm suffering a problem with ui-router when I add a wrong segment to the route.

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.

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

回答1:

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',
        ...
    });

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/" />

But for plunker we should set that dynamically:

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

Check working example here

回答2:

You also have to define an state that points to the otherwise url, this way UI Routers knows how to handle the default state.

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>

来源：https://stackoverflow.com/questions/25999262/angularjs-ui-router-strange-behaviour-with-additional-segment-in-route

标签

angularjs

angular-ui-router