AngularJS 入門
{{ about-me }}金井 健一 ( Kenichi Kanai )フリーランス エンジニア => 雑用 AngularJS Japan User Group 管理人 WEB先端技術味見部 副部長 Twitter / @can_i_...
{{ 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...
{{ 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-mo...
{{ 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].$e...
{{ Form Validation}}                  check                                         textvalidation/type           email   ...
{{ directive }}独自タグ独自属性独自クラスコメントもコンポーネント化できる
{{ プラグインとか }}AngularUIUI BootstrapANGULAR MODULES
{{ thank you }}       ご清聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

AngularJS 入門

6,640

Published on

ng-mtg#2 AngularJS 勉強会で使ったドキュメントです

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,640
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "AngularJS 入門"

  1. 1. AngularJS 入門
  2. 2. {{ about-me }}金井 健一 ( Kenichi Kanai )フリーランス エンジニア => 雑用 AngularJS Japan User Group 管理人 WEB先端技術味見部 副部長 Twitter / @can_i_do_web Facebook / can.i.do.web
  3. 3. {{ agenda }}about AngularJS動かしてみるEvent & FilterForm Validationdirectiveプラグインとか
  4. 4. {{ about AngularJS }}
  5. 5. {{ about AngularJS }}Unobtrusive data bindingHTML as the templateReusable components -- in HTML!Views and RoutesTests and Testability
  6. 6. {{ about AngularJS }}双方向データバインディングテンプレートとしてのHTML再利用可能なコンポーネントビューとルーティングテストとテストのしやすさ
  7. 7. {{ about AngularJS }}得意なことCRUD系のアプリケーション管理画面・マイページ1ページで完結するアプリケーション
  8. 8. {{ about AngularJS }}苦手なことモバイル向けアプリケーションゲームなどで使うグラフィック系・エフェ クト系 ※Bombermine・・・
  9. 9. {{ 動かしてみる }}実際つかってみましょうng-appng-bind = {{ model名 }}ng-modelng-initng-repeat
  10. 10. {{ とその前に。 }}HTML のバリデーションチェックでエラーになるんですけどっ!
  11. 11. {{ そんなことないですよー }}気になる方はdata-ng-app = “”ng:bind = “”x-ng-model = “”
  12. 12. {{ 動かしてみます }}
  13. 13. {{ Event }}ng-change ng-mouseenterng-checked ng-mouseleaveng-click ng-mouseoverng-dblclick ng-mouseupng-mousedown ng-submit
  14. 14. {{ Filter }}currency lowercasedate numberfilter orderByjson uppercaselimitTo
  15. 15. {{ Form Validation}}
  16. 16. {{ 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(フォーム内の全バリデーション結果)
  17. 17. {{ Form Validation}} check textvalidation/type email number radio text url select box arearequired ○ ○ ○ ○ ○ ○min ○max ○ng-minlength ○ ○ ○ ○ ○ng-maxlength ○ ○ ○ ○ ○ng-pattern ○ ○ ○ ○ ○ng-true-value ○ng-false-value ○
  18. 18. {{ directive }}独自タグ独自属性独自クラスコメントもコンポーネント化できる
  19. 19. {{ プラグインとか }}AngularUIUI BootstrapANGULAR MODULES
  20. 20. {{ thank you }} ご清聴ありがとうございました。

×