Lecture 21, Part 2: Custom Services with .factory()

Loading...

En provenance du cours de Johns Hopkins University

Single Page Web Applications with AngularJS

1353 notes

Johns Hopkins University

Single Page Web Applications with AngularJS

1353 notes

Cours 5 sur 6 dans Specialization Ruby 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.

À partir de la leçon

Module 2 - Filters, Digest Cycle, Controller Inheritance, and Custom Services

We will start this module by learning how to use Angular filters to manipulate our data into the format we want and learn how to create our own custom filters. We will then dive deep into the digest cycle, which is the process AngularJS uses to magically update our web page with the bound data from our ViewModel or the controller. Understanding this process is crucial in getting comfortable with AngularJS. We'll also see some cases where we'll need to assist that process somewhat and understand why that is. After that, we'll learn one of the most fundamental concepts in the Javascript programming language, which is Prototypal Inheritance. Clear understanding of that topic is a must before we talk about inheritance between AngularJS controllers in our application. We'll finish off the module by learning how to create our own custom Angular services as well as how to configure them. With custom Angular services we'll be able to share data across different controllers or other components in our application. We will also learn a few useful Angular directives that allow us to place looping and conditional logic direction into our HTML. You'll see that by the end of this module, you'll have the skills to create a fairly sophisticated web application that starts to use some of the more advanced software architecture techniques.

Lecture 20, Part 1: Custom Services4:25

Lecture 20, Part 2: Custom Services11:50

Lecture 21, Part 1: Custom Services with .factory()7:18

Lecture 21, Part 2: Custom Services with .factory()9:26

Lecture 22, Part 1: Custom Services with .provider()5:29

Lecture 22: Part 2: Custom Services with .provider()8:37

Lecture 23: ng-if, ng-show and ng-hide7:13

Module 2 Wrap-Up1:57

Rencontrer les enseignants

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

[SOUND] Okay,

I'm back in my code editor and I'm located in lecture 21 folder,

which is located in fullstack-course5 examples folder.

And this is a similar application to what we've written before.

In other words, we're going to be creating a shopping list,

except now we're going to be creating two separate independent shopping lists,

that are going to be sitting side by side.

So we're going to need a shopping list service, but we don't want it to be

a singleton anymore, because we don't want one shopping list affecting the other one.

So the way we're going to do that is, basically create two separate controllers.

One is going to be responsible for list one, shopping list one, and

the other one is going to be responsible for shopping list two.

Except we want to enhance the shopping list service just a little bit.

We want to be able to tell the shopping list service that there might be a max

number of items that we might asked it to limit itself to.

Obviously, we're going to be creating the shopping list service using the factory

because in every single controller, we need to create a new one, and

sometimes we'll need to create one that doesn't have a max item limit and

sometimes it will have a max item limit.

So let's go to our app.gs and see how we did that.

The first thing we want to do is actually scroll down to our

shopping list service and modify it a little bit.

In this case, we want to specify that there might be a max number of items

that we want to limit the shopping list too.

So the code is always identical except for the services.addItem method.

And in this case, just before adding our item we actually need to check.

If the max items is undefined, which means the color of our service

didn't want bother to redefine the max number of items.

In which case, we're going to go ahead and

assume that there is no max items, it's unlimited.

And we'll go ahead and push the item onto our list.

Or we have to check if there's, in fact,

a max items specified, meaning it's not undefined.

We need to check that the number of items in our list

is less than the number of max items allowed.

And if that is the case, we can then,

go ahead and add that item to the item list, that our items are right.

If this condition is false, then we're going to have to throw an error, and here

you see an example of throwing an error, an error is a built in JavaScript class.

And we'll give it a message, max items of max items is reached, so the user knows,

so the user of this service knows, that we've reached our limit.

Everything else about the service is exactly the same as we've done before.

Now we need to create the factory.

Well the first thing we need to do is to scroll all the way up and

look at our factory declaration.

So the factory declaration is dot factory.

We're going to give it the factory name, which is our shopping list factory, and

the function that is going to be our factory function.

Which is in this case again shopping list factory.

Note, that we don't need to register the shopping list service

