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

初期ノートデータのモデルの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webアプリケーション内で利用するノートのデータをモデルとして予め作成して、アプリケーション内で保持しておく方法について解説致します。
講師:
03:18

字幕

このレッスンでは Webアプリケーション内で利用する ノートのデータをモデルとして あらかじめ作成して アプリケーション内で保持しておく 方法について解説いたします まずはダウンロードしてきた こちらの「note_data」という フォルダーの中にある 「HTMLファイル」と「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを利用して 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう それでは まず 「note.js」ファイルを 「エディタ」で確認してみましょう すると このような状態になっていますね 今回 注目して頂きたい部分は こちらの部分となります この部分で 「初期のノートのデータ」を モデルとして定義しています それでは 実際にどのように定義しているか 確認してみたいと思います まずは こちら 「$scope」と書いて 「.notes」と書いていますね そして「=」と書いて 「[」 そして「];」 という形で 配列を作っています そして この配列の中に オブジェクトで このような形で 初期のデータを作成しています このデータですが 3つの項目を持っています 1つ目は 「idx」という項目 これは このデータのインデックス番号を 保持するために作成しています そして 次は 「title」という項目ですね その名のとおり ノートのタイトルです そして 「body」という項目ですね これはノートの本文にあたる 内容となっています さて ここで注目して頂きたいのが こちらの「$scope」というものですね このように書くことで このデータを モデルとして 扱うことができるようになります モデルとして 扱うことができるようになると このデータをビューに 反映させることができるようになります ここでいうビューとは 「HTML」のことですね そして この「$scope」の後に 「.」で続く この部分 この部分が このモデルの名前となります 今回は 「notes」としていますね このように モデルとは 「HTMLファイル」内に 簡単に 値を表示させることができる 変数のようなもの ということになりますね 以上で レッスンは終了です 今回は Webアプリケーション内で利用する ノートのデータを モデルとして作成する方法について 解説いたしました 以降のレッスンでは 今回作成したノートデータが格納された モデルを利用して 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宛までご連絡ください。