[MUSIC] >> Okay, so we're back in the next lecture. And we're located in the folder, Lecture 52, which is located in full stack, course five examples folder. And in this lecture, what we're going to do is we're going to code up a loader, that floating spinning image to tell the user that something is going on in the system and they need to wait. Now obviously, this is not something that's going to be needed only for the public portion of our website, but also going to be needed for the admin portion of our website as well. So it sounds like we're going to need something that's going to contain things that are both modules, our future administrator module and the public module, we'll reuse. Sounds like we need a separate module that both of our modules public and the future administrative module can depend on and then share. So the module we created is called common. And it's going to sit right here in this common folder inside this source. So let's go ahead and open it up. And it's opened up our common module. And all we're doing here is we're just declaring a module called common. And using this module, we're going to create our loading spinner resource. And we're going to put it inside of this loading folder. Let's go ahead and open it up. You see we have this Loading.component.JS, let's go and open it up, and let's go over this loaded component. Obviously you could see we're attaching it to the common module, we're going to call it just simple loading, which means the tag is just going to be very simple, just a loading tag. And we don't need a template TRL since it's just one line, it's just an image is going to point to this spinner.svg and it's only going to show up if our controller tells us that the show property is true. And that's why we're using this ng-if for. Our controller LoadingController is right here. We're injecting the root scope because in a second, we're going to have to attach something to the root scope. And we're defining a $ctrl = this so we could reuse it inside of our inner functions. And this listener is something that's going to help us cancel this listener setup for the spinner:active. And let's take a look at the $onInit, our lifecycle method that will get called to initialize our LoadingController. So, what we're doing here is, to begin with, we're showing our $ctrl.show = false. And then we're setting up a listener. So some events within the application will happen. Somebody will request some URL, somebody will do some other asynchronous action and the user needs to know that something is going on so we need to turn on that spinner. Well, that action, somewhere else in the system we'll throw an event, hopefully, that will be called spinner:activate, as I told you in the events lecture, it's always a great idea to name space your string events. That way you know where they're coming from. So we name spaced it as spinner and action is activate. And we do know since this is just going to be one view and we're actually attaching the listener on the scope, on the root scope, we need to grab that listener that inside of our onDestroy when this view is being unloaded, we'll want to destroy that listener. Otherwise we're going to have memory leaks here. So that's why this listener is kind of externalized to this variable right here. And we are setting it to listener, whatever we're setting this rootScope.on too. And then we're calling that listener onDestroy to basically unregister our listener. The listener handler is going to be this onSpinnerActivate. And this just a function right here, onSpinnerActivate. The Angular passes the event and the data that came together with that event. And the only data we're interested in is this on property. And the on property is going to be either true or false. So, this spinner activate will either throw this event with true, on equals true, or on equals false. So, whatever that is, we're going to set that to the ctrl.show which should go ahead and either show or hide this spinner image in our HTML. Okay, and that's pretty much it. The only thing that's left is for us to go to our module.js.public.module.js and say that we are not just going to depend on ui.router we are also going to depend on common since that's what we named our common module just common, right? If we take a look at it again, yes it's just called common. The last but not least is to first go to index.html and we can scroll down to right under where declare's restaurant and we can do it right here. We can say Fixed position loading indicator. Okay, and let's go ahead and use that loading. Okay, so now we have a loading icon. And inside of our component as you can see, we didn't really give it any styles and that's okay, because inside of CSS we also imported this new one called common.css, with a few CSS rules that we're going to need for our common module. So we'll close that and we can actually then class this as Loading-indicator. I believe that's what it's called, right? Loading-indicator, that's correct. Let's go ahead and copy it just in case I misspell something. Loading-indicator. So that's good. And now as we save that, we should go back to our browser and open it up to make sure things are working because clearly something is not. And it is erroring out. So let's go back to our code editor, and see what we messed up here. Let's see, we have this. And we have the loading component. Did we actually import the JavaScript file? That would have been a problem if we didn't. And we did not import the JavaScript file. And that's it, that's kind of a problem, wouldn't you? Okay, so let's go ahead and make a copy of this and let's say this is our Common Module. We want to make sure to now import the module first, right? So, we need to say common/common, is that where it's sitting? common.module.js and one more thing. Let's copy it and then make another copy and say loading/loading.component.js. Okay. I think we're good. Let's go back to our browser. We'll close this. Close a bunch of these. As you can see other than the SVG wordings, which we're going to ignore, this is actually working just fine. So the last thing that's left to do in terms of our loading indicator is to have some kind of mechanism that turns on the loading indicator and then turns it off. And that's what we're going to do in the next lecture.
