AngularJSでフォーム入力を検証しよう

フォームのHTMLドキュメントにAngularJSを読み込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームのHTMLドキュメントの構成を確かめ、script要素にAngularJSのライブラリを読み込みます。
講師:
02:43

字幕

このレッスンでは AngularJS の ライブラリを読み込む前の html ドキュメントの構成を確認したうえで ライブラリの JavaScript ファイルを Script 要素に 読み込んでみたいと思います まず html ドキュメントを DreamWeaverCC で開いています 内容としては まず title がありますけれど フォーム全体ですね これが section の中に含まれています そして title からスタートして 入力する input の要素ですね これが全部で4つあります それぞれ type は text で name が設定してあり またプレースフォルダの設定もありますので それぞれの input 要素に どういう内容を入れるか ということが確認できるようになっています ではこの状態で一旦 ブラウザで見ておきましょう 「ファイル」から 「ブラウザでプレビュー」で Google Chrome で確認をします プレースフォルダが 表示されています もちろん入力もできますけれど まだ AngularJS などの 設定はされていませんので その機能を使うことはできません とりあえずは script 要素に AngularJS のライブラリの JavaScript ファイルを 読み込みましょう では DreamWeaver で script 要素は head の中に書き込みましょう script で ライブラリの JavaScript ファイルのパスを src= ソース で指定します 「参照」のボタンをクリックして JavaScript のファイルは js というフォルダの中 そして lib 更に angular の中に入っています angular.min.js これがライブラリのファイルですので これを選択して開きます そして タグを閉じる これでライブラリの JavaScript ファイルが script 要素に設定されました 一旦「保存」をして 確認してみましょう 「ブラウザでプレビュー」します そして「表示」>「開発管理」で 「JavaScript コンソール」 見てみましょう 特にエラーがでていませんので ライブラリの JavaScript ファイルが きちんと読み込まれた ということが確認できました このレッスンではフォームの html ドキュメントの構成を確認したうえで ライブラリの Javascript ファイル AngularJS ですね これを script 要素に 読み込むという所を説明しました

AngularJSでフォーム入力を検証しよう

AngularJSはHTMLを拡張するフレームワークです。Webページを動的に操作することができます。このコースではCSSとJavaScriptの基礎を学んだ方向けに、AngularJSを使った入力フォームの処理の仕方について解説します。インストール方法や動作確認、テキストの表示やデータ形式のチェック、入力に応じたスタイルの変更などをひと通り説明します。

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

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

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

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