here within that service method.

That's because we don't want angular to create the shopping with service for us.

We want to create that service ourselves.

Let's go ahead and scroll to the shopping list factory,

and you can see it's very simple and you can see also that we're using

kind of the function approach here instead of the object literal approach.

And our factory is a function that takes the max number of items, and it will

return a new shopping list service, passing it the max number of items.

And so, what will get returned as part of the execution of the shopping list

factory is a function that takes these max number of items and

returns the shopping list list service.

Now all it's left is take a look at the code of the controllers.

Let's go ahead and scroll up to the first controller which is called list one,

that's how we nicknamed it in our template,

cus we are using a controller as syntax.

You can see that we're injecting the shopping list factory into our

shopping list controller one.

And in order for us to get a new shopping list, you could see that we're using our

shopping list factory and simply executing it.

Note, we're not passing anything into it,

which means the max number of items is going to be undefined.

But since the shopping list factory refers to a function that is being returned

out of it, putting parentheses behind it will execute that function and

will execute the new shopping list service.

And that's why we have shopping list as our local variable here,

as an instance of the shopping list service.

Once we have that, we obviously can now start calling methods on it.

Like getItems and you could see here when we add the item,

we could just say shoppingList.addItem, list1.itemName, list1.itemQuantity.

So very similar to the way we used it before.

In the shopping list controller two, you can see the where likewise

injecting the ShoppingListFactory into the ShoppingListController2.

But this time when we execute the ShoppingListFactory we pass it the max

number of item is this three.

Which means that our shopping list, the local variable,

the shopping list that's referred to the shoppingList service is now going to be

limited to three items only.

So therefore, we need to change our add item method slightly.

We need to make sure that if an error is being thrown from our shoppingList,

that we catch it and do something about it.

Well, that's the tri catch block that you see here that exist in Java Script.

So we're going to try to add the item.

And if the number of items in the shopping list is going to exceed three,

it will throw an error.

In which case, we're going to catch that error.

And we're actually going to set a property on our scope, or really

on the instance of our controller, since we're using the controller as syntax.

That is going to get exposed to our HTML template.

And we're going to set the value of our error message, to error that message.

That is going to come from that error that we threw from this shopping list service.

Okay, let's save all that, and

since I have my browser sync running, let's go to the browser and take a look.

So we basically have both shopping lists side by side.

And we could start filling it out.

So we'll fill it out with cookies again.

Three bags of cookies, and we'll say we want chips.

We'll get four bags of that, four bags of that.

And we'll say, sugary drinks.

We'll get ten bottles of that.

And we'll say Pepto Bismol, we'll get three bottles of that.

And as you can see, I was able to add the fourth item without any problems.

Let's see if we could to the same thing for

shopping list two, that is supposed to be limited to three items.

Let's go again and say cookies, three bags.

And we'll say, chips, four bags, let's make it five bags for good measure.

And we'll say sugary drink, ten bottles.

And we'll say Pepto Bismol,

two bottles, look at that.

When we add the next item, you could see that the error message displayed max item

three reached and you could see there's only three items in our shopping list.

So the point is you could see that they're acting independently.

The number of items here does not affect the number of items here, and also

the items are differently, which means that is different instance of the shopping

list service being used in our controller one versus our controller two.

Now we do have a little bit of an ugliness here,

which is this error message that is sitting here no matter what.

If we refresh here, you'll see that the error message is already here.

Ideally, we would really like it not to show up here at all

until an actual error occurs.

We'll going to take care of that in the future lecture.

Let's summarize,

the .factory function allows us to produce any type of object or function.

That includes a service in even a singleton, but it's not limited to that.

The .service on the other hand, is just a more limited factory.

It limits us to creating a service that is a singleton and

also one that's very hard to custom configure.

The way you invoked the .factory method is very similarly to the way invoked

the .service or really .controller method.

You give it a name and a FactoryFunction.

The name you give to your factory is what gets injected into other components.

The injected factory function refers to whatever is returned

in the factory function.

It can be an object literal with a property with a property that's a function

that creates something for us.

It can also directly be a function that itself, creates something for us.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play