AngularJSを使ってみよう

$routeProviderサービスを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ngRouteの$Providerサービスを使うと、ページにテンプレートを差し込み、コントローラで表示することができます。
講師:
09:46

字幕

このレッスンでは Angular JS の ngRoute モジュールを使って ページをテンプレートで 別ページのように表示し URL にパスも加えたいと思います 現在表示している このリストの画面なんですが これはメインの index.html の 画面として表示されています このリストの表示をテンプレートに分けて ひとつのページではあるんですが 別ページのように この index.html の後にも パスを加えたいと思います 今開いている HTML ドキュメントでは ngRoute のモジュールを使って テンプレートを分ける準備までできています まだ実際には分けていません ngRoute を使うためには ライブラリとして Angular-route というライブラリを 読み込んでおく必要があります それからページ分けをする場合には そのページ分けをした テンプレートをコントロールするための コントローラーが必要です これがこの controllers.js で今のところは テンプレートに使っているのではなくて この div 要素に ng-controller Directive で指定されています これをテンプレートの方に 適用することになります あとこのモジュールの親として全体を司る MyApp ですね index.html の ng-app のディレクティブで 指定してあります このメインのアプリケーションの中で 今 ArtistControllers という コントローラーがひとつあるんですが これが controllers.js で作っている コントローラーの名前です これが準備の全体なんですけども ここで実際にテンプレートを 切り分けて行くことになります どこをテンプレートにするかというと 先ほどの人物の表示ですね リスト表示です どこでやっているかというと まず 検索部分ですね 上の方にあったんですが 検索部分がここになります div 要素です search となっていますが ここで search の入力をしたり インプット要素がありますし それから並び順を切り替えるための Select の要素があったりします これをまず分けます それからそれと共に実際に リストを作っている部分ですね ng-repeat のディレクティブを使って ひとつひとつ個人の情報を取り出しては サムネイルと一緒に Li 要素を作ってるんですけども この部分も一緒にして 切り分けてしまいます テンプレートに分けます そっくりカットです 次に新規にファイルを作ります HTML のドキュメントです 作成しましょう そしてこのファイルは 実際には HTML のドキュメントというよりは その中の必要な所を切り出した テンプレートになります ですからもう全部いりません 先ほどコピーしたものをまんまペーストします HTML 要素とかありません 全体を畳んでいるのを広げました ただひとつ要素を上に加えることにしましょう Section 要素でクラスは― ArtistPage としましょう そして一番下で この要素を閉じます 保存しましょう 「ファイルを保存」で Partials というテンプレート用の フォルダが今は空っぽですけど 用意してあります ここに List という名前で保存することにします これでテンプレート出来上がりです 次にメインのアプリケーションである App.js に ngRoute を使うための コードを書き加えていくことになります まずはこの MyApp なんですけども ArtistControllers の他に ngRoute が使えるようになりますので これをモジュールとして加えます ngRoute ですね そして MyApp に config というメソッドで 使うテンプレートやコントローラー そしてそこにどんなパスを加えるのかという 指定を加えていきます まず全体は 配列 角カッコで囲ってあげて $Route Provider と これが ngRoute で使えるようになります これを文字列として指定して 次に名前のないファンクションです function () 中カッコ始まり 中カッコ閉じと いうことなんですが ここは一旦改行しておきましょう Route Provider がこの function の 引数として受け取れるようになりますので これをコピーして持ってきます そして受け取った Route Provider に対して メソッドを呼び出します コピーしました when というメソッドなんですけども 丸カッコを閉じてセミコロンですね 長くなるのでドットの前で 一旦改行しておきます ここで動的に付け加えるパスです それをまず指定します 文字列で 人物のリスト表示ですね あれは /list というパスを付け加えて表示したい そして今度はそのページとして 表示する部分の内容です 先ほどテンプレートにしましたね list.html これをテンプレートとして 使いましょうということで templateUrl で先ほどの partial/list.html これをテンプレートとして使いましょう オブジェクトですのでカンマ区切りです そして controller そして何を使うかということなんですが 先ほどまで中にあった div 要素 あるいは list の要素ですね li 要素などは myController が コントロールしてたんですね これを先ほどのコントローラーの指定の所に 持って行ってしまいます カットします じゃあこちらはと言うと ngRoute を使うと この部分をテンプレートで差し替えられる ng-view というのが使えるようになります これで保存しておきましょう App.js に戻ります このテンプレートを差し込んで コントローラーとしては MyController を使いましょうということです そしてさらに パスとしてデフォルトのパス 普通は index.html が表示されますね そうでなく今回は この list をデフォルトとしたいと思います その場合にはドットでまた続けて otherwise と ということでデフォルトにする パスを指定します これはオブジェクト 波カッコ始まり 波カッコ閉じですね この中に指定してこの時のキーワードは redirect 2 です どこどこにリダイレクトして下さいなと 言うことで デフォルトとしては ここを使うんですよということで コピーを持ってきます TemplateUrl のパスは partials ですね では保存をしてブラウザで 確認してみることにしましょう リストが表示されました この表示自体は元と変わっていないんですが この URL ですね #/list という風に パスが加わりました デフォルトがここになっていますので 消して Enter キーを押しても ここにリダイレクトされます このレッスンでは ngRoute の モジュールを使って テンプレートを差し込み そこにパスを追加するということを 行いました その場合には Config というメソッドで Route provider を使って その Route provider に対して パスと それから実際のテンプレート コントローラーを指定します それからメインの html の方では ディレクティブとして ng-view を設定しました そうするとテンプレートとして 分けておいた部分の要素が差し込まれて コントローラーが この指定で html ドキュメントの中身を コントロールするということです

AngularJSを使ってみよう

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

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

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

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

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