AngularJSを使ってみよう

操作の対象に応じて表示する情報を変える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ngRouteの$routeProviderサービスを使うと、ページを切り替えるときの情報が得られるので、テンプレートの表示もそれに応じて切り替えられます。
講師:
10:51

字幕

このレッスンでは angularJS を使って HTML ドキュメントで操作したデータが どれなのかを識別して それに応じて新たに表示するテンプレートの 情報を切り替えるという― 方法について紹介します 今画面で見ているのが その完成したサンプルですが 例えば ここでヒラリーさんをクリックします そうすると新しいページが テンプレートで表示されて ヒラリーさんの情報が表示されています では戻りましょう 今度はジェニファーさんです クリックすると テンプレートは同じなんですけども 表示される情報はジェニファーさんの 名前やバイオグラフィー それからサムネイルという風になっています このようにするには操作した情報が どれなのかを識別して それに応じてテンプレートのコントローラーが どの情報を表示したらいいのかということを 切り分けられなければなりません そうした処理の仕方について説明します 今開いているファイルでは 操作した情報がどれなのかを 識別まではできています そしてその情報をインデックスとして 表示先 新たにテンプレートに表示する時の パスに加えるという所まではできています けれどもそのテンプレートの情報を 書き換える所 それをこれからやってみたいと思います メインの index.html では angular-route という ライブラリを読み込んで ng-route の モジュールを使っています そうすると ng-view のディレクティブで テンプレートを切り替え そのテンプレートをコントロールする― コントローラーも一緒に 切り替えることができます それを行っているのが このメインのアプリケーション ng-app で指定しているんですけども このアプリケーションを作っている app.js です $routeProvider を使って パスに応じて template と controller を設定しています そして詳細の方は この details という方なんですが そこに :itemId という キーワードを使って クリックした情報の ID 番号 インデックスを設定しています そして詳細情報は details.html そしてコントローラーは DetailsController ということになっています クリックした情報というのは この list の方ですね list が先ほどの一覧リストなんですが その中で a 要素です a 要素の方で details のパスの後に 選択した情報の ID 番号 これは実際には ng-repeat の ディレクティブで artist のデータ これは JSON から 読み込んでくるんですが 配列などでそこから1つずつデータを 取り込んでくるんですけども そのデータのインデックス番号を indexOf というメソッドで調べています それをパスに追加していて これを処理するのが app.js なんですけれども 先ほどのコロン itemId でその番号を とっています そしてパスにその ID 番号を付けると 添えるという所まではできています 確認をしてみましょう ブラウザウィンドウをリロードします 確認用に各名前の横にこの人達の データの中のインデックス番号 0から始まるインデックスが表示されています そしてクリックすると ダミーのページに飛びます ここではまだ内容を書き換えて いないんですけども パスを見ていただくと今6と出てますね 6番の人をクリックしたからです もう一度確認しましょう 戻って では2番の方をクリックします 2と出て来ますね この番号を何とか使って こちらのテンプレートの中の情報を その番号に応じた人に書き換えると いう風にしたいと思います さて メインのアプリケーションを 作っている app.js です ここでパスに details のあとに itemId というキーワードを使って 番号を付け加えました itemId を使って切り替えた テンプレートをコントロールするのは DetailsController です この内容を controllers.js の方で 確認してみましょう DetailsController まだ空っぽですね 中身が全く記載されていません まず 上の ListController で使っている 処理を一旦コピーして これを書き換えることにしましょう コピーを持ってきます そして JSON から読み込んだ データが必要なのは Details の項でも同じことです ですからこれは生かします こちらは消してしまってもいいんですが とりあえずどうやってあの itemId の番号を とってくるかということなんですが ng-route のモジュールを使うと ここでサービスが1つ付け加えられます サービスは文字列で 今回使うのが routeParams です Params というのはパラメーターズですね ですから ng-route で扱った その操作で得られたパラメーター 様々な情報がとれるということです その中の1つの情報として 先程の itemId をとる事ができます まずその為には取り扱う function の中に 引数にこの $routeParams を 加える必要があります コピーを持ってきました そしてこの $routeParams の中の コピー持ってきましたけれども itemId これであの番号がとれてしまいます そうしたらそれをテンプレートの方で 情報をとりたいと思います そのときにはこちらと一緒ですね $scope の中にプロパティとして 設定してしまえばいいということです これは要らなくなるんですが 代わりにじゃあ itemId を入れる為の プロパティとして id というのを決めましょう それを繋げてしまって この id の中にここでとった itemId の番号を入れてしまいます そうすると details の方のテンプレートで id というプロパティ名で データをとることができます ここは一旦保存しておきましょうね そうしたら details の方の テンプレートです ここは全部今のところ情報が 決め抜きになっています では 確認をする為に 名前の所ですね 名前の所でデータがとれるかどうか 確認してみましょう これは artists ですね コントローラーでとってきたここです ここに JSON のデータが 含まれてきますので それを参照します その中の沢山の人の情報がある訳ですから id ここで参照できるようになった id を使うと その見たい人の情報がとれます その人の情報の中にも 名前から色々ありますので その中の name というプロパティとして 定められている名前 これを表示してみたいと思います では保存をして ブラウザで確かめてみましょう ブラウザをリロードします そして ではこのハッサムさん クリックします サムネイルとかは変わっていませんが 名前がハッサムさんの名前に変わりました もう1つ確認しましょうか ではヒラリーさん クリックすると 名前はヒラリーさんに変わっていますので データがちゃんととれてると いうことが分かります うまく行きましたので 他の項目も同じように変えてしまいましょう ではここを ここは皆共通なので コピーしてしまって もうショートカットを使わしてもらいます この部分をショートカット command+V または Ctrl+V で上書きです プロパティ名はもう既に reknown 合わせてあるのでこのまま { } 2つで囲みます ここも同様です ペーストして bio これはプロパティがそのまま使えますので あとこのファイル名の所ですね ファイル名の所は _tn は残した上で { } 2つ入れて ここはファイル名は shortname という プロパティ名になっていますので shortname とします あと img 要素の属性 src は ディレクティブの ng-src に書き換えます そして保存しましょう ブラウザをリロードします 番号が消えましたね ヒラリーさんをクリックしてみます そうすると名前 バイオ サムネイルでもちゃんと表示されました 戻りましょう もう1人位 バロットさん 大丈夫ですね 戻ります このレッスンでは操作したデータの ID をとってきて それによってテンプレートに表示する 情報を切り替えました その為には routeParams のサービスを使い $routeParams で 操作した item の ID 番号を id という変数に入れ それをテンプレートの側でとってきて 情報の中から必要なものを 選び出して表示しました

AngularJSを使ってみよう

AngularJSはHTMLを拡張するフレームワークで、Webページを動的に生成できます。このコースではJavaScriptの基礎を学んだ方を対象に、AngularJSのインストールからWebアプリの作成までを実際にコードを書きながら解説します。JSONファイルから読み込んだデータリストの作成やデータの並べ替え・検索などを説明します。

2時間12分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年12月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。