AngularJS route change events Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 39 of angularjs tutorial in
this video we'll discuss different
events that are triggered when it out
change occurs in an angular application
will also discuss logging the route
change events and even handler
parameters to inspect their respective
properties when I route navigation
occurs in an angular application these
are the events that are triggered
location change start route change start
location change success and route change
success let's prove this let's flip to
visual studio this is the same example
that we have been working with in our
previous videos in the series at the
moment we are within our students
controller function I'm going to delete
this piece of code right here
which is handling location change start
event and I'm going to inject route
scope object into the controller
function in addition to that I am also
going to inject the log servers and then
I am going to copy and paste some code
here if you look at this newly pasted
code we are handling the four events
that are triggered when air out
navigation occurs in an angular
application notice we are handling
location change start route change start
location change success and route change
success if you look at what these un
handler functions are doing they're
simply logging these statements location
change start fired route change start
fired etc so let's save these changes
and let's reload our application and
then I'm going to launch browser
developer tools at the moment notice we
are on slash students I am going to
navigate to slash courses from there and
look at that as soon as a route
navigation utters those are the four
events that are triggered route change
start location change start location
change success and route change success
in our previous video we have used
dollar dollar route dot original path
property to get information about the
next route that the user is navigating
to the question that we asked at that
point is how do we know this next
parameter of this route change start
event has
that property dollar dollar route dot
original path well the easiest way is to
log those parameters to the console and
inspect the properties they have let's
do that now let's flip to visual studio
now we'll just log the parameters of
these two even handlers we do that the
same way for the other even handlers as
well so I'm going to delete these event
handlers from here and if you look at
location change start even handler
function it has got three parameters the
first parameter is the event parameter
which contains the information about the
route change even itself and the second
parameter is next parameter which
contains information about the next
route that we are navigating to and the
third parameter has information about
the current route now even the route
change start even handler function has
got the same set of parameters so let's
simply paste them here and another thing
that I'm going to do is instead of using
dollar route scope I'm going to use this
scope object so let's use scope instead
of route scope and then at the moment we
are just logging you know this statement
saying that respect to event is fired in
addition to that let's also log the
parameters so we want to log the event
parameter in addition to that let's also
log next and current let's do the same
in route change start even handler
alright so let's save our changes and
let's actually reload our page now look
at this at the moment again we are on
slash students now let's navigate to
courses look at that route change start
fired and the first parameter here is
the event itself so when we expand this
we have a lot of information about that
event okay and then we have the next
parameter which contains information
about the
next route so we were on slash students
and we navigated to slash courses so
slash courses is the next route and look
at that the next parameter has got
dollar dollar route and when I expand
that it has got original path and look
at that original path is having a value
of slash courses the URL that we are
navigating to the next route and the
third parameter is the current parameter
which contains information about the
current route again this current
parameter has got dollar dollar route
and it also has got original path
property which contains information
about the current route so you can
inspect these parameters to see all the
properties they have and then we have
our location change start event ok so
the first parameter again here is the
event itself notice dollar location
change start and then look at the next
and current parameters you know next and
current parameters have the full URLs
the full next and current URLs so
logging these parameters will definitely
give us some valuable information and
here is the code to log the events
themselves and here is the code to log
the event parameters thank you for
listening and have a great day