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

個別データ用のモデルの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
個別のノートデータを表示させる為の、Angular.jsのモデルの作成方法について解説致します。
講師:
04:18

字幕

このレッスンでは 個別のノートデータを表示させるための Angular.jsのモデルの作成方法について 解説いたします まずはダウンロードしてきた こちらの「note_model」という フォルダーの中に入っている 「HTMLファイル」 「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 現状の「index.html」ファイルを 「エディタ」で開いて 今回 ご説明する内容を 確認したいと思います こちらの「index.html」を 「ブラウザ」で開きます すると このように表示されてきましたね 今回 ご説明する内容は こちらの「ノートリスト」の中から 個別の「ノート」をクリックした際に こちらの右側の部分で その「ノート」の 「タイトル」や「本文」を表示させるための Angular.jsのモデルの作成方法について 解説していきます 「エディタ」に戻ります そして まずは 「note.js」ファイルを 「エディタ」で確認してみましょう 注目して頂きたい部分は こちらの部分です この部分では これまでのレッスンで作成した 「初期のノートデータ」と同様の形で 「ノートの個別データ」という形で モデルを作成しています モデルの作成方法は 前回と同様に 「$scope.」 そして モデルの名前「note」として そして「={};」で オブジェクトを作って そこに3つの項目を作成しています この3つの項目の内容は 「初期のノートデータ」で作成した こちらの「idx」「title」「body」の 内容と全く同じ内容ですが 「ノートリスト」をクリックされる前の 初期状態では 何も表示させたくないため 初期の値を それぞれ空白にしています このように「JavaScript」の方で モデルを作成したら 今度は「HTML」の方に このモデルの表示を反映させるための 記述を行っていきます それでは「HTMLファイル」を開きます そして こちらの部分ですね こちらの部分に その記述を行っていきます まずは「タイトル」を表示させるための こちらの「input」タグの中に この部分の記述を加えてあげます 今回は「ng-model=」 そして「"note.title"」と書いていますね そして次に 本文を表示させるための この「textarea」 こちらにも同じように 「ng-model」と書いて 「="note.body"」と書いてあげます このように 「note.title」「note.body」と 「ng-model」の中に 書いてあげることによって 先ほど「JavaScript」の方で記述した この部分ですね この「title」と「body」に 対応した形で紐づけられるわけです このように 「HTMLファイル」と 「JavaScriptファイル」の方に 記述してあげることによって この「JavaScriptファイル」に書いた 「$scope.note」の これら3つの値に それぞれ内容を 入れ込んであげることによって 自動的に 先ほど「HTML」の方に埋め込んだ この部分ですね 「input」と「textarea」 これらの部分に この内容が 自動的に 反映されてくるといった形になります 以上で レッスンは終了です 今回は 個別のノートデータを表示させるための Angular.jsのモデルの作成方法について 解説いたしました 以降のレッスンでは 今回作成したモデルに値を入れ込んで 個別のノートデータを 「HTML」上に表示させるための 関数の作り方について解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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