1

Well, I need some help about a routing problem with Angular UI-Roter. Well, actually is not a problem, it's more about to reduce code.

I have three child states:

  1. main.tab1.hello
  2. main.tab2.hello
  3. main.tab3.hello

and they have in common the same 'templateUrl' : 'hello.html'

I want to know if is possible to reduce them in only one state, and of course, when I click the button, I don't want to change the URL.

Here is my Plunkr: http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL

Any help would be appreciated.

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
robe007
  • 3,523
  • 4
  • 33
  • 59
  • Seems like you dont like states, then use
    – Petr Averyanov Oct 13 '15 at 16:36
  • Yes, it could be, but my question is focused on if it can be done by reducing code, trying to take all these three states in only one state. ¿It is possible? ¿There's a way? ¿Using parameters? That's what I want to know. – robe007 Oct 13 '15 at 16:43

2 Answers2

1

...Well, actually is not a problem, it's more about to reduce code.

In general, I would suggest to use some array of state names and just iterate that to create all its children:

var states = ["main.tab1", "main.tab2", "main.tab3"]

states.forEach(function(parentName){
    $stateProvider
      .state(parentName + ".hello", {
        views: {
        "viewC@main": {
            templateUrl:"hello.html"
        }
       },
    })  
})

There is the updated plunker with that approach in place

But there are even more sophisticated approaches, profiting from built in feature:

decorator(name, func)

There are working examples with detailed explanation:

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks for your answer ! It's what I was looking for. Please, can you edit the plunkr and help me to do it with `$stateProvider.decorator`, i can't really catch it. – robe007 Oct 13 '15 at 17:30
  • 1
    A `decorator` is a feature in `UI-Router`, which could help you to reduce code. It could do lot of common stuff at one place for all states. Maybe it is not suitable here *(you should try yourself, really)* but at least the other examples *(links above)* can show what it could do for us. Check also the doc for all available **builder functions**... hope that all helps a bit in future to reduce lot of your code ;) – Radim Köhler Oct 13 '15 at 17:39
  • Ohh, thanks again ! Now I'm trying to work with `decorator`, but still having some problems to understand. Maybe you can see it: [Setting view's name from decorator - Angular Ui Router](http://stackoverflow.com/q/33112912/2954267) – robe007 Oct 13 '15 at 22:34
  • 1
    A bit later (different time zones, right?;) but .. hope you have the answer ;) Enjoy mighty UI-Router sir! ;) – Radim Köhler Oct 14 '15 at 05:21
  • At the moment I have limited resources... I would suggest to create new Question here. You'll get larger, smarter audience (than just me)... You can later let me a link to it, and if no answer and I will now.. I could come to you later... Makes sense? – Radim Köhler Oct 14 '15 at 05:55
  • I updated my version of Angular Ui-Router and everything is working as expected. Thank you ! (All in a day's work) – robe007 Oct 14 '15 at 06:23
1

The easiest way would be to define your state object, and then simple re-use it when registering the states:

var helloState = {
    views: {
        "viewC@main": {
            templateUrl:"hello.html"
        }
    },
};

$stateProvider
    //snip...
    .state("main.tab1.hello", helloState)
    .state("main.tab2.hello", helloState)
    .state("main.tab3.hello", helloState);

Taking it one step further you could define a service that exposes all of these state definitions. If you need to override any properties you can use angular.extend on the state object.

ach
  • 6,164
  • 1
  • 25
  • 28