AngularJS ui router nested views Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 51 of angularjs tutorial in
this video we'll discuss nested States
and views one of the benefit of using
ui-router
over n0 out is that it provides support
for nested States and views nested
states have parent-child relationship
this means the parent State properties
are available for use in all the child
states there are several methods for
creating nested States on this slide we
see two of the common methods one way to
create nested States is by using dot
notation in this example we have a state
and the name of the state is student
parent and we have another state here
and the name of this state is students
and notice to the name of this state we
have prepended its parent state name
using dot notation so in this example
student parent is the parent state and
students is the child state another way
to nest States is by using the parent
property with the parent name as string
so in this example notice we're using
parent property and the value for this
parent property is the name of its
parent so again in this case student
parent is the parent state and students
is the child state let's understand
these nested States and views with an
example so here is what we want to do we
have our students page and student
details page students page lists all the
student names which are hyperlinks and
then when we click on a student name
student details we're just going to
display that specific student details so
what is common between these two pages
the common part is that both the pages
are displaying student totals at the top
total male students total female
students and grand total so we want the
parent state to be responsible for
displaying the student totals and the
child states will be responsible for
displaying the respective child views
content in this case
is list of students and in student
details case student specific details so
let's see how to achieve this the first
step to achieve this is to create a
c-sharp class which is going to act as a
container for these totals so that's our
first step so we have totals property
males and females property within
student totals class so let's go ahead
and create this class so let's flip to
visual studio so I'm going to right
click on the project and add a class I'm
going to name it student totals in the
interest of time I have already typed
the required code so I'm going to copy
that and paste it within our student
totals class so we have three properties
here total males and females that's our
first step the second step is to create
a web service method which is going to
retrieve student totals from our
database table so let's add this web
service method in the interest of time I
have already typed the required code so
I'm going to copy this from our notepad
and paste it in our web service so let's
open our student service and within this
I'm going to paste that web method which
we have just copied let's go over this
the name of this method is get student
whittles and if we look at what we are
doing here we are creating an instance
of the class that we have just created
that is student totals which has got
three properties totals males and
females and then we are reading the
connection string from web config file
and then we are creating a sequel
connection object using that connection
string and then we are building our
sequel command object and here is that
sequel command object let's see what is
the sequel query going to return so I
have that same sequel query here when we
execute this we get two columns gender
and total within gender column we have
female male and grand total and within
total column we have the respective
totals the female total male total and
the grand total so these are the three
rules that we are getting when we
execute this query so we have that
sequel query right there so we are
building our sequel command object we
are opening the connection we are
executing the command and then we are
looping through the three rows that are
returned and then we are using switch
case here so we are switching on the
gender column and if you look at gender
column we are going to have these three
values female male or total so we are
switching on gender column if it's male
then we are populating the males
property of the total so object okay so
reading the value from total column
converting it to integer and storing
into that males property if it's female
than females property and if it's
default if it's not male or female it's
going to be total and that gets populate
the total property okay so we populate
all the three properties of that student
total object and then we are using
JavaScript serializer class and
serializing whatever we have in that
student total object so let's quickly
test our web service so I'm going to run
the project so we should see of a new
web service method which is get student
totals so let's quickly test that to
make sure we are getting the totals
information from the web service so get
student totals let's invoke this and
what should we get back is grand total
ten males five females five all right so
our web service is working as expected
that's our second step the third step is
to create our student parent State so
this is going to be the parent for both
students and student detail states that
we already have so let's create the
student parent State now the name of the
state is student parent and look at what
we have in the state configuration
object we have a URL we have its own
controller and template a using
controller as syntax we have not created
this controller and template yet we'll
be doing that in just a bit
and then we also have a resolve property
here so this result property is issuing
an HTTP call to the web service method
that we have just created which is get
student
Toto's that's going to return as they
totals data and then we are storing that
in this resolve property student totals
so this will be available both you know
to the controller function here that is
student parent controller as well as to
all the changing the controller
functions okay
we'll prove that in just a bit okay so
this resolve property student totals is
going to contain the totals information
and another important thing that we are
doing here is making this state abstract
by setting this abstract property to
true so what's an abstract state an
abstract state is similar to an abstract
class in c-sharp can we create an app
instance of an abstract class we can't
in a similar fashion the abstract state
cannot be activated by itself now if you
look at abstract class in c-sharp an
instance of the abstract class is
automatically created when an instance
of child class is created similarly when
a child estate is activated the abstract
state is implicitly activated so we can
think of it being similar to abstract
classes in c-sharp so that's what is an
abstract state an abstract state cannot
get activated by itself it's implicitly
activated when a child State is
activated and the benefit of using
abstract state is that the URL of the
parent state is prepended to the URL of
all the child states that means we can
remove any redundant part from the child
State URLs if that doesn't make sense at
the moment don't worry we'll look at
that in just a bit
another benefit of these parent State is
that you know whatever data that we have
exposed using resolve property that data
will be available for all the child
states as well similarly if you have
exposed to any custom data using data
property then that custom data again
will be available in all the child
states so let's create this parent State
now in the interest of time I have
already typed that code so let's copy
that from the
pad and paste that within our config
function in script or GS
so in our script dot J's we already have
student State and student details states
so just above student State I'm going to
include our parent state the name of the
state is student parent so we have all
the properties here that we have seen on
the slide now the next step is to make
students and student details States
tails of the parent state that we have
just created so the way we do that is by
you know there are several ways of
nesting States so I'm going to use the
dot notation so I'm going to copy the
parent state name which is student
parent and then specify that as the
parent to the student state by using dot
notation let's do the same with student
details
so now student details and students both
our child states now we already have URL
within the abstract parent state slash
students that's the URL here for the
parent and look at the URL for student
State it's the same okay now the URL of
the parent will be prepended to the URL
of the chain State so there is no point
in having the same thing here so we can
remove that redundant part and I'm just
going to leave a four slash there and
same idea with student details I'm going
to remove the redundant part and leave
just for / : ID so those are the
modifications required for the child it
states that's our next step now we need
to create student parent controller
function so if you look at our parent
State here we have its own controller
and we have its own template we have not
created them let's create them now let's
first create student parent controller
and if you look at what this parent
controller function is doing its
straightforward we're injecting student
totals into this controller function now
if you're wondering what is the student
totals it's nothing but the
a resolved dependency so if you look at
our parent state we are using a resolved
property and the name of the result
property student totals which is going
to contain our student totals so this
can be injected into its own controller
function so that's what we are injecting
right here student totals and the
student totals is going to have males
females and totals you know we have seen
that here total males and females we are
retrieving whatever values we have in
there and then populating the view model
using this keyword they're males females
totals and then we'll use these
properties to display that data in the
view so first let's create our student
parent controller function so let's copy
what we have in the notepad and paste it
in our script rjs so let's scroll down
and I'm going to include our students
parent controller right here let's
format this a bit so we have our student
parent controller the next step is to
create our student parent template so
notice whatever data we have you know we
are displaying that in the template in
the student parent template and another
important thing is in the student parent
template we have UI - view so if you
recollect in our index dot HTML we have
UI - view directive so into this
directive all the partial templates will
be injected but then again now in the
parent template we have another UI view
directive so this parent template will
inject its content into view eye view of
index to our HTML and then into this UI
view all the child states will inject
their content so in this case students
and student details will be injecting
their content into this UI view
directive and this template you know
whatever we have here in this parent
template this will be injected
into indexed or HTML which is our layout
view so we have three levels of view
here so we have index dot HTML we have
the student parent and we have the child
state's child views that is students dot
HTML and student details to HTML so now
let's go ahead and create our student
parent dot HTML so if you look at our
parent state within our script dot J's
file the parent state the name that we
are using for the parent template is
student parent or HTML so let's add this
HTML file to our templates folder so add
a new HTML page and the name of this is
going to be student parent and whatever
code that we have seen on this slide I'm
going to copy that and include that
within our student parent HTML and we
are also going to include UI - view
director all right now we have to modify
the links so in students in index dot
HTML we have link to students so we have
to modify that let's go to index dot
HTML so here we are using UI s ref and
the name of the state now it's a child
state so in its name we also need to
include its parents name and if you look
at what its parent name is its parent
name is student parent so I'm going to
copy that and paste it right here so the
name of the students state now is
student parent dot students so we have
its parent name as well prepend it
alright now we also have links in other
pages so let's modify them as well we
have n links in students dot HTML and
student details dot HTML let's modify
those links as well so let's open
students dot HTML again we have u is ref
here so for student details it's going
to be student parent dot studentdetail
and we have student details and again
for students it's going to be student
parent dot students all right so we have
changed all the links those are all the
things required so I'm going to build
our solution and let's navigate to the
root of our application so let's close
all the windows let's navigate to our
index dot HTML so we are on the home
page let's click on students now notice
on the students page we see student
totals and we have our student names so
when I click on student name notice we
go to student details and we still see
the student totals so here we are using
nested States and views now we said that
the parent state resolved dependencies
are available to all the child states to
prove this this is what we want to do we
want to display the total number of
students on the students page against
this list of students text okay that
means that data whatever the parent
State has made available you know it has
to be available for the child state as
well
okay let's prove that now to do that
what we are going to do is inject
student totals into students controller
function this is the change state
controller function right so the student
totals this is the result property made
available by the parent state now we are
injecting that into the child controller
function as well and then we are
assigning that to a property on the view
model and then in students dot HTML we
are retrieving it from the view model
and displaying that there okay
so let's do that so let's go to our
students controller function first of
all notice our parent state right here
the result property this is available in
the parent State and the name of it is
student totals I am going to inject this
into the child
control a function so the child
controller function here is students
controller so I'm going to inject that
into this okay student totals and then
we have the view model object so on the
view model I'm going to include a
property I'm going to call it student
totals as well and assign it to that
property and then all that is left is
within our students dot HTML so where
are we displaying list of students text
so here we have against h1 list of
students so here we want to display the
total students in brackets so what I'm
going to do this include a bracket there
and a bracket here and then here we're
using controller as syntax so students
controller dot and what is the name of
the property let's go to our script or
Jas so the name of the property student
totals
and in that we have the name of the
property there is total so let's include
that there all right so those are all
the changes required let's save them and
I am going to reload this now next to
list of students notice that we see the
total number of students as expected
thank you for listening and have a great
day