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

AngularJSのアプリケーションを設定して試す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSのアプリケーションの設定を行って、簡単に機能を試してみます。
講師:
04:51

字幕

このレッスンでは HTML のタグに AngularJS の設定を加えて その機能を簡単に試してみたいと思います まず最初に AngularJS で この HTML ドキュメントの どこをコントロールするのか ということを決めます ページ全体の場合にはこの HTML の タグの中に書き加えます その命令「ディレクティブ」というのですが AngularJS では ng で始まります 「ng-app」とこれが AngularJS で コントロール対象にするということの 命令になります こうすると HTML 全体になるのですが 部分的にこの要素 親要素を指定して その親要素以下全部が コントロール対象になるのですが その範囲を 狭めることもできます 今回はそれでは フォームの要素ですが 少し下にスクロールしまして この「section」の中に フォームが入っています ですからこの section を コントロールの対象にすることにしましょう ということで section の後に先程の ng-app アプリケーション という意味ですね AngularJS でコントロールする アプリケーション この section 要素の中 子要素すべてが対象になります さてでは何を実際に コントロールするか というと ではこの「firstname」ですね 姓名の名の方です これを対象にしましょう その場合には AngularJS で 認識するための 名前をつけてあげます 「ng-model」 model というのは そこに入れたデータ そこに設定したデータが AngularJS で コントロールできるようになります 「 "" 」 で囲みまして 「 "message" 」としましょう そうすると message という名前で この input 要素の中が AngularJS の コントロール対象になります ではそのデータを使って ちょっと表示をしてみましょう ここに p 要素を加えて そしてこの input 要素ですね message という ng-model の ディレクティブに名前を付けましたが このデータをここに表示したいと思います そういう場合にはデータを 持ってくるという場合は 波括弧2つで囲ってあげます そしてその中に使いたい ディレクティブにつけた名前を コピーで持ってきます こうしてあげると message という名前を ng-model のディレクティブで設定した この中のデータが AngularJS によって ここに持ってくるということが可能になります では保存して確認してみましょう 保存したら 「ブラウザでプレビュー」 「Google Chrome」です 先程の「{{message}}」 というのは このテキストの下に設定したのですが あの message という名前は AngularJS が見ている名前ですので この HTML ドキュメントには 表示されません けれどもデータは表示されます この姓名の名の方に message という ng-model を設定しましたよね ここに入力してみましょう タイプをするとその名前がデータとして AngularJS によって取り出されて 表示されています もちろん書き換えれば ただちに変わります このようにデータがこの中に入力したものと それからそれを AngularJS が 取り出してこの下に表示するということで 連携したということになるわけです このデータの連携のことを 「データバインディング」という風に言います AngularJS の一つの強力な機能として データバインディングがあるということです このレッスンでは AngularJS の 2つのディレクティブを ご紹介しました 1つはアプリケーションを 設定するという大元になりますが ng-app そして次に データバインディングをするために model を設定する ng-model これでデータの連携 バインディングが できたということです

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

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

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

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

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

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