AngularJSを使ってみよう

$routeProviderサービスで別のページを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
$routeProviderサービスにテンプレートとコントローラを加えて、別のページを表示します。
講師:
07:17

字幕

このレッスンでは AngularJS の ngRoute モジュールで ルートプロバイダサービスを使い 新しいページを作ってみたいと思います template と controller を用意して 新しいページのセッティングを行います 今リストのページが画面に 表示されていますけれど クリックすると これはダミーページなのですけれど 新しいページが表示されて 「戻る」のリンクで 元に戻ります このように別ページの表示を しているかのような設定を これから行ってみます 今開いている index.html には template が1つだけ 設定してあります そのために angular-route のライブラリを読み込んで ディレクティブ ng-view で template を 差し込む場所を指定してあります template としては このような html を用意し これが list.html なんですけど この template をコントロールするための controller が’定義してあります artistControllers という所に MyController という名前で controller が指定されています それを ng-app ディレクティブの アプリケーションのメインをコントロールする app.js これがそうですね そこに controller を加えて ngRoute の モジュールを使ったうえで $routeProvider に対して template の指定を行っています その template については パスが list それから先ほどお見せした list.html これは partials という フォルダに入っています このパスにあります そこに MyController この controller の名前が 設定されています ということで1つだけ template が指定され list というパスで表示されます 確認してみましょう ブラウザで見ると index.html の後に #/ で list と表示されています このページ まだ1つだけしか template がありませんので クリックしても 何も起こりません ページは表示されません ここに新たに template を追加して クリックしたらそのページに移る というふうにしたいと思います まずは controller を1つ加えましょう controllers.js ここには1つ先程の list の template が定義されているのですけれど これをコピーしまして ペーストして controller の名前を DetailsController としましょう Controller は一緒ですので Details というふうにします もっとも今回は この controller で template の内容を コントロールするということはしません 別ページをとりあえず表示する というだけですので controller の中身は 今の所空っぽにしておきます 削除しましょう そして「保存」します controller はできましたので メインのアプリケーションですね app.js myApp の指定の所に template と controller を加えます ここが先ほどの list の template と controller の 指定になっていますので ここもやはりコピーして ペーストです ちょっとインデントが 狂っちゃいましたね まずはパスは details とします そして template はダミーで 用意してあるのですけど やはり details という 名前になっているので details コピーして ペーストします controller は先ほど 新たに加えた― DetailsController ですね コピーして 加えましょう そしてこれを「保存」します こういう template は できたのですけど template に移動しないといけませんよね ということなので もう1つの最初に表示される デフォルトの template について クリックしたら新しい template のほうに 跳ぶように a 要素を加えましょう a 要素は この list li 要素の中に a で href そしてパスは #details です タグを閉じて インデントを整えましょう ここまでですかね そして「保存」します ブラウザで確認してみましょう ブラウザウィンドウをリロードします そしてポイントを合わせると a 要素が加わりましたので リンクされていますね クリックしますとダミーページに跳びます この文字も画像も全部 記入値です ちょっと戻りましょう ですから誰をクリックしても 同じ画面になってしまうのですが 別ページには跳びました 念のためダミーの template 内容を確認しておきますと 全部テキストが 記入値ですね それから画像を img で 差し込んでいるのですが これも完全にパスが指定されています あとは「戻る」ボタンのほうは index.html というふうに 指定してありますので デフォルトの template に戻る ということになります このレッスンでは template を新たに 追加して controller を定義し 新しいページにリンクする という方法について説明しました controlller については 空っぽですけど 新しい controller を controller メソッドで定義し メインのアプリケーションの app.js で $routeProvider に対して 新しい template のパスと それから controller を指定することで 更に デフォルトのページでは リンクを details というふうに指定して リンクをさせました これでページの切り替えということが できたわけです

AngularJSを使ってみよう

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

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

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

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

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