teruuuのブログスマートフォン用の表示で見るteruuuのブログ2017-06-21AnularJSのチュートリアルをやってみたAngularのチュートリアルを通して使い方を覚えたいと思います。今回学習用で作成したプロジェクトは以下からとってこれるようにしています。serve"で開発用のサーバを起動しファイルに対して変更があればすぐに修正を反映する動きをします。–openのオプションをつけることでコマンド実行時にブラウザを自動で開きます。Atomで開発Atomで開発する場合はプラグインを探して入れておけば良さそうです。atom-typescriptをとりあえず入れておいた開発angular-cliでのアプリ開発について.angular-cli.json開発環境の設定は.angular-cli.jsonで行なっており、最初に読み込みhtmlやスクリプト、ルートディレクトリやビルド時の出力先もここで設定している。アプリ全体でスタイルやスクリプトを適用したいという場合はここのscriptとstylesや、デフォルトのstyles.cssを修正する。アプリのルートディレクトリはsrcに設定してある。}}index.htmlangular-cliで作成したプロジェクトのindex.htmlは以下のようになっている。app-rootという独自のタグを読み込んでいます。コンポーネントが初期化されるまではタグの中身の"Loading...“が表示されます。<app-root>Loading...</app-root></body></html>main.tsmain.tsではアプリに必要なモジュールを読み込んでいます。環境変数などはJsonを読み込ませるかプロパティに直接定義するなどしてenvironmentで読み込めるようにしておくと良さそうです。リリース時はenableProdModeが有効になるようですが、angularの開発モードが無効になるなどの違いがあるようです。enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule);main.module.tsmain.tsで読み込んでいるモジュール。NgModuleでページの単位となるコンポーネント一覧を読み込んでいるのが確認できる。bootstrapはエントリポイントを指定していて、providersにはデータ共有に使うサービスとかを指定して、importsでは外部のモジュールを読み込んだりしていて、declarationsではディレクティブとパイプを読み込ませるらしい。ディレクティブとは先ほどのapp-rootなど独自に定義したタグのことを言っており、パイプについてはangularのhtml内で条件指定でフィルターかけるのに使う。BrowserModuleはブラウザの情報を取ってくるので必要になるっぽい。}index.component.tsComponentアノテーションのselectorではディレクティブと使用するタグ名、templeteUrlでテンプレートhtml、styleUrlsでcssを指定してからclassないでスクリプトを記述している。titleはクラス変数でapp.component.htmlの表示で使用している。readonlyとかつけたら良さそうと思ったけどそうしたらbindできなくなる動きをしていた。{}index.component.htmlindex.component.tsのhtml表示用のテンプレートは最初は以下のようになっています。}それからindex.component.tsとindex.component.htmlでコンポーネント内のクラス変数をbindさせてみます。</h1></div>これで実際に動かしてみると画面にコンポーネントのクラス変数が表示され、またinputタグへ入力を行いbindしている変数を変更すると値自体が変更され表示にも反映されるのが確認できます。ルータとサービスを使ってみるangularのルータとサービスを利用してみたいと思います。angularのルータにより表示するコンポーネントを切り替えたりURLパラメータを受け取った処理ができるようになります。サービスはAPIを投げてデータを取得したりとか、コンポーネント間で共有するデータとかデータに関する操作とかを記述します。ルータを足してみます。}ルータではURLとコンポーネントのマッピングを行います。}}サービスはインポートしたHEROESオブジェクトをPromiseにより非同期でレスポンスとして返す処理を行います。今回使用しているモック用のオブジェクトは以下のようになっています。}];それと、Heroの型は以下のようになっています。string;}次にルータとサービスをモジュールとして使えるようにコンポーネントに読み込ませます。}次にルータとサービスで使用するHeroDetailComponentを追加してみたいと思います。250%;}それから、ルータのディレクティブをhtmlテンプレートに追加して使用できるようにします。--><router-outlet></router-outlet>これで動かしてみると'http://localhost:4200'のアクセスは'http://localhost:4200/detail/1'にリダイレクトされid=1のユーザが表示されるはずです。idの部分のパラメータを変更することで表示するユーザが切り替わることが確認できます。別コンポーネントでも同一のサービスを使ってみる別コンポーネントで同一のサービスを利用し2way-bindingによりサービス館でデータが共有されていることを確認します。今回使用するサービスに以下のメソッドを追加します。先に追加している非同期の処理でも大丈夫ですが今回は既にサービスコンポーネントで保有されているデータを返す処理を追加したく非同期である必要はなさそうなのでそれ用のメソッドを追加しています。id);}それから、以下のように既存のindex.component.tsでサービスを利用するように変更します。--><router-outlet></router-outlet>これでindex.componentにもHeroの情報が表示され、またそれぞれのinputに対して入力すると即時で反映されることが確認できます。htmlテンプレートでループ処理をする次にhtmlテンプレート内でループを回して描画を行ってみたいと思います。リストの情報を取得する以下のコンポーネントを追加します。}}それから、htmlテンプレートを作成します。selectedHeroの条件が一致している場合はタグのクラスに"selected"を追加します。それとcssも作成しておきます。color:white;}あとは、main.moduleに今回のモジュールを追加して、ルータでURLとコンポーネントを関連づけることで表示が行えます。}子コンポーネントにデータを渡してみるサービスを使ってコンポーネント間でデータが共有できるのは確認できましたので、次はサービスを使わずに直接コンポーネントに対してデータが渡せる確認してみたいと思います。app/component/heroList/hero.list.component.htmlに以下を追加します。[isSearchMode]="false"></hero-detail>それからapp/component/heroDetail/hero.detail.component.tsのメンバ変数に@Input()を付与することで親コンポーネントからデータを受け取ることができるようになります。}}コンポーネント間で画面遷移してみるコンポーネント間で遷移できるようにするためまずapp/component/heroList/hero.list.component.tsに以下のメソッドを追加します。this.selectedHero.id]);}それから、app/component/heroList/hero.list.component.htmlからgotoDetailを呼び出せるようにするため、以下のように修正します。Details</button></div>次にapp/compnent/heroDetail/hero.detail.compnentでは遷移元に戻れるように以下のメソッドを追加します。window.history.back();}それからapp/compnent/heroDetail/hero.detail.compnent.htmlから呼び出せるように以下のように修正します。found.</div>これでコンポーネント間での画面繊維が確認できたかと思います。一つコンポーネントを追加してみる次にダッシュボードコンポーネントを追加して、こちらからもhero.detail.compnentに遷移できるようにしたいと思います。以下のapp/component/dashboard/dashboard.component.tsを作成します。}}それからhtmlテンプレートを作成します。</div></div>あとはmain.module.tsでDashboardComponentを読み込むようにし、ルータに追加しておくと画面が表示されるようになります。httpリクエストを投げれるようにしてみる次にhttpリクエストを投げれるようにしてみます。リクエストを受けるWEBサーバを準備するのは面倒なのでangularのモックを利用します。そのためにはmain.module.tsで以下のモジュールをインポートするようにします。angular-in-memory-web-api“angular-in-memory-web-api"はangular本体に組み込まれていないので以下のコマンドでインストールしておきます。angular-in-memory-web-apiそれから、レスポンスとして返すデータを定義するapp/service/in-memory-data.service.tsを作成します。}}ここまで済んだらmain.module.tsを以下のように修正しWebAPIのモックを使用できるようにします。}次にapp/service/hero.service.tsを修正しWebAPI経由でデータを取得するようにします。"angular/http"モジュールとrxjsのtoPromiseをインポートします。angular/httpのレスポンスはrxjsのtoPromiseで非同期で扱うのでrxjsのインポートも必要になります。'rxjs/add/operator/toPromise';それからコンポーネント内のメッソッドを以下のように修正しWebAPI経由でデータを取得するように変更します。Hero)のようになっています。動かしてみると一覧表示をする際に毎回データを撮り直しているため、heroの名前を変更して一覧に戻ると変更が反映されないというのが確認できるかと思います。これまではサービスをコンポーネント間でのデータの共有として使っていたのですが、今回の修正でサービスをWebサーバに対してサービスを投げる用途で使うようにしたのでその違いはわかるようにしておきたいです。リクエストを投げれるようにしてみるサービス側に追加、更新、削除のリクエストを投げるメソッドを追加します。.catch(this.handleError);}httpモジュールのpost、put、deleteを使い分けていますが違いはここのstackoverflowを確認するのが良さそうです。あとは各コンポーネントからサービスを利用するようにしたら、heroの名前変更が一覧に反映されたり、登録、削除が確認できるかと思います。検索を行ってみるサービスに検索用のリクエストを投げるメソッドを追加します。Hero[]);}レスポンスをそのままHero型の配列にセットするだけなので今までと同様にtoPromise()~で大丈夫かと思ったのですが、getリクエストの場合はtoPromiseが使えないようです。この辺りはrxjsとhttpモジュール周りの学習が必要になりそうです。それから以下のapp/component/heroSearch/hero.search.componentモジュールを追加してdashboardコンポーネントに配置すると検索コンポーネントが使えるようになります。20px;}検索用のコンポーネントでは入力に変更があったらrxjsでサービスを呼び出すようにしています。angularのチュートリアルでrxjsが使われているので、angularをやるならrxjsを覚えていた方が良さそうに思いました。あとは今までと同様main.module.tsでモジュールを読み込むようにしダッシュボードコンポーネントに表示するようにして動作は確認できるかと思います。触ってみた感想Angularの1は触ったことがあったのですが、それに比べてだいぶ分かりやすくて扱いやすくなったと思います。ルータ周りはReactと比べて優位に立ってそうな気がしました。Finalのベンチマークを動かして遊んでみた月別アーカイブはてなブログをはじめよう!steavevaivaiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。