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.