AngularJS Tutorial - Part 10 - To-Do list (Revisited) Video Lecture - IT & Software

This video is going to show you
how to build a Todo app
using the AngularJS Library.
You can see I already have
Angular set up here, and
underscore for just a filter
function later on, and
Bootstrap just to make
it a little bit
prettier than the defaults.
So the first thing you always
need to do when starting an
Angular app is initialize it,
using the NG app directive.
It looks like an attribute in
whatever tag you put it in.
And I'm not going to get too
much into these technical
details this first time around,
but, there will be
future videos going into
more technical depth.
But for now, just take my
word on it that that
initializes your app.
So now that we have it set up,
we can set up some divs with
controllers.
So we'll set up an
NG controller.
Assign it to a Todo CTRL, Todo
controller, and then we'll
define a Todo controller in
our own JavaScript file.
And it looks something
simply like this.
And you can see that it's just
named the exact same way, and
then it's going to pass
in the scope.
So, Todo CTRL, and Todo CTRL.
Now that we have this set up--
and you might understand the
scope right away just by
looking at this, but again, I'll
go into scope in further
depth in future videos.
So, if we just set a property
on the scope of total Todos
set it to like four, we can
already take advantage of the
binding available, using double
curly braces as a
syntax that Angular uses,
of just total Todos.
So if I just refresh this, you
can see that you see the value
of four, which is set here.
Now, just to show that this
isn't some hocus pocus, if you
don't initialize it, you can see
that it just shows total
Todos, the string.
But, you do initialize it,
refresh, and you'll see four.
So going from there, just
showing the number four isn't
that great of an app.
So, let's actually set
up a list of Todos.
The first one will
be Learn Angular.
You're doing a great job by
watching this video, to get
that one done.
And the next one will
be, build an app.
And if you're following along,
then you're doing pretty good
at that one too.
Set them down to false.
So from there, now we have a
list of Todos that we can use.
And the best way to use lists
is to loop through them.
First, let's make this a
little bit prettier.
Let's make it nice and big.
Total Todos.
See what that looks like.
Looks much better.
All right.
So I'm just going to set
up an unordered list.
Set the class to unstyled.
It's just a style you can
use from Bootstrap.
And then use the magic
of NG repeat.
So if you look at this syntax,
Todo in Todos, it's basically
just going to loop through
all of our Todos.
And then anything you bind
to in here, say for
example that Todo text.
You can see that it magically
shows up over here.
So basically we are just looping
through the Todos,
learn and build, you can see
they show up over here, simply
by using the binding syntax.
So let's make that a bit more
useful by creating an input,
which is a checkbox.
And then we'll actually use the
NG model directive, and
set that to Todo dot done.
Now that's going be a two-way
binding between the
presentation and
the controller.
So once I click this checkbox,
it's going to set the current
Todo, the loop through,
to done.
And then we'll set up
a span and show the
actual Todo dot text.
Now this isn't going to show
much right now, because when I
click, nothing happens.
But if I set the style of this
we'll create a class called
done dash--
watch this little magic
piece right here--
Todo dot done.
So I'm actually binding to the
style, or binding to the Todo
dot done property inside
of the style.
And we'll actually create our
own style class here.
Style file, Todo, CSS.
Create that, and call
it done true.
So if it's done, we'll
get a text
decoration of a line through.
And set the color to gray
to make it grayed out.
Now when we refresh, and I check
one of these boxes, you
can see it automatically
strikes through
and grays it out.
Simply because this is updating
any time you click
the checkbox, because we set the
Todo done of the current
item in the Todos array.
And we're toggling between
true and false.
Whatever the value of that
checkbox input is.
Moving right along.
The next thing we want to do is
actually add things to your
list of Todos.
So we'll set, we'll create a
form and let's just give it a
class of form horizontal.
Keep things nice and aligned
thanks to Bootstrap.
And then we'll create
an input.
This time, it's a text input.
And we'll use the NG
model again to set
up the two-way binding.
We'll create a new property.
Let's call it form Todo text.
Then, anytime we update
this, we want to
instantly update it.
So every keystroke.
So let's look at that
right away.
So you don't see anything
happening yet.
But the cool little bit here
is, if I put form Todo text
here, and I refresh, anything I
type will instantly update.
So you can see how that
automagically created the
binding there and updated.
That'll be useful for when we
click a button here to add
this to our list.
So let's set up this button.
I'll give it a class
of button.
I love little icons
in Bootstrap.
So I'm going to use
a plus icon.
And say, add--
I'll just put add as the text.
So when you click that you see
nothing happens yet, because
we haven't set up any sort
of action for the click.
Which we'll do right now.
So, NG click, we'll call the
method called add Todo.
Again, we don't have an add Todo
method yet, but once we
do, I highly recommend setting
up templates for these because
you'll be typing these things
like, scope equals function
quite a bit.
Add Todo.
We can simply say, scope,
Todos, push.
And then text.
If you remember, it's called
a form Todo text.
Actually on the scope object.
Form, Todo, text, and with
the status of false.
That should make sense
just pushing it in.
So then when we refresh, we'll
say something new.
And we hit add.
You'll see it's actually
been added.
I see this isn't clearing out.
So let's clear out that
text as well, just to
make it nice and clean.
So form, Todo, text
is nothing.
That way when we do this,
something new, something else.
One thing you may notice, you
may notice, is that this isn't
updating simply because
we assigned it four.
And what we want to do here is
assign to the length of the
Todos array.
So if you do something like
Todos, length, sorry.
That was completely wrong.
Total Todos is Todos
dot length.
And we go in, and we
refresh from here.
You'll see it is properly set
to two, because there's two
items in our list.
But if I add another one, you'll
see it's not updating.
And that's because it's only
been assigned once.
You want to make sure if you're
doing something like
this, that you actually create
a function something like a
get total Todos.
And we can set this to Todos
length, and just return that
as the value.
So here, instead of total Todos,
we want to say, get
total Todos.
Because we can use binding
to the function as well.
And then, any time you add
something new, it will update
the total value.
So that's looking good.
We can check these off.
And it looks like the last
thing we'll want to do is
remove completed items.
So let's create a big
old button here.
A large button with an icon
of icon, trash, I think.
And we'll say Clear Completed.
See what that looks like.
It's looking good.
Just a big fat button that
doesn't do anything yet.
But if we set up
a click for it.
Call the method Clear
Completed.
Hop over to our JavaScript.
Set up the Clear Completed
function.
Clear Completed.
And all we have to do is set
the Todos array to--
this is why I brought
in underscore.
Because I'm familiar with the
filter function here.
So we're going to loop through
all the Todos and only return
the Todos that are not done.
Todos not done, then return it
as a result for that filter.
So if we click this.
[? when we ?] clear
the completed.
And I'll get rid of it.
Add a new one, and another,
something else.
And a last thing.
And then you can go up here
and start checking off the
things you've completed.
And since we've learned
AngularJS, now we'll click
that one and clear it out.
So hopefully that's a good
overview for you on how to get
started with Angular.
It's really a great library that
I'll be using quite a bit
in the future.
And I look forward to future
tutorials explaining more
details, because there's much
more to learn and way more
cool tricks to dive into.
So, I hope that helps.
Thanks for watching.