Angular.jsで作るノートパッドWebアプリケーション

ループを使ったノートリストの表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
予め作成しておいたノートデータが格納されたモデルを利用して、Angular.jsでループの処理を行い、ノートリストを表示させる方法を解説致します。
講師:
04:53

字幕

このレッスンでは あらかじめ作成しておいた ノートのデータが格納された モデルを利用して Angular.jsでループの処理を行い ノートリストを表示させる方法について 解説いたします まずはダウンロードしてきた こちらの「note_loop」という フォルダーの中に入っている 「HTMLファイル」と「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう まずは 前回作成した ノートデータが格納されたモデルを もう一度確認しておきます 「note.js」ファイルを 開いてみてください ちょうどこの部分が 前回作成した部分ですね このデータを使って ノートのデータのリスト表示を 「HTML」上に 反映させてみたいと思います それでは この状態で まず 「index.html」をブラウザで開いて ループを使って リスト表示させた後の状態を 確認してみたいと思います こちらの「index.html」を 「ブラウザ」で開きます すると このように表示されてきましたね ノートのデータが リスト表示されている部分は ちょうどこの部分となります このように 「タイトル1」「タイトル2」「タイトル3」 といった形で 前回のレッスンで作成した モデルのデータが ベースになっているのがわかりますね それでは このノートのデータのリスト表示の 実装方法について 具体的に 「エディタ」の方で 確認していきたいと思います そして 「index.html」 こちらのファイルを 「エディタ」で開いてください 今回 注目して頂く点は こちらの部分となります 前回作成したノートのデータは 配列となっていましたね その配列を Angular.jsのループ機能を使って 情報を順番に取り出して 表示させていきます その処理を行っているのが こちらの部分となります このように 「ng-repeat」と書いて 「=」 そして「"」で囲って この中に 「note in notes」と書いています まず こちらの「notes」の方ですが これは 前回作成した モデルの名前となっています ちょうどこの部分ですね そして この「note」の方なのですが この「note」は この「ng-repeat」を使って Angular.jsでループを行って 配列から順番に値を取り出していく際に 1つ目のデータ 2つ目のデータ 3つ目のデータ という風に 順番に 個別のデータを格納するための 変数となっています この変数の名前 今は こちらの「notes」の単数形の 「note」としていますが ご自身で好きな名前をつけて頂いても 大丈夫です そして この変数「note」は この「ng-repeat」がついたタグの中だけで 有効になります そして この「li」タグの中に このように 「{{note.title}}」 と書いていますね このように書くことで この「{}」で囲まれた 「note.title」の値を 実際にモデルに格納されている値に 置き換えて 「HTML」上に表示させることが可能です 今回は 「note.title」としていますので これを「note.js」の方で 確認してみますと このように 「note」の中の 「title」ということで 「タイトル1」「タイトル2」「タイトル3」 という形で表示されてくるわけですね このように書くことで 「JavaScript」の方で定義した モデルの中に格納されている値を 「ng-repeat」 Angularのループ機能ですね これを使って 順番に情報を取り出して そして 「HTML」上に表示することが 可能になるわけです 以上で レッスンは終了です 今回は Angular.jsでループ処理を行い モデルから複数のデータを リスト形式で表示させる方法について 解説いたしました 以降のレッスンでは 今回表示させたリスト内から クリックして選択したノートに対応した 個別のデータを表示させる方法について 解説いたしますので そちらもあわせてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

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

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

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

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