B1 中級 1791 タグ追加 保存
動画の字幕をクリックしてすぐ単語の意味を調べられます!
単語帳読み込み中…
字幕の修正報告
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--
コツ:単語をクリックしてすぐ意味を調べられます!

読み込み中…

Introduction to AngularJS

1791 タグ追加 保存
Jhih Yuan Jhang 2015 年 2 月 5 日 に公開
お勧め動画
  1. 1. クリック一つで単語を検索

    右側のスプリクトの単語をクリックするだけで即座に意味が検索できます。

  2. 2. リピート機能

    クリックするだけで同じフレーズを何回もリピート可能!

  3. 3. ショートカット

    キーボードショートカットを使うことによって勉強の効率を上げることが出来ます。

  4. 4. 字幕の表示/非表示

    日・英のボタンをクリックすることで自由に字幕のオンオフを切り替えられます。

  5. 5. 動画をブログ等でシェア

    コードを貼り付けてVoiceTubeの動画再生プレーヤーをブログ等でシェアすることが出来ます!

  6. 6. 全画面再生

    左側の矢印をクリックすることで全画面で再生できるようになります。

  1. クイズ付き動画

    リスニングクイズに挑戦!

  1. クリックしてメモを表示

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