AngularJSを使ってみよう

ナビゲーションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
データのインデックスを得て、テンプレートに表示する情報を、ナビゲーションで切り替えます。
講師:
11:14

字幕

このレッスンではテンプレートに 表示する情報を切り替えるための ナビゲーションを加えてみたい と思います 今画面にアーティストのリストが でているんですけど 誰か一人クリックすると その人の情報がでてきます そして「戻る」で 元のリストに戻るんですけど もう1度クリックしました ナビゲーションというのは この上の矢印です この矢印をクリックすることで いちいち元のリストに戻らなくても インデックスの順番に 情報が切り替わるというふうになっています このナビゲーションを加えてみたい と思います 一人のアーティストの詳細情報を 表示していたテンプレートが この details.html です 矢印のコントロールのデザインだけは とりあえず入れてあります あと a 要素を加えてありますので クリックすればリンク先に跳びます 最も今 # になっていますから デフォルトの状態ということで 最初のページに戻ってしまいます ここで例えば details と その中の 0 番というふうに指定すれば 0 番の人の詳細情報が 表示されます 同じように コピーしてきて 最後の人は 8 番なんですけど 8 と表示すれば クリックすれば 最後の人が表示されます 0 と 8 固定なんですが 一応切り替わる状態にはこれでなりました 確認してみましょう ファイルを「保存」して ブラウザに移ります ブラウザウィンドウをリロードしましょう そしてこの辺の真ん中あたりの人 クリックすると表示されますね そして 戻るボタンというか 左向きの矢印 クリックすると これは先頭の人です 0 番の人 それから右の方向の コントロールをクリックすると この人が最後の人です 最初の人と最後の人 固定になってしまっていますけど あそこの番号を うまく カウントアップ カウントダウンすれば良い ということがわかりました カウントアップやカウントダウンは このテンプレートの controller に 処理を加える必要があります でも処理を加えて どういう変数にしてほしいか もうこちらでオーダーしちゃいましょう これは前の要素なので prevItem という変数に 数字を入れてね ということです 今度こちらは 次の項目ですね なので nextItem という変数に入れて下さい そうしてくれれば このテンプレートで ちゃんと順番に切り替えることが できるわけです ではこちらを「保存」します controller のほうですね まずこのアプリケーションのメインの モジュールで 指定してあるのですけど この list というのが 最初に表示されるリストです アーティストの一覧ですね そしてアーティストをクリックした時に 跳ぶのがこちらになります details というのが この詳細情報の html のテンプレートでしたね それに対しては DetailsController というものがありまして これでコントロールしているわけです ですからこの DetailsController の中に処理を加えればいい ということになります ではそれを指定している controllers.js に移ります DetailsController は こちらですね ですからこの中に処理を 加えていけば良いでしょう そして item の番号 インデックス というのは $routeParams.itemId これでとることができます ですからリストでクリックした時に この itemId を見て その人の情報を表示したわけです ですからこれを使えば 次の人の番号というのが カウントできるわけですね ということで じゃあ この... $routeParams.itemId これに 1 を加えて nextItem ですね その場合には scope. が要りますので scope.nextItem こんな風にすれば良いのではないか という感じがしますね 同様にこれを「コピー」して 「ペースト」しますけど そして -1 ですね 前の項目は previous の意味で prevItem こんな感じで良いんじゃないかと 考え方としては良いのですが 問題が2つあります まず1つ目 大きな問題なんですけど $routeParams.itemId これは数字なんですけど 実際のデータの型は文字列です ということなので引き算できません 足し算をすると文字列の足し算ですから 違う意味になってしまいます ということなので この値を数値に 変換してあげる必要があります それを変数に入れておきましょう id という変数にします そうしたら これを持ってきて 数値に変換します 数値にする時には Number とする手が あるのですけど 整数と決まっています 配列の中からデータをとって来る時に使う― 番号ですので 整数ですから parseInt の方がより確実でしょう そしたらこの id を ここに入れれば良いと 同様に ここも id ついでですから こちらも id にしちゃいましょう 元々この scope に設定した id には 文字の数字が入っていたのですが ちょっとややこしいですけど 文字列の数字が入っていたのですが それはやはり 配列から データを取り出したときに使っていたので むしろ数値のほうが 都合が良いぐらいです ですからこれで とりあえず 1つ目の関門は通過です もう1つの問題 こういう処理をしたことがある方は おそらく見当がついているでしょうけど どんどんマイナスしていくと 最後には 0 までいって マイナスの数値になっちゃいますね そうすると配列のマイナスのインデックス ありませんから その時点で処理はおかしくなります 今度はプラスしていっても 最後の人は 8 番なんですけど 8 番に 1 足して 9 になったら 配列の中にそのデータがないので やはりデータが取り出せない ということになります こういう時には 0 より小さくならないように あるいは その 8 より 大きくならないようにという if 文の設定が必要ですね それを行いましょう そこでまた変数を1つ加えます 配列の要素 全部でいくつあるのか ということを count という変数を設けて 入れておきます json から読み込んだデータ 配列のデータなんですが それは この data という 引数で受け取りますので その length という配列のプロパティで 全部で何個の要素があるか というのがわかります ではこれを使って if 文で分岐をしましょう まず id が 0 より大きければ 引いても平気ですね 一番小さい場合 1 です 1 から -1 すれば 0 ですから まだ配列の 0 番のインデックスは有効です そうじゃない場合というのは マイナスになってしまうわけですから どうするかというと 一番最後の人でしょうね 一番最後の人にしたほうが 良いと思いますので ここで じゃあこれを「コピー」して 「ペースト」します 一番最後の人は count は一番最後の人の番号よりも 1 大きいので count の変数の値から 1 マイナスすれば良いですね これで prevItem 戻るほうの番号については 問題解決です 今度はカウントアップするほうですね nextItem これは count よりも 1 小さい値であれば カウントしても最後の番号 具体的には 8 番なんですが を越えません 越えないですから カウントアップしても良いということです 普通に 1 を足しこみます そうでない場合 1 足すと 最後の人を越えてしまいます その場合には最初の人に戻るわけですから else で ではこれをコピーしましょうか コピーをして 最初の人は 0 番です ということで 最初の人まで戻ったら 最後の人に あるいは最後の人まで行ってしまったら 最初の人に戻る というループができあがりました nexeItem の綴りが ちょっと違ってますね nextItem nextItem 大丈夫ですね では「保存」してブラウザで確認しましょう ブラウザウィンドウをリロードします そして この真ん中辺りの人 クリックして では次へと進みます この人が最後の人なので 最初の人に戻りました そして また遡ります この人は最初の人でしたね クリックすると最後の人に... 移動ということで 正しくコントロールができました このレッスンでは情報を順番に id 順に表示するというコントロールを 加えました その時に 変数を定めてあげて この変数の値を controller のほうで $routePanams.itemId からインデックス番号を得て そして それを文字なので 数値に変換した上で その id のインデックス番号を カウントダウン カウントアップする形で インデックスを切り替えて それに伴って 情報を更新すると 表示する という方法をとりました

AngularJSを使ってみよう

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

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

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

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

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