Download as PDF, PPTX
![5 Ready 1. 公式ページからzipで1.3.xをダウンロード 2. html内にAngularJS用の記述 <html lang=“ja" ng-app=“myApp”> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-messages.js"></script> <script src="js/angular/directive.js"></script> 3.ディレクティブを記述 angular.module('myApp', ['ngMessages']); (directive.js) ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fanglurjs-141105051028-conversion-gate01%2f75%2fAngularJS-5-2048.jpg&f=jpg&w=240)
Uploaded byHoriguchi Seito
PDF, PPTX7,942 views
超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
AngularJS 1.3.1を用いて、フォームページをちょっとリッチにする方法。できるだけ簡単に実装する方法を紹介しています。
Recommended
More Related Content
What's hot
Viewers also liked
Similar to 超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
- 1.sample Let’s makeforms rich by using AngularJS(v1.3.1), for beginners 5 November 2014 ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 2.Profile ホリグチ セイト Front-End-Engineer趣味 漫画（いろいろ）、海外ドラマ、lang-8 最近の活動 セブ島行ってきました。 Webサービス開発し始めました。 AngularJS始めました。 ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 3.3 Prologue やること：AngularJSでフォームページをちょいリッチにしたい。 （主にバリデート機能）できるだけ簡単にしたい。 使うもの： AngularJS 1.3.1 angular-messages.js + bootstrapとか ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 4.4 ソース Ready: https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 5.5 Ready 1.公式ページからzipで1.3.xをダウンロード 2. html内にAngularJS用の記述 <html lang=“ja" ng-app=“myApp”> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-messages.js"></script> <script src="js/angular/directive.js"></script> 3.ディレクティブを記述 angular.module('myApp', ['ngMessages']); (directive.js) ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 6.6 Creating バリデート機能を入れてみるERROR! Name ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 7.7 Creating バリデート機能を入れてみる今回使ったディレクティブ ng-messages： ng-messageを囲っておくもの ng-message ：エラーメッセージを出すかどうか判定 ng-if : 条件を設定し、要素を生成＆削除する ng-disabled : disabled属性を設定できる ng-model ： 相互のデータバインディングを行うように伝える ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 8.8 Creating バリデート機能を入れてみる今回使ったバリデーション変数 $error ： エラーかどうかを判定する際に使用。 $dirty ： 初めにエラー表記を隠すために使用。 $invalid : 入力に抜けがないか全体をチェックするために使用。 ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 9.9 Creating バリデート機能を入れてみる今回使ったTag属性 novalidate： ブラウザ側でのバリデーションを止める。formタグに設定。 type ： text,email,urlなど。inputタグに設定。 name : バリデート対象を指定するのに使う。inputタグなどに設定。 required ： 必須属性。必須項目の判定に使う。inputタグなどに設定。 ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 10.<form novalidate name=”sample”class=”form-‐horizontal”> …… <input type=”text” name=”name” … ng-‐model=”name” ng-‐maxlength=”30” required/> …… <div class=“error_box” ng-‐if=”sample.name.$dirty” ng-‐messages=“sample.name.$error”> 10 Creating 例）デモのソースから一部抜粋 <div class="popover top error" role="tooltip" ng-‐message=“required">…</div> <div class="popover top error" role="tooltip" ng-‐message=“maxlength">… </div> </div> …… </form> ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 11.11 Conclusion 一部のバリデーション機能だけなら意外とシンプル！（JSはほとんど書かなくてよい） ソース : https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/
- 12.sample ご清聴ありがとうございました ソース: https://github.com/seito2014/angularjs-‐study2-‐seito デモ : http://seito2014.github.io/angularjs-‐study2-‐seito/