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

初めてのAngular 2

imashin
March 05, 2016

初めてのAngular 2

Frontend Conference 2016
5 Mar 2016

imashin

March 05, 2016
Tweet

More Decks by imashin

Other Decks in Technology

Transcript

  1. Angular JS Angular 2 ver. 1.x ver. 2.x 1.5.0 2.0

    beta8 2.x΁Ҡߦ͠΍͍͢ػೳ Betaʹಥೖˠ҆ఆ
  2. Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x

    Old New Fast Slow Easy Difficult TypeScript
  3. 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/
  4. 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
  5. Angular JS Angular 2 Easy Difficult ៉ྷʹॻ͚Δ ver 1.x࣌୅ͷ൓ল ஍ཕ͕ͨ͘͞Μ

    ৭ʑͳඳ͖ํ େن໛ʹͳΔͱେม େن໛ʹ΋଱͑Δઃܭ
  6. Component PomotuneΛྫʹ Navbar Component Playlist Component Timer Component Search Component

    Search items Component Item Component Item Component Item Component Item Component Item Component
  7. 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 [ۂͷ৘ใ]
  8. 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)
  9. 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ͷΧϓηϧԽ
  10. ·ͱΊ • Angular 2ศརͩΑ • ࠓ͔Βษڧ͢ΔͳΒAngular JS ΑΓ Angular 2

    • ษڧ͢Δʹ͸ެࣜνϡʔτϦΞϧ͕͓͢͢Ί • ௥͔͚ͬΔʹ͸Angular2 Info͕͓͢͢Ί • ng-kyoto meetup #4 དྷͯͶ