Difference between $scope and $rootScope Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

they see is part 37 of angularjs
tutorial in this video we'll discuss the
difference between dollar scope and
dollar route scope the main difference
is that dollar route scope is available
globally for all the controllers whereas
dollar scope is only available to the
controller that has created it and it's
children let's understand this with an
example let's flip to your studio with
an or descriptor J's file right here we
have got two controllers red color
controller and green color controller
notice into both of the controller
functions we are injecting dollar scope
object this red color controller
function is setting red color property
on a two dollar scope object whereas the
green color controller is setting green
color property on its dollar scope
object now in addition to injecting
dollar scope object into one of these
controller functions I am also going to
inject dollar route scope and then I'm
going to set route scope color property
on the route scope object and I'm going
to initialize this with I am route scope
color and then within our HTML file I'm
going to include it development and I'm
going to make red color controller in
charge of this development so ng -
controller let's set that to red color
controller so let's copy the name of the
controller from here and specify it
right here and what we want to do with
in this development is display route
scope color property value similarly we
want to display red color property value
and finally green color property value
now if you look at the route scope color
property that's defined on the route
scope object so that's want we want
right here so let's specify a binding
expression and
include a break element and then we want
the red color property value so let's
copy the name of the red color property
value from here and specify it right
here and finally we want green color
property value so let's just change the
name right here alright I'm going to
include another break element and
another break element here let's make a
copy of this development and I'm going
to make green color controller in charge
of this development and then again we
want route scope color property value
and then we want here green color
property value so let's change the name
of the property here to green color and
last we want red color property value
let's save all these changes and reload
this page and let's see what output we
get notice root scope color property
values available in both the
developments so here red color
controller is in charge and here green
color controller is in charge now since
we have created route scope color
property on dollar route scope object
that will be available for all the
controllers so here red color controller
is in charge here green color controller
is in charge but still this route scope
color property will be available within
both the controllers because that is
defined on dollar route scope object and
this red color property will be
available for this red color controller
because that's the controller that has
created it and that's why we see I am
red color but whereas if you look at the
green color property this is created by
green color controller on dollar scope
object so that property will not be
available for red color controller and
that's why we see you know no value here
against green color controller and the
same is true for this red color property
here because right here we are in green
color controller so for the second
development green color controller is in
charge and this red color property is
find by red color controller so that
property will not be available for green
color controller so that's why here
within the scope of green color
controller we don't see red color
property and within the scope of red
color controller we don't see green
color property value so that's the main
difference now what we want to do is
display something like this in our
within the scope of red color controller
we want to display this message green
color is undefined and within the scope
of green color controller we want to
display this message red color is
undefined so let's see how to achieve
this now I am going to include a span
element right here and set the style
attribute let's set color to red and on
this pan element I am going to include
ng-show directive now when do we want to
show this directive you don't want to
show it all the time whenever green
color property is undefined so we are
you know within the scope of red color
controller so when green color property
is equal to undefined that's when we
want to display the span element so if
this condition is true then show this
panel man and what is this span element
going to tell it's going to tell green
color is undefined let's do the same
thing with the other development that we
have here so I'm going to delete this
and include the span element and we want
to show the span element when red color
is undefined so when red color is
undefined so when this condition is true
then show the span element red color is
undefined so let's save these changes
and let's reload this page look at that
within the scope of red color controller
green color
properties undefined within the scope of
green color controller red color
properties undefined thank you for
listening and have a great day