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

モジュールをJavaScriptで定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSのアプリケーションには、JavaScriptで処理を加えることができます。
講師:
09:19

字幕

このレッスンでは AngularJS のアプリケーションに JavaScript で処理を加えてみます AngularJS を読み込んで ng-app というディレクティブで アプリケーションを設定し そして様々なディレクティブの 設定を加えることで input 要素の入力データを チェックしたいということが 特に JavaScript を書かなくてもできます けれども JavaScript で さらに機能を追加する― ということができますので それをやってみましょう ではまずビューはコードを全体で見たいので コードビューにします そして今は ng-app ということで 特に設定が加えられていないのですが ここに設定を加えたいと思います そのために JavaScript を定義します ですから JavaScript のファイルを 作ることにしましょう ファイル>新規> javascript です 作成してまずは保存しておきましょう 場所は js というフォルダを用意してあるので ここに入れることにします AngularJS はさらに div の中の angular というフォルダに入っていますが それよりは上にしておきます lib と同一の階層にします app という名前にしましょう そして保存をしておきます まずはともかく定義しなければならないことを 定義してしまいます angular のアプリケーションに 機能を追加するというのは モジュールを追加するという考え方になります まずは angular というキーワードで メソッドを呼び出します module です そしてこのメソッドには2つ引数を加えます まずはアプリケーションの名前です myApp としましょう そして2つ目の引数には module を加える場合にはそれを指定します でも加えない場合にも 今回は加えないんですが 空っぽの配列を指定するという形になります そして呼び出した結果 アプリケーションが出来上がりますので それを変数に入れておきます 変数はアプリケーションと同じ名前に とりあえずしておきます myApp ですね そして制御を加えたいという場合には コントローラ を追加するということになります この myApp ですね 変数の myApp に対して controller を加えることになります controller もまず第一引数には controller の名前です 今回はフォームの登録のときに 実行するという想定なので Registration の Controller と という名前にします 2つ目の引数は関数です とりあえず空っぽで定義しておきましょう function として空っぽの丸括弧 空っぽの中括弧ということで とりあえず形としては これで定義ができたことになります もちろん内容が何もありませんから 空っぽですけれども まずこの段階で HTML ドキュメントの方に 設定を追加することにしましょう 2つの名前 myApp と RegistrationController これを使うので タイプミスしそうですから 特に長いこちら側をコピーしておきましょう そして一旦保存しておきます またすぐ付け加えますけれども とりあえず保存です そして HTML ドキュメントの方に 切り替えます まずは ng-app これは今 JavaScript で アプリケーションを定義しましたので その名前をここに設定します イコール(=)で文字列です myApp にしました これで myApp で定義した この app.js の処理内容が アプリケーションに加わることになります 次に controller です controller は この ng-app でコントロール している中であれば どこでも設定できます またコントロールしたいものによって 設定場所が異なってくるのですが 今回は簡単に 同じ階層に 設定することにしましょう ですからこの ng-app のあとに controller の設定も一緒に加えます ng-controller です そしてイコールで名前です タイプミスをしないように 先程コピーしておいたので それをペーストしましょう これで HTML ドキュメントの方の設定が とりあえず済みましたので こちらも保存しておきます そして app.js の方に切り替えます 付け加える JavaScript の処理というのは この function の中に加えます そしてこの function で HTML ドキュメントの ng-app を設定した あの中をコントロールしたいわけですが あの中をみるために スコープという― $ サインの scope という引数を受け取ります この引数を参照して HTML ドキュメントの中の 変数などを見ることもできますし あるいはこの function の中で 定義したものを $scope に設定すれば HTML ドキュメントの中で AngularJS がコントロールすることができます お互いにデータをやり取りすることが できるために この引数があります ではここで改行して 今言った通り この $scope に対して 何か設定してみましょう ここで message と入力します これは今作った変数名です ここに文字列を設定します ようこそ と入力します プログラムでありがちですね こうすると HTML ドキュメントの AngularJS がコントロールしている範囲の中で この message という変数が 参照できるようになります そしてその中には「ようこそ」という 文字が入ったという状態です では保存しておきましょう また HTML ドキュメントの方に移ります この ng-app の中 つまりこの要素の中であれば 参照ができるわけなので 例えばここですね 「入力フォーム」 「以下の項目を入力してください」 というテキストの後に p 要素を加えることにします そしてここから 先程 JavaScript ファイルの方で設定した message という変数が 参照できるようになります この場合変数を参照したいときには 二重の波括弧で 変数を囲ってあげることになっています ここで message と入力します ということで参照ができます あともう1つ JavaScript は 別ファイルにしましたので これを script 要素で 読み込んでおく必要があります script でソースですね src ということで 参照します 先程 保存した app.js を開いて そして script 要素...script タグを閉じます ではこれで保存をして確かめてみましょう ファイルを保存して ブラウザーでプレビューします ようこそ という文字が表示されました このレッスンでは AngularJS のアプリケーションに JavaScript で処理を加える 簡単な方法についてご説明しました まず Angular の module というメソッドで アプリケーションの名前を指定します そしてそのアプリケーションに対して 今度は controller のメソッドで コントローラの名前と処理をしたいことを 関数で function として定義するということです その上で HTML ドキュメントの方では アプリケーションの名前を ng-app に指定し controller は ng- (ハイフン) controller に名前を 指定すればいいということでした

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

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

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

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

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

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