angularjs ui-router strange behaviour with additional segment in route

by

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:

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="https://stackoverflow.com/questions/25999262/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="https://stackoverflow.com/cTRk4o9HRELCQ4OK/" />

But for plunker we should set that dynamically:

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

Check working example here

More Related Contents:

  1. AngularJS – UI-router – How to configure dynamic views
  2. How to reload the current state?
  3. Angular UI Router – Nested States with multiple layouts
  4. Nested states or views for layout with leftbar in ui-router?
  5. How not to change url when show 404 error page with ui-router
  6. Confusing $locationChangeSuccess and $stateChangeStart
  7. Set Page title using UI-Router
  8. How to send and retrieve parameters using $state.go toParams and $stateParams?
  9. Trying to Dynamically set a templateUrl in controller based on constant
  10. Angular UI Router Nested State resolve in child states
  11. AngularAMD + ui-router + dynamic controller name?
  12. Angular and UI-Router, how to set a dynamic templateUrl
  13. Using ui-router with Bootstrap-ui modal
  14. Angular – ui-router get previous state
  15. Angular UI-Router How to create a “layout” state?
  16. Angularjs ui-router. How to redirect to login page
  17. Difference between ui-sref and $state.go in AngularJS UI-Router
  18. How would I have ui-router go to an external link, such as google.com?
  19. Injecting $state (ui-router) into $http interceptor causes circular dependency
  20. stop angular-ui-router navigation until promise is resolved
  21. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  22. ui-router dynamic template path
  23. Angular-ui-router: ui-sref-active and nested states
  24. Why give an “abstract: true” state a url?
  25. Set URL query parameters without state change using Angular ui-router
  26. How to detect if a user clicks browser back button in Angularjs
  27. Two views in one AngularUI Router state sharing scope
  28. Prepend optional attribute in angular ui-router URL
  29. Replace self partial with another partial with angularjs ui router
  30. scope and controller instantiation with ui router

Leave a Comment