Now we've seen directives before.
For example, ng-app is a directive while ng-controller is a directive,
ng-repeat is yet again a directive that we're going to learn about,
a directive that comes packaged together with AngularJS out of the box.
Right now I'm in my editor and
I'm in Lecture 17 inside a Full Stack-Course 5 Examples folder.
So let's go over this little shopping list app.
We have the ng-app meaning the app being shopping list App and
we have the Shopping List controller, where all the magic is going to happen.
Let's switch to app.js for a second and take a look as to what we have here.
What we have here is two arrays.
The first one is called shoppingList1 and it has one, two, three, four,
five, six, seven, eight, eight items in the shopping list.
And they're all just strings.
And we also have shoppingList2, which has also elements in it, but
the elements of shoppingList2 are actually objects.
So, it's one, two, three, four objects.
Each object has a name and a quantity property.
When we declare our module and actually declare our Shopping List Controller,
all we're doing here is obviously injecting scope as usual, but
all we're doing here is placing those arrays as a property on the scope service.
So, now we have a shoppingList1 property and we have a shoppingList2 property
that is now able to be a reference inside of our html template.
Let's go back to index.html.
And we see here the first shopping list, or
the first version of a shopping list here, is that we have an unordered list and
the LI tag has an attribute called ng-repeat.
And ng-repeat is very similar to a four each type of four loop so
the construct of item in shoppingList1 means that we're going
to be looping over shoppingList1 array or collection one array, and
each time through duration the item of that collection that is being
iterated over, is going to be equal to the item variable that we're setting up.
And in this case, right now,
we're just interpreting that item as the value of the body of the LI tag.
So each time as it's iterating, it's going to output another item that is equal
to one of the items in the shoppingList1 array.
The rest of the code so
far is just commented out and we'll get to it in a second.
So, let's go ahead to our browser and take a look here.
And you see here that we have our Shopping List and
all of our eight items output to the browser.
Let's go ahead and right-click on this Milk item and inspect it and
see what the code in HTML is actually looking like.
As you can see here, what we have here is the entry repeat
actually repeated the LI tag eight times over and over here.
Each time interpolating the item in the ray
as the contents of that particular LIM so in this case it's milk,
in this case it's donuts, cookies and so on and so forth.
Let's close that up.
And go back to our code editor.
And I'll comment a different shopping list, we'll just go ahead and
comment this out for now, and open the comments out for this one.
In this case, we're also looping through the array, except in this case,
we are looping through shoppingList2 array.
But shoppingList2, as you can remember, let's go back to app.JS,
you see shoppingList2 is a list of objects, not just a list of strings.
So in this case, each item in the loop of shoppingList2
is going to represent the object, not just the particular string.
So in this case, when we interpolate it, and we say something like Buy,
Item.quantity of item.name, we're able to
traverse the JavaScript object in its usual way using the dot notation.
And obviously interpolated with double curly braces, so if we save that and
go back to our browser, you'll see that now we're outputting Buy 2 of Milk(s).
That's really not English but
it's close enough, Buy 200 of Donuts(s) and donuts is spelled twice with an s.
Again kind of of a little bit messed up here, but it doesn't really matter,
you get the idea.
And Buy 300 of Cookies, and
obviously we're going to have a cookie party right there.