AngularJS route resolve Video Lecture - Learn and Understand AngularJS

this is part 41 of angularjs tutorial in
this video we'll discuss angularjs route
resolve property let's understand this
with an example this is the same example
that we have been working with in our
previous videos in the series at the
moment we are in the home page when I
click on the students link on the Left
notice the students data loads
immediately in our case we have all the
three components of the application
running on my local machine that is the
database server the application and the
client all or on my local machine so
there is no network latency that's the
reason why the data loads immediately in
case if these three components are
present on different machines and if
there is some network latency the
students data may take a few seconds to
load let's introduce some artificial
Network latency by including thread dot
sleep statement in the web service
method so let's flip to visual studio at
the moment we are in student service and
this is the web method that is returning
lists of these student names so inside
this web method I am going to include
system dot threading dot thread dot
sleep and then I am going to make this
thread sleep for 2,000 milliseconds that
is two seconds let's build the solution
and let's reload our application now
look at this when I click on the
students link on the Left there are two
things going to happen first the route
transitions to the new route immediately
and since the data is going to take at
least two seconds to load you know on
the students page we only see the search
text box that's because we have
deliberately slowed the web service down
and if you look at what we are doing
within our students controller we are
issuing an HTTP call to a web service
method and what this HTTP call is
returning is a promise until this
promise is resolved we will not have the
data available and until that point we
don't see the list of students though we
are on the students via
let's look at that in action look at
this when I click on the students link
that route transitions to the new road
immediately initially we only see the
search text box and then once the
promise is resolved that's when the view
is updated with the data asynchronously
and we get to see the data now if you
don't want to transition to the new
route until all the promises are
resolved we can take advantage of the
route resolve property let's see how to
do that now so the first change that I'm
going to do is for this students route
so here we have the students route and I
am going to use the resolve property so
this is going to take an object an
object literal and within this object
literal I'm going to have a property and
I'm going to name it students list you
can this you can give this property any
meaningful name
you want and the value for this property
is going to be a function and this
function is going to return a promise so
to this function I'm going to pass the
HTTP service and if you look at what we
are doing all today within the students
controller notice we are already issuing
an HTTP call to the student service so
I'm going to copy this and paste inside
our function that we have created right
here so notice we are issuing the get
request to the web service and what we
are getting back is a promise and what
we want to do is we want to return
whatever this web service method returns
and that value will be assigned as the
value for this property so the students
list property here is going to contain
the list of student names and another
thing that I'm going to do is we don't
have this VM variable any move here
whatever students data we get we want to
store that in the students list property
so I'm going to include another return
statement here
alright so under the promise returned by
this HTTP call is resolved you know this
is going to prevent the route transition
from happening if the promise is
rejected for some reason then the route
transition will be canceled we will not
be navigating to the new route all right
so that's the first change within the
route we are using the Rizal property
and look at the name of the property
that we are using here as 2-lens list
now before we transition to the new
route we will have the student's data
within this property that means we can
now inject this property directly into
the students controller so when we
navigate to this route this is the
controller that is going to be in charge
so into this controller we can inject
this property so I'm going to copy that
property name and inject that into our
students controller so I'm going to
inject the property name there now there
is no need to make this HTTP call
anymore because the Rizal properties or
you know it's already making a call and
it's retrieving the data we already have
the data within this property and we can
use the property and initialize the
students variable on the view model so
what I'm going to do is on the view
model initialize the students property
using the students list that we have and
I am going to get it off this call since
we don't have to issue an HTTP call once
again from the controller we can remove
the injection of the HTTP service from
there all right so with all these
changes let's build our solution and I'm
going to reload the app so at the moment
we are on the home page and look at this
when I click on the students link here
their route you know we don't get to see
the students page we will say stay on
this home page only then the promise is
resolved that's when their route
transition happens and at that point we
see the students data immediately look
at that when I click on this too
link we are still on the homepage and
then as soon as the road transitions you
know as soon as the promise is resolved
their route transitions to the new route
and then the data loads immediately so
that's the benefit of using route
resolved property we won't transition to
the new route until all promises are
resolved so here is the change for the
route itself we're using the resolve
property here and this is a change to
the respective controller function in
this case the students control a
function so in summary the result
property contains one or more promises
that must resolve successfully before
transitioning to the nura the property
names used in the resolve property can
then be injected into the controller
this means the controller does not have
to fetch the data by itself
thank you for listening and have a great
day