Angular nested scopes and controller as syntax Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 33 of angularjs tutorial in
this video we'll discuss how the
controller as syntax can make our code
more readable when working with nested
scopes this is continuation to part 32
so please watch part 32 before
proceeding here we've got three
controllers country controller state
controller and city controller notice
all the three controllers are injecting
dollars coop object into their
respective controller function and all
three of them are setting the same
property name on the dollar scope object
country controller has set it to India
state controller set it to Maharashtra
and city controller set it to Mumbai now
what we want to do is display country
state and city names like this in the
view and to do that I'm going to include
three developments so let's flip to
visual studio within our script or JS
file here we already have the code that
we have seen on the slide and within our
view I'm going to include three
developments each one nested inside
another so the outermost development is
going to display the name of the country
so on that I'm going to use ng -
controller and initialize that with the
name of the country controller which is
country controller let's do the same
thing with the other developments so in
the developments that a that is nested
directly inside the outermost
development we want to display state
name so let's set ng-controller to state
controller and then in the innermost
development we want to display city name
so let's set this controller to city
controller and then in the outermost we
want to display the country name so to
access the name property from the
country controller they simply use the
binding expression and the name of the
property that is attached to the dollar
scope object and then here we want to
display state name and in the innermost
development we want to display the city
name so let's save our changes and when
we reload this page we should say
country state and city names as expected
now if you look at this code this is a
bit confusing already now
now you know these three controllers are
nested inside each other and we have a
name property here a name property here
and a name property here so where is
this name property coming from is it
coming from city controller state
controller our country controller since
I have written this code I know that all
these three controllers have got name
property and this property is coming
from city controller this is coming this
is coming from state and this is coming
from country but for somebody new this
is already confusing now let's see how
it adds to the confusion if we want to
display data like this so at the topmost
level we want just the country name and
then in the development that is nested
it directly inside the country
development we want to display country
name as well as the state name and then
in the innermost day if we want country
state and city names so let's see how to
achieve this now again we are still
using the dollar school Bob jekt and
here so in the uttermost div we want the
country name so that's not going to
change in the div that is nested
directly inside the country controller
we want to display the state name in
addition to that we also want to display
its parent name that is the country name
now how do I get access to the parent
controller name property value to do
that we simply use dollar parent so
let's use dollar parent dot name so
that's going to give us the parent name
property value which is country name in
this case now here for the city
controller we not only want the parent
name we also want the grandparent name
so how we are going to get that now if I
do this dollar parent name this is going
to get its parent name which is state
name but we also want its current
grandparent main that is the country
name and to do that if we again do
dollar parent name it's still going to
give only the state name so to go back
to its grandparent we have to use dollar
parent dot dollar parent
mein so let's save the changes and when
we reload this page look at that we get
country country and state country state
and city names now we only have three
levels of controllers nested here now
imagine if we are going to have like ten
levels nested just imagine how deep this
taller parent dollar parent dollar
parent dot is going to get and this adds
a bit more to the confusion and we are
not really sure when I say dollar parent
or dollar penndot name to which
controller name property it's actually
referring to this will be much cleaner
when we use controller s and X now let's
see how things are going to change when
we use controller as syntax if we have
to use the controller as syntax the
first change is within the controller
itself let's go ahead and get rid of
this dollar scope object we don't
require that anymore it's not that you
shouldn't be using it you can use it but
there is no need unless you are using it
for some other purpose so I'm going to
get rid of this dollar scope object and
then use this keyword let's do the same
thing within city controller and then
within our view let's say we want to
call it as let's call it simply country
ctrl and this one is going to be state
ctrl and finally this one is going to be
City ctrl and to access the name
property from the country controller we
use country controller dot name and to
access state controller vu state
controller
so here it's going to be state
controller whereas this name property
should be coming from country controller
because we want its parent name so here
the grandparent will be country
controller and immediate parent will be
state controller and this will be
city controller so now the code is much
readable now when you look at this okay
country controller dot name what is
country controller it's an instance of
country controller so this name property
is coming from country controller now
when you look at this code ok this name
property is coming from state controller
this is coming from country controller
whereas this is coming from city
controller so the code is very readable
here let's save the changes and when we
reload this page it should still
continue to work exactly the same as
before so this code is much more
readable than using a no dollar scope
thank you for listening and have a great
day