[SOUND] Okay, we're back to our co-editor and
I'm located in lecture 34 which is located in
full stack dash course five examples folder.
And this is once again our shopping list application which is
now called shopping list events app.
There are many times in applications When there's some asynchronous communication
going on.
And while that's taking place, because usually that takes a little bit,
you need some sort of spinner or
some sort of graphic to tell the user that something is going on and he should wait.
So what we're going to do is, when a shopping list item is added to
the shopping list we're going to kick off a whole bunch of asynchronous actions.
Each of which will check whether or
not a particular item in the list A list contains the word cookie or not.
Now, since there could be more than one item in that list,
we can have more than one asynchronous action being fired.
However, while those asynchronous actions are being resolved, we would like to show
some sort of indication to the user that something is going on.
So we're going to display a loading spinner that is actually going to be our
flicker button and
if you've heard our flicker.com this is what their loading icon is like.
And since we didn't really know where this particular behavior is going to reside
We're going to place our loading spinner component.
Yet another component, we're going to have an application,
we're going to place it outside of our controller.
So, it's not even inside of our shopping list controller, as you could see the div
ends right here, it's actually sitting completely outside of it.
But it is still sitting inside of the ng-app directive,
which means it's inside of our Angular application.
So let's go to our app.js and take a look at the code.
Let's actually minimize the file browser so be a more room here.
So as you could see we have one more component called loadngSpinner and
all the component has a spinner.html template url and a SpinnerController.
Well, the template URL for it's spinner.html Is very simple.
Is just an img tag and it has as ng-if in it meaning it will get
shown this img will be part of the dam if this $ctrl.showSpinner is true.
Otherwise it will say false and the entire img tag will be pulled out
from the dam rendering going back to our you see we have a starter here.
We started our SpinnerController and we injected the rootScope and
you will see why in a minute and this is just a starter one.
Let's take a look at A very important part of the code
which is inside this ShoppingListComponentController.
That's the thing that displays the shopping list and
we injected a couple of things here.
We injected our q service, if you remember from when we spoke about promises and
we also injected this weight loss filter service.
That's an asynchronous service that checks for
names of the shopping list to check to make sure there are no cookies in it.
And we're going to invoke that service inside the $doCheck again,
$doCheck get involved every time through the digest loop.
And therefore, we could check whether or
not our number of items in our item changed.
And if it did, it means it is time for us to check whether or
not there are cookies inside of our shopping list.
Before however when we make that Asyncernous call to our
loss filter service, we're going to broadcast an event.
And notice that we're broadcasting an event using the root scope.
And the reason that is, is because the component that needs to catch that,
is a loading spinner, and it's completely not in our path of optiscope chain.
So therefore, we go back to the We using a root scope so we're starting from ng app
starting from the very top component and we're broadcasting that event down.
And the event is called shopping list call on processing and
the only data we're passing really we're mostly for
show here is on the property on in the object and its value is true.
So what this event should trigger somewhere, somewhere in application,
we don't know where, and we don't care.
Is it should show some sort of a spinner to the user saying hey,
we're processing or maybe do some other things as well.
But in our, for our purposes, all we needed to do is actually show the spinner,
so the user knows something is going on.
Then, we're going to use our $q.all and the way we're going to do that is,
we're going to loop over every item inside of our items array.
And for every item, we're going to call this WeightLoss Filter service and
call its, method called check name which returns a promise.
And will going to push every single promise into this promises ray.
As you can remember the queue service dollar sign queue service.
All takes an array of promises and then it can deal with them all at once and
that's actually what we want.
We want them to be asynchronous and all of them to be parallel at the same time.
And the reason we want that is because even if one fails which means if even if
one fails it means that we detected a cookie in there.
And we're going to go to this catch block the rest of the promises will get
cancelled automatically right there on the spot.
So the first time it detects a cookie, the rest of them will get cancelled.
And what's going to happen is it's going to do this jQuery stuff we've seen before
where it's going to find the element with that error message and go ahead and
slide it down.
And if all of them come back with a positive result, which means none of
the items in the shopping list actually contain the word cookie.
Then we're simply going to remove the error message if it's in there.
In either case however, whether it's good or not we have a finally block that will
broadcast yet another message using the dollar sign root scope service.
And will broadcast shopping list processing and
on with the value of force which means we've done.
We have completed all of our asynchronous communication.
Nothing else is being process, so therefore,
go ahead and turn off that spinner.
Okay, so we've set up broadcasting the on event when the spinner should turn on.
And we've set up the broadcasting of the event
that the spinner should turn off at the end of all this asynchronous processing.
Let's go to our actual spinner controller and
implement the event listener to catch those events.
So the first thing we're going to do is we're going to go ahead and
use our $rootScope that we injected right here into our controller.
We're going to call this $on method and the $on method is going to look for
shoppinglist all lowercase processing.
That's the name of our event and we need the handler function.
But I need the name and it's going to pass us event and data.
Okay, we'll put a semicolon here and now we could actually log what the event is.
So event and we'll log what that is and we'll also log what the data is.