iPhoneJavaDev iPhoneJavaDev - 27 days ago 4x
AngularJS Question

angular.js:13550 Error: Could not resolve 'item1' from state 'mainpath'

In my default homepage, I have 1 navbar with 2 items.

My config for the main ui-view is:

.state('mainpath', {
url: '/mainpath',
template: '<main-html></main-html>'
... ]);

So that when I go to my site, by default it will point to localhost:8080/mainpath. But then since I have a navbar with 2 items in my main page, I set the selected item to item1, and item1's md-nav-sref is pointing to "item1State". So I was expecting when I go to localhost:8080, it will not go to localhost:8080/mainpath, but will go directly to localhost:8080/mainpath/item1.. What I mean here is the URL will change, but the content is the same since my main-html file contains the navbar. I just want the item1 html to load in the ui-view of the main-html, which is currently not happening.

My config for the view that was loaded by default is:

.state('item1State', {
url: '/item1',
template: '<item1></item1>'
.state('item2State', {
url: '/item2',
template: '<item2></item2>'
... ]);

When I tried to switch to different navbar items, I get the error: "Could not resolve 'item1' from state 'mainpath'", same with item2.
So I got 2 problems, one is I'm expecting that my url will be localhost:8080/mainpath/item1 since I have navbar item1 selected by default when i load my homepage. Next is this error when selecting navbar items.
I am a total newbie in angularjs, I hope you understand. Thanks


both of your routers are separate , you are not nesting them. to use the parent routes in child , you need to configure it that way.

.state('contacts', {
    abstract: true,
    url: '/contacts',

    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>'
.state('contacts.list', {
    // url will become '/contacts/list'
    url: '/list'
.state('contacts.detail', {
    // url will become '/contacts/detail'
    url: '/detail',

more info here