Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular1&2

77,050 views

Published on

HTML5とか勉強会#56

  • Be the first to comment

Angular1&2

  1. 1. Angular 1 & 2 2015.4.28 HTML5とか勉強会
  2. 2. Kenichi Kanai can_i_do_web
  3. 3. Web先端技術味見部 http://bit.ly/1Fq9kDe
  4. 4. ! AngularJS Japan User Group http://bit.ly/1vBMMHl
  5. 5. now on sale.
  6. 6. Agenda ! • AngularJS 1.x • Angular 2 • vs React
  7. 7. AngularJS 1.x
  8. 8. Concepts • ( Two-way ) Data Binding • Template Engine • Ajax Support • Routing • Test • Security
  9. 9. Syntax - View
  10. 10. Syntax - Controller
  11. 11. Syntax - Result
  12. 12. Difference between others ! • Fullstack • HTML enhanced
  13. 13. Feature - HTML enhanced ! Template を *.html ファイルに書ける!
  14. 14. // HTML は xxx.html ファイルに。 in Angular
  15. 15. よそのフレームワーク // .js ファイルに書きたくない
  16. 16. Feature - HTML enhanced ! Template を *.html ファイルに書ける! HTML の構文で Template が書ける!
  17. 17. Feature - HTML enhanced
  18. 18. Feature - HTML enhanced ! Template を *.html ファイルに書ける! HTML の構文で Template が書ける! Custom Directive ≒ Web Components
  19. 19. Feature - HTML enhanced
  20. 20. Angular loves Web Standards
  21. 21. Custom Element は x-foo Custom Attribute は data-bar
  22. 22. どっちでもOK!
  23. 23. v 1.4.0-rc.1 • new Router ( 新機能 ) • i18n ( 改善 ) • $http ( 改善 ) • Forms ( 改善 ) • Cookies ( 改善 ) • Pluralization and Gender ( 改善 / 追加 )
  24. 24. Angular2
  25. 25. ※現時点(2015.4.28)でのお話です
  26. 26. Keywords • Components based • ES6 • TypeScript • Object.observe ( ES7 ) • Shadow DOM • Virtual DOM
  27. 27. 変わること
  28. 28. ( Two-way ) Data Binding 双方向データバインディングはしない
 (再考中)
  29. 29. R.I.P - Controllers, $scope and angular.module
  30. 30. R.I.P - DDO(Directive Definition Object)
  31. 31. お疲れさまでした!
  32. 32. Syntax HTML Attribute -> DOM Property
  33. 33. Syntax binding Angular 1.x Angular 2 HTMLInputElement.prototype.value
  34. 34. Syntax event-binding Angular 1.x Angular 2 HTMLButtonElement.prototype.click
  35. 35. Syntax JavaScript <sample-app> Tag
  36. 36. https://angularjs.org
  37. 37. https://angular.io/
  38. 38. vs React
  39. 39. JSX キモい
  40. 40. File Size 大きい割に…
  41. 41. この辺どうしてる? • ( Two-way ) Data Binding • Template Engine • Ajax Support • Routing • Test • Security
  42. 42. Thank you ! can_i_do_web

×