Probably you have configured your UI-Router to route to specifc URLs wit something like this:

But, have you wondered, how you can add a nested UI-View in your /demo URL? Let’s say to show a partial view with its own controller or similar?

I must say, I googled some time until i found out how it works. Once you know it, it simple 🙂

I have developed a Angular Seed, where you can take a look for the whole thing. https://github.com/damirkusar/leptir-angular-seed/

But, here is how my demo module routing config looks like before adding a nested UI-View.

to understand that, here is the route configuration of my core module:

In the core route configuration, I created a root state and configured my navigation and footer because this is same for all in my case. Then i have a empty string where i replace it with this template

This is the reason, why i have in my demo or home state in the views name just an empty string. See what I mean:

The view does not have a name to match the template. You also see that the home state and demo state’s parent is root, so from this state, we are inheriting everything defined in root, without this, the nav and footer won’t be shown in under /demo or /!

So, now, let’s say we want to add in our demo’s index.html something like this:

and link it to a partial.html where we have some html code and functions. To make this working properly, we have to set it up correctly. We have to add this in our demo’s route configuration:

You see? I gave it a name “demo.partial…”. This is the way i use it in my index.html to tell ui-router that i want to include an UI-View. And with the @demo in the name, I am telling ui-router that this view belongs to my demo state. If your state is called “abc” instead of “demo”, then your name would be here “something@abc” and in your index.html you would use it as ui-view=”something”. You can use here another Controller or the same controller as the demo controller. The flexibility is very high.

So, our demo routing configuration looks like this when we are done:

 

So, I am hoping this post will help you and have fun developing..

 

Add nested UI-Views in AngularJS and Angular-UI-Router
Tagged on:

Leave a Reply

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers:

Welcome Damir Kusar

Log in

Lost your password?
%d bloggers like this: