diary結果、メモ的な内容になっています。この広告は、90日以上更新していないブログに表示しています。公式サイトのチュートリアルを純粋にやってみているだけです。英語問題ない方は本家をみたほうがよいです。それと、5分クイックスタートをやってみたときの記事は以下から。Heroes"というチュートリアルです。tsきっと、前の5分のやつよりは色々わかることもあるのでしょう。ts、は理解できるレベルさて、早速余談。僕はAngular2しか触ってないんだけどAngular1.xとは結構変わっているところも多いみたい。controllerがなくなったdirectiveの使い方が簡単になったangular.moduleがなくなった$scopeがなくなったなどなど。「おー、これはいい」ってなって取り込んでるとこはあるぽい。本記事のざっくりした流れです。はやったことを少し詳細に。Heroesってなに?そう、この謎タイトル。西洋のヒーローたちの一覧を作って、閲覧できるようにするツールらしいです。作るサンプルにセンスを感じる。こんなツールを作ります。プロジェクトフォルダー作成さ、フォルダ作り。こんなフォルダ構成にしたい。app下記コマンヅ実行。directoryは、と呼びます。今回は、ES6の便利機能も使ってみたいので、TypeScriptで書いてみよう。凄い簡単にTypeScriptについて書くと、マイクロソフトが開発した言語で、Javascriptのスーパーセット。実際に動かすときは、JSに変換しないといけない。その変換を、「トランスパイル」っていう。Componentを更新したら、トランスパイルして、JSに変換する、っていう新たな手順も入ります。必須ライブラリのインストールまずは、インストール。下記コマンヅを実行します。--save-devはて、systemjsとtypescriptは新しいので少し説明。systemjsrequire/import的にモジュールをロードする機能をjsに実装するためのライブラリtypescriptTypeScriptのコンパイラこれでライブラリのインストールは完了、と。今回は、TypeScriptのトランスパイラの設定と、httpdの設定をしますわい。インストールコマンヅ実行後のpackage.jsonは、こんな感じ。scriptセクションを書き換えます。--open=src"},tscってなんかいますね。tscについてtscっていうのは、TypeScriptの、トランスパイラ。TypeScriptを、JSに変換してくれる。ファイルに変更があったかをずっと監視してくれるで、tscのtranspile設定ファイル(tsconfig.json)を作る。}}この辺は・・・そのうち勉強するということで・・・これで、下記を実行すると、tscが変更のあったファイルを監視して、自動でトランスパイルしてくれるのと、live-serverが立ち上がって、いつでもサンプルを確認できる状態に!やっほーい。全体の動作イメージをまとめてみます。ComponentをTypeScriptで書いたファイル)から、app.jsに、変換する処理を、tscコマンドがやってるところが追加になっただけ、かな。それにともなって、tscのコンフィグが追加になった、と。Hero表示ではやっと本題に入って、Heroの表示画面を。ファイルを沢山作っていくけど、最終的なディレクトリ構造はこうなる。componentをTypescriptで書きます。<WORKDIR>/src/app/app.ts下記をぺったり貼り付ける。'Windstorm';}bootstrap(AppComponent);次は、htmlファイル。<WORKDIR>/src/index.html下記をぺったり貼り付ける。</body></html>で、tscとlive-serverは、再起動したほうがよさげ。http://127.0.0.1:8080にアクセスしたら、こんなんでまーす。オブジェクト化ここまでは、ツアーといっても、Windstormさんしかいない。それにヒーローを追加するにしても、↓↓に毎回ヒーローを追加していかないといけなくて大変。'Windstorm';}そのため、ヒーロークラスを作ってしまいましょう、というのが次。app.tsに追記します。(angular2.dev.js:22704)なんだなんだ・・・と色々試してみて、最終チュートをじっくり読んでみた。class作成の箇所に、こんなことが書いてある。どのくらいトップの近くか言ってくれよ!というわけで、importのすぐ下の行に書いたらちゃんと動いた。tag的なものがないので、ヒーロー追加すると、どんどん横に表示が広がってしまって美しくない。適度にdiv/labelを入れて、見れるtemplateにしますよ、と。};}bootstrap(AppComponent);横長、です。back-ticksで囲ったところは、改行OKだそうで、こんな感じにかけます。};}bootstrap(AppComponent);今度はこんな感じに表示されまする。Hero編集さて、ここまでは表示をいじってきたけど、ここからは、ヒーロー編集に入ります。tagいれて、入力できるところを作ります。`これで、こんな感じにフォームが出てくる。bindingして、ちゃんと表示にも反映されるようにします。bindingとは??から。Stackoverflowにあったので引用。model.UIエレメントがアップデートされると、モデルにもそれが波及するということでした。one-wayだと、上記のどっちか、なんでしょうね。Two-wayで載っている・・・まぁチュートのとおりにやります。directiveを使います。NgModelについては、下記URLに記載があるけど、、、読んでもそんなにすっと入ってこないです、はい。NgModel」くらいで進もう。`この状態だと、http://127.0.0.1:8080にいってもなにもみれないのであしからず。directiveが何者かを書いてないので、トランスパイルできないのかな?なので、ng-modelが何者かをangularに教えてあげる。(app.tsの)import文に、NgModelを追記。@Component宣言のすぐ下に、当該Componentが利用するdirectiveを追記。toolのコンソールにでる)。