0

I'm looking at an Angular application that has ui-router set up such that

$stateProvider.state('thing-doer', {
            url: '/thing/:id',
            controller: 'ThingDoingCtrl',
            views: {
              'view': {
                templateUrl: 'some/view/thingdoer.html',
                controller: 'ThingDoingCtrl'
              },
              'onetypeofmode@thin-doer': {
                templateUrl: 'some/view/modeone.html'
              },
              'anothermode@thing-doer': {
                templateUrl: 'some/view/modetwo.html'
              },//etc

The intention is a page with largely the same content but which switches between different modes where the user can do different things with the thing-doer

What is frustrating me is that if you fresh you go back to the base mode...

Is it possible to change the URL when changing between these views? Or is there a better way with ui-router to express the intent of a largely unchanging page which switches mode?

Improve this question

1 Answer 1

Reset to default
1

you can use a root abstract state that contains the template with the placeholders for the view. Let's call this state 'thing-doer':

$stateProvider.state('thing-doer', {
    url: '/thing/:id',
    abstract: true
    templateUrl: 'root/template/with-views.html'
  },

Then you create children states of 'thing-doer', one for each mode you want to support:

$stateProvider.state('thing-doer', {
    url: '/thing/:id',
    abstract: true
    templateUrl: 'root/template/with-views.html'
  })
  .state('thing-doer.onetypeofmode', {
    url: 'onetypeofmode'
    views: {
      'onetypeofmode@thin-doer': {
        templateUrl: 'some/view/modeone.html'
    }
  })
  .state('thing-doer.anothermode', {
    url: 'anothermode'
    views: {
      'anothermode@thing-doer': {
        templateUrl: 'some/view/modetwo.html'
    }
  })

In this way you have an URL for any mode you want to support:

  • '/thing/:id/onetypeofmode' when you are in "onetypeofmode" mode
  • '/thing/:id/anothermode' when you are in "anothermode" mode
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

that looks perfect. I'll try it out later.
hmm, as I try to do this I realise there are child states which don't change the view... just the controller.
I'll mark this as the correct answer because it does answer the question I thought I was asking!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.