AngularJSを使ってみよう

操作対象のデータがどれかを調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
取り出したデータのインデックスを得て、リンクのパスに定めます。
講師:
08:47

字幕

このレッスンでは AngularJS を使って HTML ドキュメント上で 操作の対象になったのが どのデータなのかを調べる 方法について説明します 今画面では「アーティスト名簿」ということで アーティストのリストがあります そしてその中の一人の項目をクリックすると 別のページに飛びます 尤もこのページはダミーのページなので クリックした人がどの人であろうと 常にこの人が表示されてしまいます 試しにもう一度元の所に戻ってみますが 今度はこの人です 女性ですね クリックしますがやはりこの同じ男性が 表示されてしまいます そうならない為には 誰がクリックされたのかを 調べる必要があります AngularJS を使って この識別の仕方について説明します メインとなる index.html には ng-app ディレクティブで myApp と いうアプリケーションが指定されています それはこの app.js の方で コントロールをしてるんですけども それからこの div 要素ですね ng-view これは angular-route を使って ダイナミックにテンプレートと そのコントローラを切り替えて その中身を表示するという 形になっているわけです そしてリストの方はこちらですね 最初に人物のリストが出てきますけれども この ng-repeat のディレクティブで データを これは JSON なんですが そこから1つ1つ取り出します 配列の中に入っているものを取り出して 人物毎の リンクや画像 それからテキスト情報などを表示しています そしてアプリケーションの方です myApp ですね こちらは ng-route と それから artistControllers これはこの controllers の中で 指定してあるんですけども そのモジュールが追加されています そしてダイナミックにページを切り替える― template と controller を切り替えるのは この routeProvider のサービスを 使っています そしてこれが最初に表示される リストのページなんですけども クリックした時は details というパスで この details という テンプレートに飛ぶんですが この details コントローラーについては まだ中身がありません そして details のページなんですけども こちらは全部ダミーですので 決め打ちになっています 唯一 「戻る」で index.html にリンクがあるので クリックすると元に戻るという インタラクションはあります こんな構造になっているわけですね さて 実際のどの情報がクリックされたのかと いうことを調べる前に 少し気になったところを整えておく ことにしましょう まずはこのコントローラーなんですけども かなりいい加減な名前がついています MyController これは app メインのアプリケーションの方でも MyController となっているんですが 詳細情報 個人の情報の方が detailsController という それらしい名前になっているので ここもリストのコントローラーですから ListController という風にしましょう コピーをしておいて 保存します そして controllers の方ですね こちらも名前を合わせます 保存します もう1つ list の この label 要素なんですが その中に input 要素が2つ入っています これは この画面で言うと ラジオボタン2つです 別に1つのラベルの要素に入れてあっても 特別問題は起こらないんですけども 項目としては分かれていますので 構造は分けた方が良さそうです ですので この部分をコピーして この間に ペーストしておきます これでやはり保存しましょう 特に動きは変わりませんけども 少し整えたということになります では クリックした項目の情報を知りたいと これは この li 要素で ng-repeat 使って項目を取り出してくる時 その取り出した項目が 元の JSON の配列の中の 何番目かということを調べることができます その調べた結果を 名前が表示されるところに 並べて続けて表示してみましょう コロンを置いた上で { } 2つ そして artists という中に JSON データが入るわけですから これをとってきて それに対して indexOf というメソッドを呼び出します そして artists から item が1項目ずつ取り出されるわけです この item の index は何番目なのということを 聞き出すことになります これで一旦保存して ブラウザで確認してみましょう ブラウザウィンドウをリロードします そうすると名前の横にコロン 番号がついてきましたね 並べ替えをしてるんで 通し番号じゃないんですけども 0から始まる番号になっています 0 1 2 3 4 と 5 は多分下の方に隠れているでしょう この番号を使って識別をすればよさそうです クリックした時にどうなるかと言うと 当然何も変わりません クリックした時の情報と 連結させなければいけませんので それを今度は試してみましょう どうするかと言うと この番号ですね クリックした項目によって 異なる番号なんですが これをコピーして a 要素のパスに加えちゃいます details / そして番号です 保存しましょう 尤もこれだけでは片手落ちで メインのアプリケーション app.js では details というパスが来たらと いうことになっていますので / 番号が来ちゃうと otherwise デフォルトの方に分岐してしまいます そうならない為には こちらにも番号に対応したものが必要で と言っても番号は0番からいっぱいありますね その時にはキーワードを使います コロン itemId です d は小文字ですね これで保存します ブラウザで確かめてみましょう ブラウザウィンドウをリロードします 画面に変化は現れません ではこの6番の方をクリックします 当然飛び先のダミーページも変わりませんが こちらを見て下さい 6という番号がちゃんと表示されています そして6という番号は出たけれども ちゃんとこちらのダミーですけど 詳細ページの方に移ったということです ここまで来れば これをキーにして この中の情報を変えるということも できると準備が整った形になります このレッスンではクリックした情報を どのように識別してそれをどうやって 切り替えたページの方に持って行くかと いうことについて説明しました JSON で受け取ったデータに対して indexOf でその項目の番号が分かります そしてその番号をパスの方に 付け加えてしまう その上でこのパスがちゃんと受け取れるように メインのアプリケーションの方で パスにキーワード itemId を加えて 受け取ってあげれば ちゃんとページが切り替わり そして選択した情報の番号が伝わると いうことを説明しました

AngularJSを使ってみよう

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

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

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

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

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