Placeholder Image

Subtitles section Play video

  • IGOR: So I have a very simple HTML, and this is static HTML.

  • 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--

IGOR: So I have a very simple HTML, and this is static HTML.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it