AngularJS ui router nested views

ui-router nested views tutorial
angularjs ui-router nested states
angularjs nested states example
angular ui router nested views example
ui-router parent child state
angularjs ui router parent child state
angularjs ui router nested resolve
ui router nested views resolve

In this video we will discuss nested states and views.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

One of the benefits of ui-router over ngRoute is that it provides support for nested states and views. Nested states have parent child relationship. This means properties of the parent state are available to the child state. There are several methods for nesting states. The following are the 2 common methods.

.state("studentParent", {
// parent state config properties
})
// child state config properties
})

2. Using the parent property with the parent name as string. In the example below, we are using parent property in the child state to specify who the parent is for this state.

.state("studentParent", {
// parent state config properties
})
.state("students", {
parent: "studentParent",
// child state config properties
})

Let us understand nested states and views with an example. Here is what we want to do. On the students and studentDetails pages, we want to display student totals i.e the total number of male students, female students and grand total at the top of the pages in addition to the data these pages are already displaying.

Step 1 : Create a studentTotals class. We will use this class as a container for student totals.

namespace Demo
{
public class studentTotals
{
public int total { get; set; }
public int males { get; set; }
public int females { get; set; }
}
}

[WebMethod]
public void GetStudentTotals()
{
studentTotals totals = new studentTotals();

string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT COALESCE(Gender, 'GrandTotal') AS Gender, COUNT(*) AS Total FROM tblStudents GROUP BY ROLLUP(Gender)", con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
switch(rdr["Gender"].ToString())
{
case "Male" :
break;
case "Female":
break;
default:
break;
}
}
}

JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(totals));
}

.state("studentParent", {
url: "/students",
controller: "studentParentController",
controllerAs: "stdParentCtrl",
resolve: {
studentTotals: function ($http) {
.then(function (response) {
})
}
},
abstract: true
})

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[VikashKumar-hfsc]

Thanks man. Great videos. You are very knowledgeable person. Appreciating your efforts.

[leopascal]

Amazing videos and great explanation Venkat sir, Thank you very much.
though I followed this video very keenly but somehow unable to get the desired result, header, footer and leftmenu is repeating but not the student summary of totals. Any help would be much appreciated.

[Vivekjoshi]

Thank venkat.. following your videos since uhave made your 1st

[marekcieslar]

Amazing! really thanks for your time and avesome way to make this videos!

[hk_build]

great tutorial !!..but can u create video on custom directive in angular js that will be helpul

[josephregallis]

Students link did not work in Chrome but works fine in IE in Windows 10 Pro?

[adekunleoyaniyi]

Hello Venkat, After implementing this, the index page did not render the students page. but rendering the other 2 pages, home and course. Can i know the reason why?

[astakhovandrey]

When url has "/" in "studentParent.students" state, the route system invokes "GetStudent/id" request and render studentDetails state, it seems that so must be, because route same as studentDetails url. After deleting "/" (was left just "") it works perfectly. Why you route works even you left "/"?

[ankushgats]

You forget to explain abstract property.

[MagnificentKnight]

Hello +kudvenkat Sir,
Sorry for the irrelevant commentary, but I want to be responded quickly, so I asked for help on your most recent post.

Sir would you please help me with using slug in MVC urls?
I have a URL like "WebSite/package-details/4"
here "WebSite" is controller,
"package-details" is action,
and "4" is id,

I want it like
here "tours" is action,
"package-details" is also an action linked on "tours" view,
and "desert-safari-dubai" is a package name with "id = 4"

I have another problem in ASP.NET MVC, I want to display data from two or three models in a view, where I have an HTML-Table to display records. e.g. I have Database-tables (Departments and Students), Students table have DepartmentId, and I want to display student records in an HTML-table and the DepartmentNames, from Departments Database-Table, instead of DepartmentId. so what should I do in Controller and in View. Please Upload a video tutorial on it if possible.

If you have some free time to brief me or have an article which can help me out exactly with this problem then please link it over here.

Sir, again I am sorry for irrelevant commentary.

Cardiac Regards
Jehangir Wahid

[pravindurai]

I am getting Could not resolve 'studentDetail' from state 'studentParent.students' this error in console what does mean i followed same procedure as yours..