初めてのAngular 2

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 དྷͯͶ