1

Consider a certain route let's say myapp\profile which has two modes (buyer/seller) What i would like to achieve is:

  • keep the same route url for both modes
  • Alternate the view with different HTML files (lets say buyer.html, seller.html), of course each view has it's view model.
  • Sharing some logic between the two modes.
  • I would like to have a controller/logic to each mode

What i already considered:

  1. Thought about using ui-router's sub states, but I dont want to change the url.
  2. Thought about creating this 'profile' route and while navigating to it, figure the mode (buyer/seller), and then $state.go to a new state (but again, i would like to keep same route name at the end so it's not ok)
  3. Ideally thought i could navigate to my shared controller and then render the correct view and controller, but this idea kinda messed up me.

Could you share what is a clean way of doing this?

Improve this question

1 Answer 1

Reset to default
1

most use cases

Normally, in order to dynamically select a template for a state, you can use a function:

state = {
    .....
    templateUrl: function($stateParams){
         if ($stateParams.isThis === true)
             return 'this.html'
         else
             return 'that.html'
    }
}

but...

Unfortunately you can't pass other injectables to the templateUrl function. UI.Router only passes $stateParams. You don't want to alter the URL in anyway so you can't use this.

when you need to inject more than $stateParams

But you can leverage templateProvider instead. With this feature, you can pass a service to your templateProvider function to determine if your user is a buyer or seller. You'll also want to use UI.Router's $templateFactory service to easily pull and cache your template.

state = {
    ....
    templateProvider: function($templateFactory, profileService){
        var url = profileService.isBuyer ? 'buyer.html' : 'seller.html';
        return $templateFactory.fromUrl(url);
    }
}

Here it is working in your plunkr - http://plnkr.co/edit/0gLBJlQrNPUNtkqWNrZm?p=preview

Docs:

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

It sounded interesting untill u mention showing and hiding different values, which means i can't really hold two different templates for each mode. I don't want one manipulated template, it makes things messy.
I updated it to reflect using different templates based on the $stateParams
wow, first i didn't know u can handle the template url dynamiclly! But i'll challenge this idea, i am guessing i could have userService (as an example) instead of having $stateParams right?
I'm guessing you could, I'm not entirely sure though as I haven't needed this functionality in my own app.
I just dont want to have a different url other than "myapp/profile", trying to figure the meaning of the data added to url as u showed.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.