There's no JavaScript here.

It's just HTML.

I'm loading Angular, I'm loading Todo on JS, which will

be used for my application, but right now

it doesn't do anything.

And the rest is just a static template with

already data in it.

Now, what I want to do is turn this into an Angular

application.

And notice that this HMTL is served just with a static HTTP

server, so there's nothing happening on the server side.

So what I'm going to do, I'm just going to say that

this is an ng app.

And I give it some name.

And Angular follows MVC--

AUDIENCE: Igor, you've got to be louder.

IGOR: Sorry?

AUDIENCE: You have to be louder.

IGOR: Well, I'm just talking to--

AUDIENCE: But I've got everybody else

trying to hear as well.

IGOR: OK.

So Angular follows MVC.

So we have a model, we have view, and we have controller.

So we specify this chunk of DOM is going to be controlled

by this particular controller.

Now, If I go to todoJS, you'll see the I'm creating a module,

todoApp, which is what I referenced in my ng app.

And within that module, I'm specifying a controller called

@controller, and this is the constructor function for that

controller.

Now, the controller takes one argument, scope, which you can

think of as a context that is shared between the controller

and the template.

So whatever is available in this context is going to be

available in the template.

And then, in my template, I can do something like--

dah, dah, dah!

OK, so I can use expressions.

So I can use double curly.

I can say take whatever the username is in the current

context, pipe it through an uppercase filter, and inline

in this place of document.

So what I get is Igor's Todo List, because username is set

to Igor in my controller.

Does that makes sense?

So your model and the controller lives in the

JavaScript.

The template is just HTML, which is converted into DOM.

And then Angular consumes the DOM and brings the two and

makes it alive.

And with the repeater, we have constructs like ng-repeat,

which allow you to do something like item in items

where items is an array.

So in my controller, I have a model called items.

It's an array containing two objects.

Each object has a text property and done property.

And I'm going to publish on the scope.

So I mentioned that scope is the context.

So I'm just going to say, within this context under

named items, this is going to be available.

And then, in my template, I actually want to repeat the

li, not ul.

So I want to say repeat--

I'll remove these guys.

Repeat this li as many times as I have items in the items

array, preserve the current item in this variable so that

I can bind to it.

So now I can do item.text.

And that doesn't work.

Text, items--

oh, sorry this is on--

here, li.

OK.

That's more readable.

So, perfect.

So what I'm saying is that I have this li that I want to

repeat over.

So this li becomes a template, and it's going to be cloned as

many times as I have elements in the array.

And then I can data bind to this stuff.

So I can do also item.done.

And now you see the done is true here and false here, but

the check box doesn't reflect that.

So I need to actually data bind the input box.

What I can do is ng-model, item.done.

And now, when I change the check box, it's going to

update the model, which will update all the things that are

bound to the same model.

So this is just very quick introduction to Angular.

There are many other pieces to Angular,

like dependency injection.

Dependency injection is how we structure the application and

break it down into smaller components the can depend on

each other.

And the dependency injector will just result the

dependencies between components and instantiate

everything at the right time, which helps you in making your

application more maintainable as well as more testable.

Because if the components are not instantiated by other

components, if there's something else instantiating

all those components in composing the entire

application, you can easily override what a component

looks like in the context of a test.

So you can say that in this particular test, I'm not going

to be calling a server because I have a component that calls

the server.

You can just replace it with the a fake component that has

the same API but doesn't call the server so that in your

test, you can easily pretend that the code is making a

request, but it's not really.

And we also provide all these mocks for you.

So there are mocks for all these common services that are

really hard to test with so that you can just train them.

In Ruby, you should be familiar with testing.

So testing is a very big part of Angular.

Mieszko is going to talk today about directives.

And directives is API that allows you to

extend the HTML compiler.

So I mentioned that we have this ng-repeat.

We have ng-model.

We have many other things that we call directives.

And this is something that was built on top of the API that's

available to you.

So not only you can use our directives, you

can build your own.

And this is how we think that you can actually take small

pieces of Angular, and create components that are specific

to your application, and extend everything.

Basically, everything in Angular is extensible.

If it's a templating language or if it's all the services

that we provide, everything has extension points so that

you can extend to other things.

And there is--

Dean.

Where is Dean?

Dean!

That guy over there.

So he's working on an Angular UI project, which aims to

create components for Angular so that if you need a date

picker, you just go to Dean, and Dean will give you a nice

date picker.

If he doesn't deliver on the promise, then you can beat him

[CHUCKLES].

So our goal is to keep the core of Angular very small but

make it extensible so that other people can build on top

of Angular and add components that are usable

in particular cases.

But we don't want Angular to be a beast with thousands and

thousands of APIs.

So I recommend that you go our website.

There are many examples on the website which

you can check out.

And there are some screencasts which explain how we built

these examples.

Our documentation is interesting.

Many people say they love it.

Many people say that it needs a lot of work.

I think both are true.

But there are many examples that you can learn from.

We have a really good tutorial.

If you go to docs.angularjs.org/tutorial,

you can go through building of an application, which will

show you everything you need to know, and how we test, and

how we run tests.

There's a Build with AngularJS, which is a gallery

of applications that were already built.

Many of them have a link to source code so you can check

out these applications.

And that's about--