Creating Nested States with AngularJS UI Router

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post we will see how to create Nested States using the AngularJS UI-Router. I went in details on how to create states (Non nested) in my previous post (click here) which gave you an idea of how the UI-Router worked and how you can navigate to different states.

We will declare one state as abstract which will act as a container to other states/views, one important thing to remember is that we cannot navigate to the container (abstract) state.

We being by taking a look at our folder structure, I have placed the angular.min.js and the angular.ui-router.min.js inside the libs folder.

 

Lets take a look at the index.html file first, we will make sure to add references to angular.min.js and angular-ui-router.min.js then we will add a ui-view tag where we will load our abstract State(More on abstract State later)

 

 

In the previous post we saw how to crease states in Angularjs ui router, but here we will create an abstract state that will hold our other states inside of it, So the ui-view tag in index.html will load a template (settings.html) that will have another ui-view tag in it that will load our other states.

Let’s first see that how we can create an abstract state, it is similar to creating normal states but the only difference is that we have to add an abstract:true property to it.

 

 

Now that we have created the abstract state we will have to include a ui-view tag in the abstract state which is a must as the abstract state will act as a container for other nested states, we do that like so

As you can see the links to the nested states have the abstract state in their path. Also notice that i am using href as well as ui-sref which we discussed at the end of my previous post.

 

Now it is time for us to create the app.js file and configure other states,

 

Notice that the state names are setting.profile and settings.account which tells Angularjs ui router that profile and account are nested stated of the settings abstract state.

 

Now when the app loads the ui-view tag in the index.html will load the settings.html file which is an abstract state and has it’s own ui-view tag which will load the rest of the nested templates.

You can go on and on nesting states and including ui-view tags in them, also you can have more that one abstract states as well, but the more nested the states the more difficult it will be to manage your code.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: