angularjs - confusion about nested named views with angular-ui-router

Question

Using angular-ui-router, an external routing plugin for angular found here, I am attempting to understand how the nested named views work. I got the initial demos working fine, but tried to make some modifications, like this;

$stateProvider
   .state('default', {
      url: "/default",
      views: {
         "viewA" : { templateUrl: "angular/partials/default.A.html" },
         "viewB" : { templateUrl: "angular/partials/default.B.html" }
      }
   })
   .state('state1.list', {
      url: "/state1list",
      views: {
         "viewAList" : { 
            templateUrl: "angular/partials/state1.list.html",
            controller: function($scope) {
               $scope.items = ["A", "List", "Of", "Items"];
            }
         }
      }
   });

The idea is that I am setting the list contents to a named view that is nested inside of the default.A.html file.

Error

The error message I receive is this;

Error: Could not resolve 'state1.list' from state 'default'

HTML

The html looks like this;

index.html

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

angular/partials/default.A.html

<h1>Default.A.HTML</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view="viewAList"></div>

angular/partials/state1.list.html

<h3>List of State 1 Items</h3>
<ul>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

angular/partials/default.B.html

<h1>Default.B.HTML</h1>
<hr />

After further testing, it seems that the route name might have been the issue. When I changed the route to default.list, it worked. Can anyone confirm/elaborate on this? — Ciel
– Ciel, Commented Aug 11, 2014 at 21:00

Sid · Accepted Answer · 2014-08-11 21:10:49Z

1

The problem is that when you supply state1.list, the 'state1' state is considered to be the parent of the 'state1.list' state. But you don't have a state named 'state1'. Once you change it to 'default.list', the inferred parent is 'default', which works because you do have a 'default' state. If you created a new state named 'state1' and then another one named 'state1.list' then that would work as well.

Naming Your States (From https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views)

No two states can have the same name. When using dot notation the parent is inferred if it is not explicitly provided, but this doesn't change the state name. When not using dot notation, the parent must be explicitly provided, but you still cannot name any two states the same, for example you can't have two different states named "edit" even if they have different parents.

answered Aug 11, 2014 at 21:10

Sid

7,6412 gold badges31 silver badges42 bronze badges

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

1 Comment

Ciel Over a year ago

An important detail that I wish I had found on the docs. Thank you so much for clarifying.

Collectives™ on Stack Overflow

angularjs - confusion about nested named views with angular-ui-router

Error

HTML

index.html

angular/partials/default.A.html

angular/partials/state1.list.html

angular/partials/default.B.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Error

HTML

index.html

angular/partials/default.A.html

angular/partials/state1.list.html

angular/partials/default.B.html

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related