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

ノートパッドWebアプリケーションのHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
まずは、ノートパッドWebアプリケーションのHTMLコーディングの方法について、いくつかポイントを確認致します。
講師:
03:32

字幕

このレッスンでは Angular.jsを使って 開発を進めていく前に まずは ノートパットWebアプリケーションの HTMLコーディングの方法について いくつかポイントを確認していきます まずはダウンロードしてきた こちらの「html_coding」という フォルダーの中に入っている この「HTMLファイル」と 「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは早速 レッスンを始めていきましょう まずは 現状のファイルの中身を 確認しておきたいと思います 「CSSファイル」と 「JavaScriptファイル」から こちらを 「エディタ」でのぞいてみますと このように 「CSSファイル」も「JavaScriptファイル」も まだ何も書かれていない状態ですね そして こちらの「HTMLファイル」 こちらは 今回解説する ノートパットのWebアプリケーションを 制作していくための HTMLコーディングが すでに完了されている状態となっています 今回は この「HTMLファイル」を目で追いながら どのように HTMLコーディングをしているか 確認していきたいと思います まずは この「body」タグの中に 大きく「div」タグで 要素を囲ってあげます こちらから そしてこの部分ですね そして ここには 「id="container"」をつけています そして その中に「h1」タグをおいて ここから 2つの要素に大きく分かれます まずは「左のリスト部分」 そして もう1つは「右のノート詳細部分」の 2つの要素です こちらの「左のリスト部分」ですが この部分では ノートを検索するための「input」ボックス そして登録されているノートのデータを リスト形式で表示させるための 「ul」「li」タグ そして 新規にノートを追加するための 「button」タグを設置しています そして 次に こちらの「右のノート詳細部分」です こちらの部分では 先ほどの左のリスト部分から選択された ノートのデータを表示するための コーディングを行っています この中では まず ノートの「タイトル」を表示させるための 「input」ボックス こちらを「h2」タグで囲っています そして ノートの「本文」を表示させるための 「textarea」 こちらのタグを 「p」タグで囲っています そして 最後に 表示されているノートを 削除するための「削除ボタン」 「button」タグですね こちらを設置しています このようにAngular.jsを使って Webアプリケーションを実装する とは言っても HTMLコーディング自体は 非常にシンプルで 通常のHTMLコーディングと ほとんど変わりはありませんので ご安心ください 以上で レッスンは終了です 今回はAngular.jsを使って 開発を進める前の ノートパットWebアプリケーションの HTMLコーディングの方法について いくつかのポイントを確認いたしました 以降のレッスンでは この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宛までご連絡ください。