SlideShare a Scribd company logo
1 of 20
AngularJS 入門
{{ about-me }}

金井 健一 ( Kenichi Kanai )
フリーランス エンジニア => 雑用

 AngularJS Japan User Group 管理人

 WEB先端技術味見部 副部長

 Twitter / @can_i_do_web

 Facebook / can.i.do.web
{{ agenda }}

about AngularJS
動かしてみる
Event & Filter
Form Validation
directive
プラグインとか
{{ about AngularJS }}
{{ about AngularJS }}

Unobtrusive data binding
HTML as the template
Reusable components -- in HTML!
Views and Routes
Tests and Testability
{{ about AngularJS }}

双方向データバインディング
テンプレートとしてのHTML
再利用可能なコンポーネント
ビューとルーティング
テストとテストのしやすさ
{{ about AngularJS }}

得意なこと
CRUD系のアプリケーション
管理画面・マイページ
1ページで完結するアプリケーション
{{ about AngularJS }}

苦手なこと
モバイル向けアプリケーション
ゲームなどで使うグラフィック系・エフェ
 クト系
 ※Bombermine・・・
{{ 動かしてみる }}
実際つかってみましょう
ng-app
ng-bind = {{ model名 }}
ng-model
ng-init
ng-repeat
{{ とその前に。 }}




HTML のバリデーションチェックでエラーになるんですけどっ!
{{ そんなことないですよー }}

気になる方は
data-ng-app = “”
ng:bind = “”
x-ng-model = “”
{{ 動かしてみます }}
{{ Event }}

ng-change      ng-mouseenter
ng-checked     ng-mouseleave
ng-click       ng-mouseover
ng-dblclick    ng-mouseup
ng-mousedown   ng-submit
{{ Filter }}

currency      lowercase
date          number
filter        orderBy
json          uppercase
limitTo
{{ Form Validation}}
{{ Form Validation}}

バリデーションの結果

 form[name].各input[name].$valid

 form[name].各input[name].$error

 form[name].各input[name].$error.required

 form[name].$valid / $invalid

 form[name].$error(フォーム内の全バリデーション結果)
{{ Form Validation}}

                  check                                         text
validation/type           email   number   radio   text   url        select
                   box                                          area
required                   ○        ○               ○     ○      ○     ○
min                                 ○
max                                 ○
ng-minlength               ○        ○               ○     ○      ○
ng-maxlength               ○        ○               ○     ○      ○
ng-pattern                 ○        ○               ○     ○      ○
ng-true-value       ○
ng-false-value      ○
{{ directive }}

独自タグ
独自属性
独自クラス
コメントもコンポーネント化できる
{{ プラグインとか }}

AngularUI
UI Bootstrap
ANGULAR MODULES
{{ thank you }}




       ご清聴ありがとうございました。

More Related Content

Viewers also liked

HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJSHTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJSKenichi Kanai
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2Kenichi Kanai
 
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!Jun-ichi Sakamoto
 
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)pinmarch_t Tada
 
Thailand report
Thailand reportThailand report
Thailand reportclari1998
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるMasashi Haga
 
AngularJSについて
AngularJSについてAngularJSについて
AngularJSについて昌生 高橋
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIGHayashi Yuichi
 
Dec. 2012 newsletter final
Dec. 2012 newsletter finalDec. 2012 newsletter final
Dec. 2012 newsletter finalaprilrism1
 
TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation fmorado
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกnearary
 

Viewers also liked (17)

AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJSHTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJS
 
Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
 
Thailand report
Thailand reportThailand report
Thailand report
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
 
AngularJSについて
AngularJSについてAngularJSについて
AngularJSについて
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
 
We nemen je mee
We nemen je meeWe nemen je mee
We nemen je mee
 
Druge_jittya
Druge_jittyaDruge_jittya
Druge_jittya
 
Animated1
Animated1Animated1
Animated1
 
Dec. 2012 newsletter final
Dec. 2012 newsletter finalDec. 2012 newsletter final
Dec. 2012 newsletter final
 
TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation TRiO SSS Enrollment Orientation
TRiO SSS Enrollment Orientation
 
บุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอกบุคคลสำคัญของบางกอก
บุคคลสำคัญของบางกอก
 

More from Kenichi Kanai

techfeed_ng-japan2019
techfeed_ng-japan2019techfeed_ng-japan2019
techfeed_ng-japan2019Kenichi Kanai
 
ng-japan2019_techfeed_LT
ng-japan2019_techfeed_LTng-japan2019_techfeed_LT
ng-japan2019_techfeed_LTKenichi Kanai
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5Kenichi Kanai
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2Kenichi Kanai
 
Web先端技術味見部
Web先端技術味見部Web先端技術味見部
Web先端技術味見部Kenichi Kanai
 
angularJS in 10ish minutes
angularJS in 10ish minutesangularJS in 10ish minutes
angularJS in 10ish minutesKenichi Kanai
 
初学者向けセミナー資料
初学者向けセミナー資料初学者向けセミナー資料
初学者向けセミナー資料Kenichi Kanai
 
HTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けHTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けKenichi Kanai
 
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2Kenichi Kanai
 
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionicHTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionicKenichi Kanai
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJSKenichi Kanai
 

More from Kenichi Kanai (18)

techfeed_ng-japan2019
techfeed_ng-japan2019techfeed_ng-japan2019
techfeed_ng-japan2019
 
ng-japan2019_techfeed_LT
ng-japan2019_techfeed_LTng-japan2019_techfeed_LT
ng-japan2019_techfeed_LT
 
Angular CLI
Angular CLIAngular CLI
Angular CLI
 
pick up ng-conf
pick up ng-confpick up ng-conf
pick up ng-conf
 
Angular1.5.5
Angular1.5.5Angular1.5.5
Angular1.5.5
 
New Features in Angular 1.5
New Features in Angular 1.5New Features in Angular 1.5
New Features in Angular 1.5
 
ngTeratail
ngTeratailngTeratail
ngTeratail
 
はじめてのAngular2
はじめてのAngular2はじめてのAngular2
はじめてのAngular2
 
Web先端技術味見部
Web先端技術味見部Web先端技術味見部
Web先端技術味見部
 
angularJS in 10ish minutes
angularJS in 10ish minutesangularJS in 10ish minutes
angularJS in 10ish minutes
 
初学者向けセミナー資料
初学者向けセミナー資料初学者向けセミナー資料
初学者向けセミナー資料
 
HTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向けHTML5入門 for 頭がヤバい人向け
HTML5入門 for 頭がヤバい人向け
 
みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2みんなが調べないJS調べてみた JSオジサン#2
みんなが調べないJS調べてみた JSオジサン#2
 
HTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionicHTML5とか勉強会#48 ionic
HTML5とか勉強会#48 ionic
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
 
味見部紹介 LT
味見部紹介 LT味見部紹介 LT
味見部紹介 LT
 
Ng mtg#3
Ng mtg#3Ng mtg#3
Ng mtg#3
 
AngularJS 概説
AngularJS 概説AngularJS 概説
AngularJS 概説
 

AngularJS 入門