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.
The error message I receive is this;
Error: Could not resolve 'state1.list' from state 'default'
The html looks like this;
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<h1>Default.A.HTML</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view="viewAList"></div>
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
<h1>Default.B.HTML</h1>
<hr />
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments