超初心者でも大丈夫！AngularJSでフォームページをちょっとリッチに改造してみよう
15 likes•7,938 views
AngularJS 1.3.1を用いて、フォームページをちょっとリッチにする方法。 できるだけ簡単に実装する方法を紹介しています。
![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/](https://image.slidesharecdn.com/anglurjs-141105051028-conversion-gate01/85/AngularJS-5-320.jpg)
超初心者でも大丈夫！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/