Lecture 52: Coding Up a Loader/Spinner

Loading...

Del curso dictado por Johns Hopkins University

Single Page Web Applications with AngularJS

1362 calificaciones

Johns Hopkins University

Single Page Web Applications with AngularJS

1362 calificaciones

Curso 5 de 6 en SpecializationRuby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

De la lección

Module 5 - Form Validation, Testing, and Restaurant Site Development

Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.

Lecture 51, Part 1: Basic Structure of the Restaurant App3:30

Lecture 51, Part 2: Basic Structure of the Restaurant App14:21

Lecture 52: Coding Up a Loader/Spinner6:54

Lecture 53: Coding Up $http Interceptor11:04

Lecture 54: Coding Up Menu Categories View - Part 19:34

Lecture 55: Coding Up Menu Categories View - Part 213:12

Lecture 56: Coding Up Menu Categories View - Part 310:48

Lecture 57: Single Category View - Part 14:42

Lecture 58: Single Category View - Part 211:05

Lecture 59: Single Category View - Part 313:23

Course Wrap-Up1:54

Conoce a los instructores

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[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.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play