2

I'm developing an AngularJs application using UI-Router(-extras) in which I use the following setup:

  .state('root', {
    url: '/{language:(?:nl|en)}',
    views: {
      'root': {
        templateUrl: 'app/root/root.html',
        controller: 'RootController'
      }
    }
  })
  .state('root.main', {
    views: {
      'main': {
        templateUrl: 'app/main/main.html',
        controller: 'MainController'
      }
    },
    sticky: true
  })
  .state('root.modal', {
    url: '/{locale:(?:nl|fr)}',
    views: {
      'modal': {
        templateUrl: 'app/modal/modal.html',
        controller: 'ModalController'
      }
    }
  })

The root state defines the language in the URL. Furthermore I have several modal and main states which have their own URL (i.e. root.main.home => /en/home).

Now I want to have some modal states that have no URL. How can I make a state ignore his parent's URL?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Remq
  • 378
  • 1
  • 3
  • 9

1 Answers1

5

To answer:

how can a state ignore his parent's URL?

we have

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

So the routes would become:

  • 'contacts' state matches "/contacts"
  • 'contacts.list' state matches "/list". The urls were not combined because ^ was used.

Also check this: how to implement custom routes in angular.js?

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks for the quick response. However, I'm aware of absolute routing using '^'. The thing I'm looking for is no URL at all. When a state doesn't inherit an URL, it can be activated while the URL of the previous page is preserved. Is it possible to get that while inheriting from a parent? (i.e. when I go from home/welcome to another state, the URL should stay the same) – Remq Aug 31 '15 at 12:05
  • Not sure what you really want, because on refresh, user will be redirected to different page. But if you want to navigate to different state, while keeping different state's url... you can check this: [How not to change url when show 404 error page with ui-router](http://stackoverflow.com/q/23298021/1679310) – Radim Köhler Aug 31 '15 at 12:08
  • The only concept (with empty url) is intended to be working on a child state *(important is child state not previous)* - where we also get that child as preselected by default... – Radim Köhler Aug 31 '15 at 12:09
  • The menu that I make is inside a modal. I don't want the menu to have it's own URL, while some other modals do need one. I found a current fix by having an ng-click event instead of ui-sref: $state.go('root.modal.menu', {}, {location: false}); I will look into $urlRouterProvider as suggested in your link to see if I can catch all redirects to the menu (and some other states), so that I can use ui-sref again. Thanks! – Remq Aug 31 '15 at 12:42