初学者向けセミナー資料
•
3 likes•1,902 views
以下のセミナーで使用した資料です。 http://www.pasonatech.co.jp/skill_up/event/140618_shibuya.jsp
Recommended
More Related Content
Viewers also liked
Similar to 初学者向けセミナー資料
Similar to 初学者向けセミナー資料 (8)
More from Kenichi Kanai
More from Kenichi Kanai (20)
初学者向けセミナー資料
- 1. AngularJS のきほんのきほん PASONA TECH AnguarJS セミナー 2014/06/18
- 2. {{ About me }} AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長 金井 健一 フリーランス フロントエンド方面のお仕事 can_i_do_web ( きゃない ) facebook/can.i.do.web
- 3. {{ Agenda }} • Basic • Validation • with jQuery • Learn more ... • Conclusion ( links )
- 5. {{ Why it s called AngularJS ? }} Because HTML has Angular brackets
- 6. {{ Why it s called AngularJS ? }} <html>
- 7. {{ MVW? }} Model View Whatever
- 8. {{ MVW? }} MVC とか MVVM とか どうでもいいから とにかくコード書こうぜ！
- 9. {{ Basic }}
- 10. {{ Basic }}
- 12. {{ Basic }} • Unobtrusive data binding • HTML as the template. • Reusable components -- in HTML! • Views and Routes. • Tests and Testability.
- 13. {{ Basic }} • 控えめなデータバインディング • テンプレートとしてのHTML • 再利用可能なコンポーネント • Views とルーティング • テストとその可用性
- 14. {{ Basic }} • Two Way Binding ( ng-model ) • ng-bind = {{ }} • ng-init • ng-show/hide • ng-repeat • filter
- 16. Demo
- 17. {{ Validation }} • Form名.input名.$valid • Form名.input名.$invalid • Form名.input名.$error • この中に個別のvalidationのチェック状況 ex） xxx.yyy.$error = { minlength: true } • Form名.$valid • Form名.$invalid
- 20. Demo 2
- 21. {{ with jQuery }}
- 22. {{ with jQuery }}
- 23. {{ with jQuery }} jQuery を利用したライブラリや プラグインとは相性が悪そう…
- 24. {{ with jQuery }} 極力つかわない方が トラブルに巻き込まれにくい！
- 25. {{ Learn more ... }} http://dotinstall.com/lessons/basic_angularjs
- 26. {{ Learn more ... }} https://egghead.io/
- 27. {{ Learn more ... }} http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
- 28. {{ Learn more ... }}
- 30. {{ Conclusion }} AngularJS Batarang Chrome ウェブストア からダウンロード
- 31. {{ Conclusion }} AngularJS Ninja http://angularjsninja.com/
- 32. {{ Conclusion }} js STUDIO http://js.studio-kingdom.com/angularjs
- 34. {{ Conclusion }} Onsen UI http://onsenui.io/
- 36. {{ Conclusion }} AngularJS Japan User Group #ng_jp https://groups.google.com/forum/#!forum/angularjs-jp
- 37. Thank you.
- 38. 補足
- 39. {{ ハンズオンで使用したコード }} <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="UTF-8"> <script src="./angular.min.js"></script> </head> <body> {{ 1 + 2 }} </body> </html> AngularJS の利用宣言 AngularJS の読み込み ちゃんと読み込めているか確認
- 40. {{ ハンズオンで使用したコード }} <body> <form name="demoForm" novalidate> <input type="text" ng-model="demoId” name="demoId"> <input type="text" ng-model="demoPassword” name="demoPassword” > <input type="submit" value="login"> <p>{{ demoId }}</p> </form> </body> ブラウザのvalidationを OFF ng-modelの定義 データバインディングを確認
- 41. {{ ハンズオンで使用したコード }} <style> input.ng-invalid.ng-dirty{ border-color: red; } </style> <form name="demoForm" novalidate> <input type="text" ng-model="id" name="demoId" required ng- minlength=“4” ng-maxlength=“8”> <input type="text" ng-model="Password" name="demoPassword” ng-parttern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> </form> バリデーションの定義
- 42. {{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId" name="demoId" required ng-minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword" name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> <p ng-show="demoForm.demoId.$error.required && demoForm.demoId. $dirty">demoId の required がエラー時</p> <p ng-show="demoForm.demoId.$error.minlength">demoId の min- length(4文字)のエラー時</p> <p ng-show="demoForm.demoId.$error.maxlength">demoId の max- length(8文字)のエラー時</p> </form> エラーメッセージの出し分け
- 43. {{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId" name="demoId" required ng- minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword" name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login"> <p ng-show="demoForm.$invalid">form のどこかに１つでもエラーがある時 </p> </form> エラーメッセージの出し分け
- 44. {{ ハンズオンで使用したコード }} <form name="demoForm" novalidate> <input type="text" ng-model="demoId" name="demoId" required ng- minlength="4" ng-maxlength="8"> <input type="text" ng-model="demoPassword" name="demoPassword" ng-pattern="/^[0-9]{5,10}$/"> <input type="submit" value="login" ng-disabled="demoForm.$invalid"> </form> 全てのバリデーションチェックが OKになるまで押せない
- 45. {{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <ul> <li ng-repeat="data in demoData">{{ data }}</li> </ul> </body> 初期値の定義 繰り返し処理
- 46. {{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data }}</li> </ul> </body> 検索ワード 絞り込み機能
- 47. {{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ 'abcde123', 'defg234', 'hijk456', 'jklm246' ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | limitTo:2 | filter:search">{{ data }}</li> </ul> </body> ２件のみ表示
- 48. {{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ { name: 'abcde123', age : 30}, { name: 'defg234', age : 31}, { name: 'hijk456', age : 31}, { name: 'jklm246', age : 32} ]"></div> <input type="text" ng-model="search"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data.name }} - {{ data.age }}</li> </ul> </body>
- 49. {{ ハンズオンで使用したコード }} <body> <div ng-init="demoData=[ { name: 'abcde123', age : 30}, { name: 'defg234', age : 31}, { name: 'hijk456', age : 31}, { name: 'jklm246', age : 32} ]"></div> <input type="text" ng-model="search.name"> <ul> <li ng-repeat="data in demoData | filter:search">{{ data.name }} - {{ data.age }}</li> </ul> </body> Nameのみ検索可能