AngularJSを使ってみよう

ngRouteモジュールを使う準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ひとつのページを別ページのように表示したり、URLを動的に定めるモジュールngRoutが使える準備をします。
講師:
07:46

字幕

Angular JS は基本的にひとつのページで HTML を構成します けれども他のページに切り替わったように 表示を切り替えて それと共に URL も動的に変えてしまう という機能があります ngRoute というモジュールなんですが それを使うための準備について このレッスンではご説明します まず ngRoute なんですけれども Angular JS のページで API Reference に移り 検索で「ngRoute」という風に打つと ngRoute が見られます ngRoute というのがモジュール なんですけれども これを使うためには Angular-Route というライブラリを ダウンロードして 設定しておかなければなりません ではそのダウンロードなんですけども まずダウンロードのページに行きましょう この ng-Route というライブラリは Extra に入っています その中の下の方ですね Angular-route.js もしくは圧縮されたバージョンの場合には Angular-route.min.js です もしダウンロードしていない場合には こちらをダウンロードします そしてダウンロードで Zip をダウンロードした方は Zip から解凍されたフォルダの中に この Angular-route という ライブラリが入っていますので それを使えば大丈夫です このマシンには Zip をダウンロードして Angular-1.4.7 という フォルダが出来上がっています その中の Angular-route.min の方を使います min を使う場合には .map ですね これもあった方が 余分なエラーが出てこなくて 煩わされません これを作業用のフォルダの Lib というフォルダに Angular の ライブラリを収めていますので Angular.min.js と同階層にコピーします これでまずダウンロードは出来ました これを HTML ドキュメントの方で もちろんスクリプト要素に 読み込んであげる必要があります Angular-route のライブラリと それから ngRoute のモジュールを使って 作ったサンプルをサーバーに上げてあります どのような表現になるかというと 現在 URL が Angular-index.html # /list になっています そして最初の人を例えばクリックすると ページの表示が変わりました そして URL の方も #/details/0 となっています この人がゼロで次を見ると 別の人は1 2 3という風に 番号で URL が切り替わっています もちろんページの表示も 別の人の情報になっていますね そしてまた元に戻ると #/list となっています けれどもこれは あくまでひとつのページを Angular JS が動的に表示も URL も 切り替えているんです こういった機能が Angular-route の ライブラリを使うとできるので その使うための準備を早速進めていきましょう HTML ドキュメントの方はまず スクリプト要素に 追加のライブラリを読み込みます スクリプトで SRC ソースですね そして参照で lib フォルダの中の Angular の中の 先ほど追加した Angular-route.min.js map ではありませんのでご注意ください そして閉じます まずはここまでで一旦保存しておきましょう さて Angular のメインの アプリケーションと言いますか ng-APP のディレクティブには myAPP が設定されています そしてコントローラーとして この div 要素で MyController というものがあります この2つはひとつの javaScript ファイルで設定されているんですが これをメインの方とコントローラーの方と 2つに分けたいと思います 今ひとつにまとまっているのが こちらです これはサブの方にしてしまって 新たにメインの js ファイルを作ります この一行目をこのまま使えますので コピーして そして新規ファイルを作ります javaScript ファイルで作成で ペーストしましょう まだほとんど空っぽですけれども とりあえずファイルができればいいので 保存してしまいます controllers.js と同じ階層に app.js として保存します そして myApp がダブってはいけないので 名前を変えましょう controllers の方は artistControllers というふうにします そしてこれをコピーして モジュールの名前の方ですね ここも合わせます それから controller のメソッドを 呼び出しているところ これもペーストして 内容は変わっていませんけれども これをサブにするために 名前を myApp ではなくて別の artistControllers という風にしたわけです 保存しましょう 今度は App の方に戻ります そしてここで使用するモジュールとして 別立てにしましたので 先ほどのモジュール名ですね まだコピーが生きているんじゃないかと 思うんですがペーストしますと artistControllers 出てきましたね まだ ngRoute の設定はしていません それを使うための準備ということなんですが ここまでで一旦保存します もうひとつ index.html の方の 設定が残っています 今 app.js という javaScript ファイルを 作りましたので それをスクリプト要素に読み込みます SRC で読み込むのは js の中の app.js そうしたらタグを閉じます 保存してブラウザで確認しましょう 読み込む前と特別 表示は変わっていません エラーが出なければ結構です これで ngRoute を使う準備が整いました このレッスンではページと URL を切り替える ngRoute というモジュールを使うための 準備についてご説明しました まずライブラリとして Angular-route というライブラリを読み込み そしてコントローラーを メインのアプリケーションから分けて設定し そのコントローラーを メインのアプリケーションの モジュールに設定したということです

AngularJSを使ってみよう

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

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

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

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

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