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

this is part 38 of angularjs tutorial in
this video we'll discuss how to cancel
route change in an angular application
let's understand this with an example we
will continue to work with the same
example that we have been working with
in our previous videos in this series
let's say that the moment we are on this
list of students page at this point if I
click on any other navigation links like
home or courses we want to present the
user with this confirmation message are
you sure you want to navigate away from
this page at this point if I click OK we
want to allow the route change and the
user will be navigated to the new route
on the other hand if I click cancel then
we want to cancel the route change and
the user will stay on the same page
this technique is extremely useful when
you have a long form that you're filling
let's say for example you have filled
90% of that form and at that point you
have accidentally clicked on one of the
navigation links and at that point if
that website allows you to navigate to
that new route without any sort of
confirmation like this you will lose
your unsaved data on the other hand if
the website displays a confirmation
message like this you can click the
cancel button and get to stay on the
same page and retain your unsaved data
so let's see how to implement canceling
route change in an angular application
let's flip to visual studio so here we
are within our students controller
function into this controller function I
am going to inject dollar scope object
and on this dollar scope object I am
going to call dollar on function now
when route navigation occurs in an
angular application there is an even
that is triggered and that event is
dollar route change start event so we
want to handle that event using this on
function so the event is dollar route
change start so that's the even that we
want to handle so when that event is
triggered this is the function that is
called and this even handler function is
going to have three parameters the four
first parameter is the event object
itself the second parameter is the next
parameter which has information about
the next route that we are navigating to
and the third parameter is current which
has information about the current route
that we are on now when this event is
triggered what do we want to do the
first thing that we want to do is
display a confirmation message like this
to display a confirmation message we are
going to use javascript confirm function
so what's the message that we want to
display to the user the message is are
you sure you want to navigate away from
this page so that's the message that we
want to display to the user
now this confirm function is displaying
it's going to display a confirmation
message box like this with OK and cancel
button when we click OK the function
will return true when we click cancel
the function returns false and that's
when we want to cancel route change so
when we click cancel it this function is
going to return false
I'm going to apply not operator so not
of false is true that's when we want to
cancel route change now how are we going
to cancel route change to cancel the
route change we are going to use this
event object so this event object
contains information about the event
itself which is the route change event
and that's what we want to cancel to
cancel the event we are going to call
prevent default function on the event
object so that is all the code that is
required to cancel a route change in an
angular application so let's save our
changes a reload our page and at this
point look at this when I click on home
link we get this message are you sure
you want to navigate away from this page
now when I click OK in our route changes
allowed and we get to navigate to the
new route on the other hand if I click
cancel look at this route change is
canceled and we get to stay on the same
page now if you look at the confirmation
message it's the same confirmation
message for all the navigation links
right now what I want to do
display the confirmation message like
this now let's say at the moment we are
on students page and when I click on
this home link we want to display
message saying are you sure you want to
navigate away from this page to /home we
also want to display the information
about the new route that we are
navigating to in this confirmation
message so similarly if I am navigating
to courses then it should say are you
sure you want to navigate away from this
page to slash courses and we can very
easily achieve that by using this next
parameter of the event handler function
so on the next parameter we can use
dollar dollar route dot original path
properties now at this point the
question that obviously comes to your
mind is how will I know we have these
properties on this next parameter well
the easiest way is to log this next
parameter and then inspect all the
properties it has got will discuss how
to do that in our next video for now
let's use this property to get the
information about the new road that we
are navigating to so we have our next
parameter here so the message that we
want to display is are you sure you want
to navigate away from this page too
and to that we are going to append
dollar dollar Route dot original path
all right so let's save these changes
and let's reload our page and look at
this when I click on home are you sure
you want to navigate away from this page
to slash home let's cancel that and when
I click courses are you sure you want to
navigate away from this page to slash
courses we also get the information
about the new route that we are
navigating to alright now we can also
achieve exactly the same thing by using
another event and that is location
change start event when a route change
occurs in an angular application there
are two events that are triggered route
changed
which we are handling at the moment and
another event is location change start
you can handle either of these events to
achieve exactly the same thing the only
difference is that the next and current
parameters of this even handler function
has got the complete next and current
URLs that we are navigating to okay so
as a result the confirmation message
that we see will be slightly different
let's actually implement this and see
that in action so instead of Route
change start I am going to use location
change start and this next in current
parameters here are going to have
complete next in current URLs so we
don't have to dig into properties like
this so we can simply delete that and
save our changes let's reload this page
and at this point look at this when I
click on home link look at this it's
asking are you sure you want to navigate
away from this page do HTTP colon four
slash four slash localhost
they have the port number slash home so
we have the complete URL there similarly
when I click on courses and now are you
sure you want to navigate away from this
page to slash courses in our next video
we'll discuss the different events that
are triggered when a route change occurs
in an angular application thank you for
listening and have a great day