ui-route substates without nested views

Question

As you can notice in the following code, I would like to have a view for the parent "colors" state (which will show a table with list of colors), and then each color should have it's own view, not inherited from "colors".

So the hierarchy should only apply to URL's, not to views.

Any idea ?

.state('colors', {
        url: "/colors",
        templateUrl: 'views/colors/colors.html'
      })
.state('colors.yellow', {
        url: "/yellow",
        templateUrl: 'views/colors/yellow.html'
      })

I found the answer here: http://stackoverflow.com/questions/26716483/nested-ui-router-state-without-nested-view — John Smith, Apr 12 '15 at 22:16

score 0 · Accepted Answer · edited May 23 '17 at 10:24

I understand that you've found your answer. But let me append other approach and extend your solution with some more dynamic stuff. It'll a bit overcome your question, but could help you to see the magic around UI-Router

I created an example here

Firstly, we can have this kind of parent template (colors.html)

<div ui-view="">

// the content of the parent template, e.g. list of colors      

</div>

So, because the ui-view="" is defined on the parent root element, child will in fact replace it. And what's more, we would gain $scope inheritance:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

And now even more. Let's imagine that we would have more colors, not only yellow. That could lead to change in the approach, and color could become parameter:

.state('colors', {
  url: "/colors",
  ...
})
.state('colors.color', { 
  url: "/:color",
  ...

That's a big change, because now we can have url like /colors/yellow or /colors/red and all will be managed by stat colors.color

Let's continue, using the solution from here: Trying to Dynamically set a templateUrl in controller based on constant - and we can even have many templates, different by each color name.

We can then define them as constants inside of the angular module:

 .value('myTemplates', {
      "yellow"  : "views/colors/yellow.html",
      "red"     : "views/colors/red.html",
      "default" : "views/colors/default.html",
    }
 )

And our child state could use them in the run-time, based on the parameter. This would be the call:

<a ui-sref="colors.color({color: 'yellow'})">
<a ui-sref="colors.color({color: 'red'})">
<a ui-sref="colors.color({color: 'white'})">

And this will be the adjusted child state:

.state('colors.color', { 
  url: "/:color",
  templateProvider: ['$templateRequest', '$stateParams', 'myTemplates',
  function($templateRequest, $stateParams, myTemplates) {

    var templateName = myTemplates[$stateParams.color]
                    || myTemplates["default"];
    return $templateRequest(templateName);
  }],
})

Check that all in action here

ui-route substates without nested views

1 Answers1

Scope Inheritance by View Hierarchy Only