超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
•
15 likes•7,936 views
AngularJS 1.3.1を用いて、フォームページをちょっとリッチにする方法。 できるだけ簡単に実装する方法を紹介しています。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (10)
Similar to 超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
Similar to 超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう (20)
Recently uploaded
Recently uploaded (9)
超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
- 1. sample Let’s make forms 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/