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

Operation of videos Adjust the video here to display the subtitles

B1 US angular controller template application server dean

Introduction to AngularJS

  • 33 4
    Jhih Yuan Jhang posted on 2015/02/05
Video vocabulary