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

this is part 36 of angularjs tutorial in
this video well discus angular route
service reload method this method is
useful when we won't reload just the
current route instead of the entire
application let's understand the use of
this method with an example we will
continue to work with the same example
that we worked with in our previous
videos in this series when we navigate
to slash students we see the list of
student names these student names are
coming from a database table and here is
that database table at the moment within
this table we've got 10 records and we
see all those 10 student records on this
page now let's go ahead and set a new
record into this table by executing this
insert statement let's select the data
from the table just to make sure we have
successfully inserted that new record
notice we have Rob record in the table
at this point
let's visit the same URL by clicking on
that same link once again look at that
nothing happens the new record does not
show up for the new record to show up
one way is to reload this page by
clicking on this reload this page button
when I do that notice the new record
shows up but the downside of this
approach is that it's actually reloading
the entire application meaning all the
resources required to run this
application are once again reloaded from
the server let's actually prove that by
launching browser developer tools so I'm
going to click on this button right here
and then select more tools and developer
tools this is going to launch google
chrome developer tools and at the moment
we are on the network tab and at this
point when we click this button look at
what happens
let's close this console window notice
there are 8 requests issued and 2.3
kilobytes of data transferred and if you
look at what are all the resources
reloaded from the server notice angular
script file is reloaded angular route
script file is reloaded styles dot CSS
script or J's all the resources required
to run this application are once again
reloaded from the server instead of just
reloading the
resources required for this route slash
students and that's exactly what route
service reload method does so let's
implement the reload method of the route
service so the first change that I'm
going to do is within our students and
troller function so into this function
I'm going to inject dollar route service
and on the view model object that we
already have I'm going to expose a
function and I'm going to call that
function reload data you can give this
function any name that you want and
within this function all we are going to
do is call the reload method of the
route service so now we will have this
function available in the view so what
we want is in this view we want a reload
button so let's go to students dot HTML
and just we need this unordered list I'm
going to create a button and when we
click that button we want to call reload
data function that we have just
introduced so I'm going to use the
students controller object and let's
call reload data function and the text
that we want on this button is reload
data so let's save these changes and
let's reload this page so we see that
reload data button let's launch our
browser developer tools once again and
at this point let's insert a new record
into this students table so now let's
select the data to make sure we have
successfully inserted that new record
notice there is a new record there and
at this point if you look at the data
that we have on this page we don't have
that new record and I'm going to click
this reload data button and let's see
what's going to happen look at that
now there's only one request issued and
look at the amount of data transferred
across the network 983 bytes it didn't
reload all the resources required to run
this app it just reloaded the restore
that is required to load this child so
it's just reloading this route in this
case so that is the use of the load
method of the angular route service
thank you for listening and have a great
day