Upgrade to Pro — share decks privately, control downloads, hide ads and more …

初めてのAngular 2

Fe72a6744f7422c341d6301df629a36f?s=47 imashin
March 05, 2016

初めてのAngular 2

Frontend Conference 2016
5 Mar 2016

Fe72a6744f7422c341d6301df629a36f?s=128

imashin

March 05, 2016
Tweet

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