初めてのAngular 2

Frontend Conference 2016
5 Mar 2016

Transcript

1. ॳΊͯͷAngular 2 FRONTEND CONFERENCE 2016 @shin_v1 #frontkansai 5 Mar 2016 Slide URL: http://hogehoge
2. @shin_v1 Shinsuke IMAI - ژ౎େֶେֶӃ म࢜̍೥ - ’15 ະ౿ΫϦΤʔλ - ब׆த - ng-kyotoϝϯόʔ About me
3. Today’s Mission
4. Angular 2 ͍͍Α
5. ࠓ͔Β͢Δ͜ͱ
6. ৮ͬͯΈΔϋϯζΦϯ 15:20- Augular2 + TypeScriptͰຊ֨ΞϓϦ։ൃ Angular 2 ͍͍Α
7. MENU • Angular 2ͬͯͳΜͳΜʁ • Angular 2ͰΞϓϦ࡞ͬͯΔΑ • Angular 2Ͱͳʹ͕Ͱ͖ΔΜʁ • Angular 2ͬͯͲ͏΍ͬͯษڧ͢Ε͹͍͍Μʁ
8. Angular 2ͬͯͳΜͳΜʁ
9. Framework Angular 2 is also supporting IE9+ and Android 4.1+ Server Browser Native
10. Powered by MIT License https://angular.io/ Angular 2 ެࣜαΠτ
11. Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ
12. Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰ΋νʔϜ։ൃ
13. Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰ΋νʔϜ։ൃ - jQuery͚ͩͰ͸͖͍ͭ
14. Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰ΋νʔϜ։ൃ - jQuery͚ͩͰ͸͖͍ͭ - ϑϨʔϜϫʔΫʹ৐͔ͬΓ͍ͨ
15. Angular 2Λ࠾༻͢Δཧ༝ - ߴػೳͷWebΞϓϦέʔγϣϯ - ϑϩϯτͰ΋νʔϜ։ൃ - jQuery͚ͩͰ͸͖͍ͭ - ϑϨʔϜϫʔΫʹ৐͔ͬΓ͍ͨ - ͜Ε֮͑͑͞Ε͹
16. Angular JS ͱ Angular 2 ͷൺֱ
17. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x Old New Fast Slow Easy Difficult
18. Angular JS Angular 2 2010- 2015- ‘2015 ઃܭ͕ݹ͘ͳ͖ͬͯͨ Ϟμϯͳઃܭ Change Detection, Component … Dirty Check, Directive …
19. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x Old New Fast Slow Easy Difficult
20. Angular JS Angular 2 ver. 1.x ver. 2.x 1.5.0 2.0 beta8 2.x΁Ҡߦ͠΍͍͢ػೳ Betaʹಥೖˠ҆ఆ
21. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x Old New Fast Slow Easy Difficult TypeScript
22. • JavaScriptͷεʔύʔηοτ • JavaScriptʹ͸ͳ͍ػೳ(੩తܕ෇͚ɺσίϨʔλʔͱ͔) • Microsoft͕։ൃ • Angular։ൃνʔϜͱTypeScript։ൃνʔϜ͕஥ྑ͠ • Angular 2 ͷίʔυ͸TypeScriptͰॻ͔Ε͍ͯΔ TypeScript
23. TypeScript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }()); JavaScript greeter.ts greeter.js TypeScript ίϯύΠϧ TypeScriptͰॻ͍ͨίʔυΛJavaScript΁ίϯύΠϧ TypeScript: http://www.typescriptlang.org/
24. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }()); greeter.ts greeter.js $ tsc greeter.ts
25. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x Old New Fast Slow Easy Difficult
26. https://github.com/angular/angular/issues/7088 https://plnkr.co/edit/ zpwiOiFsls3JgkuwtYmi?p=preview https://plnkr.co/edit/ cjFGtnI704bjSg6F0DEM?p=preview Is Angular 2 faster ? Angular JS Angular 2
27. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x Old New Fast Slow Easy Difficult
28. Angular JS Angular 2 Easy Difficult ៉ྷʹॻ͚Δ ver 1.x࣌୅ͷ൓ল ஍ཕ͕ͨ͘͞Μ ৭ʑͳඳ͖ํ େن໛ʹͳΔͱେม େن໛ʹ΋଱͑Δઃܭ
29. Angular 2ͰΞϓϦ࡞ͬͯΔΑ
30. Pomotune Angular 2 ͰΞϓϦΛ࡞͍ͬͯΔ࿩
31. Pomotune x Pomodoro tech Music
32. Pomotune ׬੒ʹ͸͋ͱ̍ϲ݄
33. Angular 2Ͱͳʹ͕Ͱ͖ΔΜ
34. ͨ͘͞Μͷػೳ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output Zone.js Rxjs Forms Component ….. i18n
35. ػೳΛҰͭ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output Zone.js Rxjs Forms Component ….. i18n
36. Component PomotuneΛྫʹ
37. Component PomotuneΛྫʹ
38. Component PomotuneΛྫʹ Navbar Component Playlist Component Timer Component Search Component Search items Component Item Component Item Component Item Component Item Component Item Component
39. Item Component https://angular.io/docs/ts/latest/guide/architecture.html
40. import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({ selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } <div> <img src="{{track.artwork_url}}" class="artwork"/> <div class="content"> <h1 (click)="link()">{{track.title}}</h1> </div> </div> Component Template Item Component [ۂͷ৘ใ]
41. import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({ selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } <div> <img src="{{track.artwork_url}}" class="artwork"/> <div class="content"> <h1 (click)="link()">{{track.title}}</h1> </div> </div> Component Template Item Component (Click Event)
42. import {Component, Input} from "angular2/core"; import {CORE_DIRECTIVES} from "angular2/common"; @Component({ selector: "track-component", templateUrl: “ ”, styleUrls: [“ ”], directives: [CORE_DIRECTIVES] }) export class TrackComponent{ @Input() track: any; link(){ window.open(this.track.permalink_url); } } .artwork{ hoge: 0; } .content{ foo: 0; } Component CSS Item Component CSSͷΧϓηϧԽ
43. Angular 2ͬͯͲ͏΍ͬͯ ษڧ͢Ε͹͍͍Μʁ
44. ։ൃ؀ڥ
45. or https://angular.io/resources/live- examples/quickstart/ts/plnkr.html Local Plunker Local؀ڥ੔͑Δͷ͸ গ͠໘౗ npm i anguar2ͯ͠Hello World! ͢Δͱ͜Ζ·Ͱ PlunkerͳΒ͙͢ʹ Angular 2͕ॻ͚ΔΑ
46. ษڧૉࡐ
47. Googleʹ਎Λ·͔ͤΔਓ • ެࣜϖʔδ • Ұ௨Γ͔ͬ͠ΓษڧͰ͖Δ • ެࣜνϡʔτϦΞϧ: Tour of Heroes https://angular.io/
48. ೔ຊޠͰͬ͟ͱษڧ͍ͨ͠ਓ • Angular 2 Advent Calendar 2015(Qiita) • ίΞͳهࣄ͔Βɺ؀ڥߏஙͱ͍ͬͨಋೖهࣄ΋ http://qiita.com/advent-calendar/2015/angular2
49. ࠷৽৘ใΛ௥͔͚͍ͬͨਓ • Github • Angular2 Info • ೔ຊޠ৘ใॆ࣮ • ւ֎ϒϩάߋ৽ͷ·ͱΊ https://github.com/angular/angular http://ng2-info.github.io/
50. தͷਓͷهࣄΛಡΈ͍ͨਓ • THOUGHTRAM • ઃܭʹؔΘΔ࿩͕Θ͔Γ΍͍͢ http://thoughtram.io/
51. ·ͱΊ • Angular 2ศརͩΑ • ࠓ͔Βษڧ͢ΔͳΒAngular JS ΑΓ Angular 2 • ษڧ͢Δʹ͸ެࣜνϡʔτϦΞϧ͕͓͢͢Ί • ௥͔͚ͬΔʹ͸Angular2 Info͕͓͢͢Ί • ng-kyoto meetup #4 དྷͯͶ