狠狠撸

{{ 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 }}

?Unobtrusive data binding
?HTML as the template
?Reusable components -- in HTML!
?Views and Routes
?Tests and Testability


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


得意なこと
?CRUD系のアプリケーション
?管理画面?マイページ
?１ページで完結するアプリケーション


苦手なこと
?モバイル向けアプリケーション
?ゲームなどで使うグラフィック系?エフェ
クト系
※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[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 }}

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

狠狠撸

AngularJS 入門

Recommended

More Related Content

Viewers also liked (17)

More from Kenichi Kanai (18)

AngularJS 入門