Let's get started with our first

hands on exercises for this course. We're going to introduce to you in

this course some basics of AngularJS. If you are continuing
from the previous course you already have a folder named
conFusion on your computer. You may wish to save a copy of it for
later use. For this exercise, in the first step,
go and download the conFusion.zip file that we have provided for you,
and unzip it at a convenient location. You will see that you will end up
creating a folder named conFusion. When you go into this folder, you will
notice that it contains at two folders, one named app, the other one
bower_components and a bower.json file. The bower_components
folder is currently empty. The app folder will contain some files
that we have all ready provided for you, in particular the menu or HTML file is
the starter file for this exercise. Also note that I have renamed some
of the folders that we used earlier. All the CSS files are now going to be
stored in the folder named styles. All the JavaScript files are going to
be stored in the folder named scripts. Images will be stored in
the folder named images. Going back to the conFusion folder, we are
now going to harness the power of bios. To go and fetch all the bootstrap, jQuer
y, Phantasm, and Angular files for us. To do that open a terminal and
then go to the conFusion folder. At the prompt, type bower install, to let
bower go and fetch all the files for you. Once bower completes
downloading all the files, we are now all set to go
forward with our exercise. In the next step, open the Con Fusion
folders in your text editors. Here, you see me opening
the Con Fusion folder in brackets. I have all ready opened that menu
route HTML file to view its contents. As you browse through the menu or
HTML file, you will note that the file has
all ready been configured to make use of the bootstrap CSS files
from the bower_components folder. When you look at the body of this HTML
page, you'll see that it is empty, it contains just a few empty divs. We're gonn
a introduce the menu items for
our restaurant into these divs here. First, to set up the page to use Angular,
we're going to include the Angular's JS files into this
folder using the script, tack. Once we have included the Angular files, then we
are going to configure our web
page to become an Angular application. Moving to the HTML tag,
now I am going to add the NG app directive to it in order to initialize
that Angular application. Next, I will go to the content row and
then add an ng-init directive in order to host
some application data for this particular Angular application. You can now see t
hat I have
used the ng-init directive, in order to include some
JavaScript object there. The JavaScript object named dish
contains some information which I'm gonna make use of to construct
our menu item on this page. Taking a look at the JavaScript object, you'll notic
e that this object named
dish contains some information there. The name is initialized
to the name of the dish, the image is initialized to
the where the image file is stored, the category, label, and description and
other pieces of information are included inside this JavaScript object. I'm goin
g to make use of
bootstrap's media object in order to create the menu item for
our restaurant. So let me add in the code for
the media object into the inner div there, the column div that we have in there,
and
then we'll examine the web page next. I have all ready added
the media object in here. Let's take a quick look at our web page
and then come back and understand how this media object is creating that
menu item on the web page. Taking a look at the web page, you'll notice that the

menu item is
being displayed on the web page. You can see the image,
the name of the menu item, a label, and the badge there for
displaying the price of the item. And then the description
of the menu item there. Going back to the code, you'll now
see that I am making use of Angular expressions in order to initialize many
of those fields in the media object. In particular,
let's take a look at the h2 class here. For this h2 class,
I am including the dish.name. Now this is the property
from the JavaScript object that we have initialized
in the ng-init earlier. This I am enclosing inside double braces
to indicate that this is an expression, an Angular expression. And so,
this will be substituted by the value of dish.name, by when Angular
initializes this page. Similarly, I am using dish.label
inside an Angular expression here, and for the badge, I am using dish.price. Not
e that I am sending this dish.price
through a currency filter here. Now, we're going to look at
filters in a later lesson. But in this example,
you'll see that the price, when it is piped through
the currency filter, will turn this stream
into a currency value. With appropriate dollar sign
to be displayed on the screen. The description itself
is included using this dish.description expression
inside a p tag here. Now, this is what ends up creating
the menu item on our web page. Taking a look at the dish object
inside the ng-init directive, you can notice that it has another field
called comment, which is currently empty. Now I'm gonna harness the power of
Angular in order to initialize or in order to change the value
of the comment here. Let me add in a few more HTML
code into the media object. And then we'll see how we can
make use of it to automatically update the comment field
of the dish object. I have added in a little
bit of HTML code here. Let's take a look at the web page,
and see the behavior first. Then we'll come back to understand
what this code is doing at this point. When you go to the HTML page, you will
notice that I have this comment with an empty area being displayed here,
and then I have an input box here. Which will allow me to
type in the comment. Watch what happens as I type in
the comment into the input box. What you are noticing is that as I type in
the information into the input box there, the comment in the web pages
automatically getting updated. This is the two-way data binding
of Angular coming into play. Taking a look at the code that we added
just recently, you saw that in the input tag here,
I am using the ng-model directive here. Now, the ng-model directive
essentially allows me to do a two-way data binding with the data. Now this, I am
binding this to the dish.comment field
in the dish object here. And also notice that the comment P tag that I have intr
oduced there contains
the dish.comment as an expression there. So as I type in the value
into the input field here, because Angular provides two-way data
binding, the information is immediately updated in the comment expression here a
nd
displayed on the web page. So this is the two-way data binding
of Angular in action for you. In order to demonstrate to you how
I can have multiple objects and automatically create a list of menu items
on the web page, I'm going to go in and change the dish object into an array
of JavaScript objects here. So I'm gonna replace the ng-init with an array of Ja
vaScript objects here. Note that now I have changed the ng-init
into an array of JavaScript objects here. Now, I have essentially
introduced an array of four different dishes here, and

now I'm gonna make use of this in order to create a list of

menu items on my web page. Now, I have already initialized the dishes
object here with the four items. I'm gonna take the help of them,
together with Angular directives, in order to create the menu
items list on the web page. Earlier I was displaying a single
media object, in the web page. Now I'm going to take
that media object and then, Turn that into
a a list of media objects. Then we will make use of another
Angular directive called ng repeat to automatically create a list
of menu items on the screen. Let's watch Angular's magic in action. First, I'm g
oing to turn that div for
the media class into a list item. Next, I'm going to put this list item into a u
nordered list with
the class media-list. If we were to do this using standard HTML, you would have
repeated this
media object multiple times. But, using Angular's ng-repeat directive, we can au
tomatically
create the list of items. Let me introduce
the ng-repeat directive and then we'll see what it does. Notice that, for the li
st item, I have now introduced
an ng-repeat Angular directive. For this ng-repeat Angular directive,
I am specifying the information as dish in dishes. Now, recall that I just creat
ed,
using ng-init and an array of JavaScript
objects named dishes. So here with Angular's way of specifying
ng-repeat if I say dish in dishes then this list item will
be repeated multiple times. One for
each of the item in the dish's array. So just by doing this little change,
you will immediately notice that I am able to create a list of
menu items on the screen. The rest of the media object description
there remains exactly the same as before. With this little change, let's take a
look at our web page and
notice a dramatic change there. Go into your web page you now notice
that we have automatically created a list of menu items here. So instead of one
item that you
are displayed here earlier. You now have four different items
from the menu being displayed. Now, what is interesting to note is
that the HTML itself was not repeated, but we used Angular's ng-repeat directive
to take care of all of this work for us. In this exercise,
we looked at various Angular directives, the ng app, the ng-init, the NG model,
and the ng-repeat directives, and
we saw how we were able to construct a list of menu items using
all these Angular directives. What is important to note is that we have
not written a single line of JavaScript code so far. We have harnessed the compl
ete power
of the Angular framework itself, to enable us to design a wonderful
list of menu items all ready for us. This completes this first exercise. We're g
onna introduce you
to some basic Angulars.