Submit Search
Upload
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
•
15 likes
•
7,936 views
Horiguchi Seito
Follow
AngularJS 1.3.1を用いて、フォームページをちょっとリッチにする方法。 できるだけ簡単に実装する方法を紹介しています。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 12
Download now
Download to read offline
Recommended
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
Recommended
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
STORES.jp x AngularJS
STORES.jp x AngularJS
Keisuke Makino
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Front-end package managers
Front-end package managers
Hayashi Yuichi
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
Angular2
Angular2
Kenichi Kanai
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
Rnyoutube
Rnyoutube
yugo matsumoto
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Koichiro Nishijima
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
元コンビニ店長の人生を賭けたエンジニア留学
元コンビニ店長の人生を賭けたエンジニア留学
Horiguchi Seito
More Related Content
What's hot
STORES.jp x AngularJS
STORES.jp x AngularJS
Keisuke Makino
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
Front-end package managers
Front-end package managers
Hayashi Yuichi
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
Angular2
Angular2
Kenichi Kanai
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
Rnyoutube
Rnyoutube
yugo matsumoto
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Koichiro Nishijima
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
What's hot
(20)
STORES.jp x AngularJS
STORES.jp x AngularJS
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Front-end package managers
Front-end package managers
俺とAngular JS 2
俺とAngular JS 2
CSS Living StyleGuide
CSS Living StyleGuide
Angular2
Angular2
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
LIGでのDocker活用
LIGでのDocker活用
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
Angular js はまりどころ
Angular js はまりどころ
Rnyoutube
Rnyoutube
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
AngularJS で ハイスピードSI
AngularJS で ハイスピードSI
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Viewers also liked
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
元コンビニ店長の人生を賭けたエンジニア留学
元コンビニ店長の人生を賭けたエンジニア留学
Horiguchi Seito
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Lets start-react
Lets start-react
Horiguchi Seito
UX白書には本当は何が書かれているか
UX白書には本当は何が書かれているか
Masaya Ando
Viewers also liked
(10)
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
元コンビニ店長の人生を賭けたエンジニア留学
元コンビニ店長の人生を賭けたエンジニア留学
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Lets start-react
Lets start-react
UX白書には本当は何が書かれているか
UX白書には本当は何が書かれているか
Similar to 超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
yidev 第18回勉強会 「業務でSwiftで3ヶ月開発してきたので一旦振り返り」
yidev 第18回勉強会 「業務でSwiftで3ヶ月開発してきたので一旦振り返り」
佐藤 俊太郎
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
Goはじめました
Goはじめました
Masanori Masui
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
Swift bondでつなげてプログラミング
Swift bondでつなげてプログラミング
貴士 山本
Start PWA from vuejs+github pages
Start PWA from vuejs+github pages
Hirata Tomoko
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
77web
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
Web開発の 今までとこれから
Web開発の 今までとこれから
Shinichi Takahashi
Openshift 20191121
Openshift 20191121
Yasushi Osonoi
Ninja framework使ってみた
Ninja framework使ってみた
eiryu
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
Yasuhiro Onishi
HerokuでRails3.2 we love herokuの事例
HerokuでRails3.2 we love herokuの事例
Naoto Koshikawa
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
Hiroki Toyokawa
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Kazuhiro Hara
Scala 初めての人が Heroku で Web アプリを公開するまで
Scala 初めての人が Heroku で Web アプリを公開するまで
Hideaki Miyake
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Similar to 超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
(20)
yidev 第18回勉強会 「業務でSwiftで3ヶ月開発してきたので一旦振り返り」
yidev 第18回勉強会 「業務でSwiftで3ヶ月開発してきたので一旦振り返り」
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Goはじめました
Goはじめました
ngJapan報告会
ngJapan報告会
Swift bondでつなげてプログラミング
Swift bondでつなげてプログラミング
Start PWA from vuejs+github pages
Start PWA from vuejs+github pages
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Web開発の 今までとこれから
Web開発の 今までとこれから
Openshift 20191121
Openshift 20191121
Ninja framework使ってみた
Ninja framework使ってみた
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
Enterprise x AngularJS
Enterprise x AngularJS
Hatena blogdevelopmentflow
Hatena blogdevelopmentflow
HerokuでRails3.2 we love herokuの事例
HerokuでRails3.2 we love herokuの事例
プロ文.com 勉強会 Phase 1
プロ文.com 勉強会 Phase 1
SwaggerとAPIのデザイン
SwaggerとAPIのデザイン
Scala 初めての人が Heroku で Web アプリを公開するまで
Scala 初めての人が Heroku で Web アプリを公開するまで
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Recently uploaded
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(7)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
超初心者でも大丈夫!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/
Download now