Loading...

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

Course video 44 of 119

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.

使用 AngularJS 创建单页应用

约翰霍普金斯大学

课程 5（共 6 门，Ruby on Rails Web 开发专项课程）

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.

查看授课大纲

您将学习的技能

Unit Testing, JavaScript, Angularjs, Web Development

教学方

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science

脚本

[MUSIC]

Okay, I'm back in my code editor.

And I'm located in the Lecture22 folder,

which is inside fullstack-course5/examples folder.

And here we have, again, our Shopping List app.

And it actually looks just about the same as our Shopping List app that we used

in the factory lecture.

So we have a couple of input fields,

text fields, that we're going to be typing in the item name and item quantity.

And we'll be able to click the Add Item button and that will immediately get

displayed in our ordered list that is powered here by the ng-repeat directive.

However, this time our shopping list service is going to be

created using a provider.

Let's go ahead and take a look.

Let's go to app.js, scroll our app, we're right here.

And we could see here that we have a .provider instead of .service or .factory.

And the name of our service, again, that's not the provider, it's the name of

the service that we're going to be using, is called ShoppingListService, and

the name of the provider function is called ShoppingListServiceProvider.

So I just tacked on the Provider name on there just so it'd be clear,

even though the name of this function makes absolutely no difference.

So let's go ahead and scroll down all the way to see what our

ShoppingListServiceProvider function looks like.

And you can see, it's very similar to what we had in the slides.

And the most important thing here is, is that we are basically assigning the this

keyword to the local variable called provider, then we are attaching the $get

property to the instance of our ShoppingListServiceProvider, right?

That's really a substitute for this .$get.

And that is a function that's going to create our shoppingListService and then

is going to return our ShoppingListService to whoever is asking for it.

Now, what we've also done here is we created a defaults object that has

a maxItems of 10.

So, when we create our ShoppingListService,

we simply look up the provider.defaults.maxItems to create

a shoppingList that is going to allow only 10 items inside of it.

So let's take a look at our controller.

It shouldn't be really anything different than we've had before.

Our controller, ShoppingListController, is going to inject.

Notice it is injecting the ShoppingListService,

not ShoppingListProvider, but ShoppingListService,

meaning the service name that we gave to our service when we declared the provider.

because the providers provide services,

whereas the factory that provides a service.

And the rest of it is basically about the same.

We're injecting that ShoppingListService here, and

we're getting the items straight from the ShoppingListService instance.

That's because we returned that instance as

part of our generation of the ShoppingListService.

And the rest of the code is exactly the same.

We add the item, making sure that we are not exceeding the number of items,

the max number of items.

Because if we do, we're going to throw an error from inside of

the ShoppingListService itself, and we're going to catch that error right here,

displaying that error message on our list.

This errorMessage property that is going to get attached to the instance of

the controller, because once again we're using controller as syntax.

Okay, and the remove is exactly the same as before.

The ShoppingListService itself is,

once again, identical to what we had in the previous lecture.

It just has some special logic to make sure that the maxItems are defined, and

if they are defined the number of items in our items array is less than the maxItems.

Otherwise we are not going to push a new item onto the items array.

Instead we're just going to throw an error saying

the max number of items has been reached.

So since I have my browser sync already working,

I'm going to go ahead and save that and go to our browser.

And here I have my Shopping List, and I can start saying cookies,

5 bags of cookies, and we'll add that item.

And we'll say chips again, and we'll take 10 bags of that.

Okay, great, in fact, let's add a couple more 10 bags of chips.

As you could see, we can add quite a bit here.

We could do more cookies again, and let's get 10 bags of cookies.

And we could keep adding this until we hit 10.

And if we add one more, since 10 was something that we defined in our code,

let's go back and take a look at our provider.

Since the max number of items was 10,

that's our ShoppingListService was created with the max number of items being 10.

Therefore when we see in our browser we're up to 10,

if we try to add anymore it's going to throw an exception.

The exception is going to get caught inside of the controller.

And the controller's going to send this error message

to be displayed in the browser.

Okay, so the one thing we haven't done is we haven't really configured it ourselves.

We are relying on the default values.

Plus, if you leave the shopping list up to me, it's going to be a bunch of 10 bags of

chips and cookies, and we need to save me from this type of shopping list.

So, let's go ahead and

limit our shopping list to much less than 10 items in the list.

Let's limit it, like, to 2.

So let's go back to our definition when we're defining our module, and

we'll go ahead and define one more function called config.

And we'll call our configuration function Config, for lack of creativity,

which probably doesn't need to be here.

So let's go ahead and define our Config function.

The first thing we need to do is define our inject array.

And that inject array is going to have

our ShoppingListService followed by the word Provider.

Okay, now that we did that,

we can actually define a function that is going to be called Config.

And what we're passing in here is ShoppingListService, the same thing we

declared the Provider with, plus the word Provider, the string provider.

Okay, so once we define that, we can now go ahead and

get at the provider properties.

In this case it's ShoppingListServiceProvider.defaults.maxI-

tems, and let's limit it to 2.

So now, for the duration of the entire application,

the shopping list is going to be limited to the max number of items being 2.

And here we could say, Save Yaakov from himself.

Okay, let's go back to the browser and let's go ahead and try to get cookies.

Let's get 10 bags of that, and here we could add 10 bags of cookies.

Let's get another 10 bags of cookies.

And if we try to get yet another 10 bags of cookies it doesn't work,

because we only limited our ShoppingListService to have only

two items in our shopping list, to save Yaakov from himself.

However that doesn't really work, since I can just remove that and say,

let's get 100 bags of that, so there we go, 110 bags of cookies.

So that whole saving thing didn't really work at all.

So let's summarize.

Among the service and factory type of functions,

the provider one is the most verbose, but it's also the most flexible of them all.

And that's because you could configure a factory not just at the time of use, but

also at app bootstrapping before the entire application even starts.

The way the provider works is, you give it the name of the service that you will be

using and the provider function, the function that is the provider.

That function has to have a $get property as part of its instance.

Whatever the name is, that's what gets injected into other components.

Not the provider, but

the actual name in the string name that is given in the .provider function.

The .config function, which is optional but very often used,

is the one that gets called before any service, factory or

controller instantiated, which means that we can't inject any regular components

into the .config function, like other services or factories.

But we can inject the provider of the service by simply putting the name

of the service and appending the string Provider at the end of it.

And that is the service that we inject into the .config function,

that we're able to configure our provider such that the factory that produces

some service is configured only once, at the beginning of our application.

关于 Coursera

课程、专项课程和在线学位均由全世界一流大学和教育机构的顶尖授课教师教授。

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取