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

this is part 52 of angularjs tutorial in
this video we'll discuss multiple named
views in angular one of the benefit of
using UI router over ng route is that it
provides support for multiple named
views let's understand what this
multiple name to use are and the
problems they solve with an example on
the Left we have students page and on
the right student details page here is
what we want to do on the students page
we want to display all the three student
totals that is total male students total
female students and the grand total
whereas on the student details page we
only want to display total male students
in total female students we don't want
to display the grant order these student
totals are coming from student parent or
HTML notice we have got 3 H 3 elements
displaying those 3 totals now if we
comment this last H 3 element that's
displaying the grand total then this
grand total is going to disappear from
both the pages and that's not what we
want we don't want grand total only on
the student details page they still want
it on the students page we are going to
solve this problem by using multiple
named views if you look at student
parent or HTML at the moment within this
template we only have one view and it's
not named let's use two named views here
and to include a named view I'm going to
make use of a development and on that
I'm going to use the UI view directive
and name it I'm going to name it total
data I'm going to include another named
view and I'm going to name this student
data
so this named view is going to be
responsible for displaying the grand
total whereas the other named view is
going to be responsible for displaying
child view specific content so in the
case of students view this is going to
display a list of students and in the
case of student details view it's going
to display student specific details on
the student details page we don't want
to display the grand total so we are not
going
to make use of this named view so that's
our first step create the two named
views this named V will be responsible
for displaying the grand total and this
view is going to be responsible for
displaying child view specific content
all right the next step is to modify our
student parent dot student state so now
notice within our student parent or HTML
we've got two named views so we have to
tell which controller and template to
use to generate content for each of
these named views and we are going to
tell that by using views property within
the respective states
so for student State we want to use both
the named views so I'm going to use
views property here and the value for
this is going to be a JavaScript object
and I'm going to first use this student
data named view so the content for this
is going to come from students
controller and students dot HTML view
template so what I'm going to do is move
all this content right here okay so now
we have clearly told for this named view
this is the controller that is going to
be responsible and this is the view
template to use by using controller as a
syntax and we're also using a resolve
property here all right now so that's
going to display the list of students we
also want the grand total and to display
that grand total we have another named
view total data now we have to tell
which controller and view template is
going to display that okay so we are
going to make use of this name to view
so this is one of our name to view and
I'm going to use another named view
total data and we will have to tell
which controller and view template to
use so
sort of typing it I'm going to copy
these three properties and change them
as required so the template that we are
going to use is students total and the
controller that we are going to use is
students total controller and we also
want to use controller as syntax so
students total ctrl we don't have this
template and the controller will create
now so first let's create the controller
now I'm going to make a copy of this
controller function that we already have
here and modify it as required so the
name of the controller is going to be
students total controller and notice
what we are injecting into the
controller function we are injecting
student totals so what is this this is
nothing but they resolve the dependency
that's coming from the parent state so
if we look at our state right here
students for this the parent a student
parent and within student parent we have
a resolved dependency
student totals so this can be passed
safely to all the child controller
functions and student total controller
is the child controller function so it's
perfectly okay to pass that resolved
with dependency to that so we are using
the total property of that and then you
know assigning it as a value for this
total property on the view model now we
can use this property in the view for
displaying grandaughter
okay so we have created the students
total controller function the next step
is to create the view template which is
students total dot HTML so I'm going to
right click on the templates folder add
an HTML file and I'm going to name it
students total dot HTML all we are going
to do here is use an h3 element and we
want to display grand total so we are
going to use a binding expression and
remember we have used controller a
syntax so student total ctrl is the name
of the instance
that we are going to use the total
property and the final step that is left
is to modify student details state so
within student details view we don't
want the grand total that means we are
not going to make use of this named view
we are only going to make use of this
named view student data so let's go to
our script J's file and again we are
going to use views property the value
for this is going to be a JavaScript
object and the named view that we are
going to make use of a student data and
for this named view this is the
controller to use and view template to
use so the value is another JavaScript
object with all the properties
what is the template to use what's the
controller and they are also using
controller as syntax all right so those
are all the changes required
now let's reload our app and see if it
works as expected
so let's go to students page and look at
that we see the grand total along with
the other totals and list of students
let's go to student details page and
look at that we don't see the grand
total here and we only see in our total
male students in total female students
and that child use specific data student
details so let's quickly look at those
steps so step one in student dot parent
our student parent or HTML include two
UI view elements and provide a
meaningful name step two in script rjs
modify student parent dot student state
to use views property to tell which
controller and template file to use for
each of the named views in student
parent dot HTML step three and script or
J's create students total controller
function and in to that we are injecting
the parent resolved dependency property
and the next step is to create students
total dot HTML which is our view
template and step 5 in script RJ's
modify student parent or student detail
state now
this here we using only one of the named
views because we don't want to display
the grand total we only want to display
child view specific content that is the
student details so we are only using one
named view student data thank you for
listening and have a great day