[SOUND] Okay, so we're back in our code editor and

I'm located in lecture 41, just located in fullstack-course5 examples folder.

And this code sample is basically the same as lecture 40, but

we're bringing our spinner back.

Except we're bringing our spinner back, and it's now going to respond.

Instead of to the custom events that we're throwing,

it's going to respond to the events that the UI-Router is throwing.

So the first thing we need to do is go to our shoppinglistmodule.js and

import our Spinner module.

And we see here we're importing the ui.router, and

we're importing the Spinner module as well.

Now the Spinner module is going to be slightly different.

Let's go ahead and go to the component.js which is where the main logic is located.

We're declaring the component loadingSpinner and

the component is going have the spinner controller.

In this controller, we're going to do the following.

On the $init, we're going to go ahead and listen for some of these events.

Number one is we're going to listen for the $stateChangeStart event.

And when the change set start event fires,

we're going to respond by setting the controller showSpinner to true.

Well, showSpinner to true,

well showSpinner = true will turn on our spinner image and make it visible.

If we look to our components template, and

you'll see that we have an ng-if with a controller and showSpinner.

So the showSpinner property Is true, this image will show up.

Let's go back to the component.js.

So point is if we detect the $stateChangeStart,

this is when the UI-Router is starting the transition.

It will turn the showSpinner to true.

It will also remember the function that the $on method produces, because

that function is something we could cancel listening for this event later.

And what we're going to do is we're going to have outside of our $Init

function this cancellers array.

And we're basically going to push our cancel for

this particular event, our cancel function up this cancellers are right.

And you'll see in second why we are doing that.

We're also going listen for $stateChangeSuccess.

That means that the transition has finished, and

therefore we can go ahead and turn off the spinner by setting showSpinner = false.

Once again,

this listener will get pushed onto our canceler's array that we'll use later.

And the last but not least, the $stateChangeError.

So if any error occurs, we don't want our spinner to keep going on and on forever.

We want the spinner to stop.

And therefore, we're listening on this $statechangeerror.

And we're also setting our show spinner to false if that occurs.

Because that means the transition really has ended, unfortunately unsuccessfully.

And once again, we're taking the cancel function for

that listener and we are pushing it under our cancellers array.

Okay, so the very last part is, is that we are using the lifecycle method

$onDestroy when this scope is getting destroyed.

We are going to go ahead and take our cancellers array.

That's what we've been pushing everything on,

since it is sitting outside of the $onInit.

We're going to take this cancellers array and for each member of that array.

We're going to go ahead and invoke this function and take the item on that array.

Which is what is going to get past into it through each iteration and

we'll going to invoke it.

Cancelling, listening for that particular event.

Okay, so all that's left is to save, go to our browser, and let's try this out.

We'll click and you could see it's spinning,

showing us that something is working.

So, if we click on here again it's so quick, and

since we're not really reaching out to any asynchronous services.

It's so quick that we don't even see that at all.

So, as we keep clicking here we're not going to see the spinning.

Where if we go home again, and click on this we'll see the spinning again.

And that is an indication to the user that something is going on

while the next state is loaded.

Okay, so in a nutshell, that's pretty much the features of UI-Router.

And believe it or not, we actually went pretty deep on that topic as well.

Before we finish the entire UI topic.

I do want to show you where to get the commutation for this UI-Router.

Go ahead and Google UI dash router.

You can even Google angular.

And you'll see that you get to this GitHub page

which is going to be the UI-Router GitHub page.

What you want to do is it's a little bit unfortunately confusing the way they

set it up here.

Because they're so many versions flying around and most of them, again,

unfortunately are pointing to the wrong one.

What you want to do, is you want to scroll all the way down on that page.

And you'll see an In-Depth guide link.

If you click that In-Depth guide link, by and large,

this documentation is pretty accurate, and it's actually pretty good.

Another thing to point out, is that very soon hopefully,

UI-Router is going to release it's 1.0 version.

And the 1.0 version is going to be very much component-centric, which is something

that Angular is really moving towards in Angular 2 and in Angular 1 as well.

It's moving to the component based architecture.

So watch out for that and once it actually is released

you will no longer even have to specify controllers in your states.

You will directly be able to specify components for

that are responsible for handling the entire state that you're defining.

Okay, so let's summarize.

UI-Router exposes numerous state change events that

our code is able to listen out for.

All UI-Router events are fired on the $rootScope.

They're cell events in particular,

that we're probably interested in almost all the time.

One of them is $stateChangeStart.

That is the event that signals that the state transition has started.

It could call event.preventDefault to prevent the transition from finishing.

$stateChangeSuccess indicates a successful transition end.

And $stateChangeError indicates that the transition failed,

including having some errors in the resolve.

Now you need to listen for this particular event $stateChangeError,

to catch all errors during state transition.

For example, the errors that come out from the resolve functionality

are not displayed in the console and are basically swallowed.

And the only way you could look at them is to actually listen out for

the $stateChangeError event of the UI-Router.

Lecture 41, Part 2: Router State Transition Events

Single Page Web Applications with AngularJS

Rencontrer les enseignants