at 石川県工業試験場

1. Angularでつくる
Webアプリケーション

2. Kenichi Kanai
@can_i_do_web
AngularJS Japan User Group 管理人
Web先端技術味見部部長

4. AngularJS Japan User Group #ng_jp

5. facebook.com/ajimibu
twitter.com/ajimibu #ajimibu

6. HTML5 Experts.jp #html5exp

7. Basic
つくってみた
Plugin
Tools
Angular2
Agenda

8. https://angularjs.org/

9. Google Trends

10. Features
Fullstack
HTML enhanced

11. Concepts
Two way data binding
Template Engine
Ajax Support
Routing
Test
Security

12. 得意なこと
CRUD系のアプリケーション
管理画面・マイページ
ハイブリッドアプリケーション

13. 苦手なこと
モバイル向けアプリケーション※
ゲーム等のグラフィックやエフェクト
いわゆるWebサイト
※ 改善はされてきています

14. 一番最初の Angular

15. built-in directive

16. DOM 操作 (一部)
ng-bind
ng-bind-html
ng-repeat
ng-show / hide / if
ng-switch /
ng-switch-when
a
textarea
select /
ng-options
form
input[type= xxx ]

17. Event
ng-click
ng-dblclick
ng-change
ng-checked
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mouseover
ng-mouseup
ng-submit

18. step2

19. step2

20. Form Validation
required ( = ng-required)
min / max ( = ng-min / ng-max)
ng-minlength
ng-maxlength
ng-pattern
ng-true-value
ng-false-value

21. step3

22. step3

23. Form Validation
form[name].input[name].$valid
form[name].input[name].$invalid
form[name].input[name].$error.required
form[name].input[name].$error.max
childForm[name].$error.minlength
form[name].childForm[name].$valid

24. step4

25. step4

26. Form Validation
check
box
email number radio text url
text
area
select
required ⃝ ○ ○ ○ ○ ○
min ○
max ○
ng-minlength ○ ○ ○ ○ ○
ng-maxlength ○ ○ ○ ○ ○
ng-pattern ○ ○

27. Filter
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase

28. Filter

29. ng core - function

30. ng core - function
angular.bind
angular.bootstrap
angular.copy
angular.element
angular.equals
angular.extend
angular.forEach
angular.fromJson
angular.identity
angular.injector
angular.isArray
angular.isDate
angular.isDefined
angular.isElement
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isUndefined
angular.lowercase
angular.merge
angular.module
angular.noop
angular.reloadWithDebugInfo
angular.toJson
angular.uppercase

31. Model
View
Controller

32. Model
データ
ビジネスロジック

33. View
Template -> HTML

34. Controller
Scope 初期化
イベントの受け渡し

35. MVC - before

36. MVC - after

37. MVC - after

38. Service

39. Service
factory
service
provider
constant
value

40. Scope

41. Scope

42. Scope

43. Scope

44. Custom Directive

45. Web Components
Custom Elements
Shadow DOM
Templates
HTML Imports

46. Web Components
https://html5experts.jp/1000ch/11142/

47. Custom Directive
Custom Element
Custom Attribute
From Class Name (CSS)

48. 一番最初の Custom Directive

49. Custom Directive

50. Component

51. Routing

52. Routing
ngRoute
AngularUI Router
Component Router

53. http://angular-ui.github.io/ui-router/site/#/api/ui.router

54. https://github.com/angular/router

55. 基礎おわり

56. Plugin

57. https://angular-ui.github.io/

58. http://ngmodules.org/

59. Tools

60. https://nodejs.org/en/

61. http://gruntjs.com/

62. http://gulpjs.com/

63. http://bower.io/

64. http://yeoman.io/

65. https://github.com/broccolijs/broccoli

66. http://brunch.io/

67. つくってみた

68. つくってみた
yeoman でテンプレート作成
grunt でサーバ起動

70. about Angular2
Component ベース
新しい構文
Universal JavaScript

71. Angular2 Demo

72. migration to Angular2

73. FAQ

74. Why “ng-“
ng sounds like angular

75. “ng-“ は HTML5 の構文的に NG!
data-ng-repeat で OK!

76. SEO
基本無理です...

77. MVWって？
Model
View
Whatever (?)
MVC でも MVVM でも何でもいいからコード書こうぜ！

78. Angular1 のサポート期間は？
みんなが Angular2 になるまで（！？）

79. Enjoy Angular!

80. Thank you!
@can_i_do_web