Vivek Vivek - 4 months ago 20x
AngularJS Question

Angular: Nested state not working in UI-Router

Multilevel nesting is not working in ui-router. I have added "ui-view" inside a template named as "tpl.hello.html" which is a template of state "home.hello". This "home.hello" state is a child state of "home" state. After that i've added following state in stateprovider:

.state('home.hello.test', {
url: '/test',
templateUrl: 'tpl.hellonested.html'

But this "home.hello.test" state does not load up inside "home.hello" state.

Here is the plunkr for a look.


I didnt see any problem, and based on your plunkr, your routes are


So if you go to "Home.Home1", it will NOT load "Home.Home1.Test", but if you load "Home.Home1.Test", it will also load all its parent states. Here is a plunkr (just modified it a little).