Tip:
Highlight text to annotate it
X
This video is going to demonstrate the resolve
property when you're configuring
your routes in AngularJS.
Now, this is kind of an advanced example so I've
included the source and the demo in the
description of the video.
So make sure to check those out.
I'm definitely going to focus on the why to use this rather
than the how.
Because it's more important to understand the difference
between not using it and using it then to go, kind of, step
by step to the code and explain every little piece of
how to set it up.
So hopefully the demo will serve that purpose.
And I'm going to focus again on showing you this before bad
example and then an after good example.
So let's start with the before example.
So if you look over here, if I click on enterprise d, you can
see that automatically jumps to enterprise d tab, the image
renders immediately, and then rank and name appear, and then
the data loads, then you finally see the data set.
So the behavior is automatically jumped to the
view, render everything you can, and then once the data
comes, render the rest of it.
So if you've never seen the resolve property before,
that's probably what your app is doing right now.
If we compare this to the good after example, we'll go back
to the home and refresh here.
Like when I click on enterprise d, now you'll see
it'll do a, kind of, application wide loading.
And then, it'll take its time for the data to be prepared.
And once the data is ready to be displayed, then it'll
switch over and render the view appropriately.
You'll see again when I click on
Voyager, it will be loading.
Then once everything's ready, it will render
out the entire page.
You won't have any holes in your view or anything.
Everything will just look nice.
Another benefit of this is that if you navigate to a page
that doesn't exist, say for example Warbird, it'll try and
load that page, but it does not navigate away from your
current view.
So that view stays put.
It tries to resolve that Warbird it sees it doesn't get
a data set, so it doesn't change the viewing.
It sticks with what it already has.
So this is a much better example, in my opinion.
It behaves a lot more like Gmail.
That's why I compared it to Gmail in the title of this.
Because in Gmail, if you click on Start or any of your
labels, you'll see that it doesn't automatically switch
over and show you an empty inbox.
It will wait a second once the data's ready, then it'll show
that little loading bar at the top.
And then, it'll display it once the data's ready.
So this to me is a much better user experience.
So let's dive into what this is all about to show how you
use it without going line by line.
I just want to show how it all kind of hooks
up and works together.
So the first thing you'll notice is in this route that
I've configured is that this ship that I pass in is going
to be the Starship as a parameter.
So the Starship is going to be part of this route.
It's going to be on the current
params of the Starship.
This is different from if you're used
to using about params.
This doesn't get resolved until after
the route is changed.
So you can't use route params because that wouldn't be ready
yet in the resolve.
That route params doesn't get set until after resolve has
been executed.
So if you're going to use the route params, you have to use
route.current.params.
That's just a little gotcha to watch out for.
And the Starship is going to be here.
I'm going to take that then pass it into my resource call.
So that's just get crew by Starship.
This is out of the scope of this video.
But you can check out the code to see how this is working.
I'm just going to pass this in as a query to Mongo lab.
This is just some simple data I set up.
Anyway, how this works is that it's using a Promise.
So you can see I'm using the Promise library included with
Angular called $q or I've never heard anyone say it out
loud so $q works for me.
I just created a deferred object, returned the Promise,
and then this view and this control and everything won't
be created and instantiated until
this Promise is satisfied.
So I can either resolve it and pass in your results at
whatever you want to be, or you can reject it if for some
reason it fails.
So what I'm doing in this example is I'm resolving it
from the result.
So the way that this works, so we went through how we took
the parameter and passed it into the resource call.
Now the way we're going to take the data set and then
pass it into the controller, it looks like this.
In our resolve object we have a crew property.
And that crew is defined as this function.
And this function is going to return this Promise and
resolve the result of our resource call here.
So you can see, we have our success callback.
And on success our result gets passed into
our deferred resolve.
So to, kind of, go through that one more time just to see
how it bounces around.
We go resolve crew and then the crew is actually this
result from our success.
We get the result back, and then we pass it into this
resolve method of our deferred object.
And then that'll satisfy it.
And say, OK, now I'm ready.
You can instantiate the controller, and pass the crew
into the controller, and assign it to the scope.
So you can see crew goes from here to here and then assigned
to the scope and automatically displayed on the page.
You can compare that to the before example.
You would simply, you can see that I'm calling the resource
and then once the resource is ready, it's going to assign
the crew to the result.
So it behaves pretty much the same.
But it's not using the Promise, it's not using the
resolve, it's just doing it in the controller.
So the controller instantiates, the view
renders, and there's no data to display.
So you'll see that empty, those empty
portions, the view.
But in the after, it waits for all of this to happen by using
the Promise.
And by passing that result into essentially the
controller after this is done.
So hopefully that explains what's going on.
I guess one last thing to mention is that if you use
reject, you can pass in whatever you
need into the reject.
And you can handle that in a route change error event.
You can get the rejection and use it for whatever.
I'm just popping up an alert.
So you can either resolve a reject any
of these route changes.
And they will be triggered, the resolve will pass in
whatever you define here into the controller, or reject will
be handled in that route error change event.
So that's the resolve property and routing.
Hopefully that makes sense.
If you have any questions, please ask them
on the mailing list.
If you ask them in the comments in this channel, I'll
try to answer them myself.
But I may not get around to them, I don't know.
I'll try to be as helpful as I can.
But the mailing list is a much better place to collaborate
with everyone else.
So hopefully, that's helpful.
Hopefully the demo makes sense.
Again, check out the code, play around with it, and
definitely use this to improve the experience of your
AngularJS apps.
Hope that helps.