Frontend Conference 2016 5 Mar 2016
ॳΊͯͷAngular 2FRONTEND CONFERENCE 2016@shin_v1 #frontkansai 5 Mar 2016Slide URL: http://hogehoge
View Slide
@shin_v1Shinsuke IMAI- ژେֶେֶӃ म࢜̍- ’15 ະ౿ΫϦΤʔλ- ब׆த- ng-kyotoϝϯόʔAbout me
Today’s Mission
Angular 2͍͍Α
ࠓ͔Β͢Δ͜ͱ
৮ͬͯΈΔϋϯζΦϯ15:20- Augular2 + TypeScriptͰຊ֨ΞϓϦ։ൃAngular 2͍͍Α
MENU• Angular 2ͬͯͳΜͳΜʁ• Angular 2ͰΞϓϦ࡞ͬͯΔΑ• Angular 2Ͱͳʹ͕Ͱ͖ΔΜʁ• Angular 2ͬͯͲ͏ͬͯษڧ͢Ε͍͍Μʁ
Angular 2ͬͯͳΜͳΜʁ
FrameworkAngular 2 is also supportingIE9+ and Android 4.1+Server BrowserNative
Powered byMIT Licensehttps://angular.io/Angular 2 ެࣜαΠτ
Angular 2Λ࠾༻͢Δཧ༝- ߴػೳͷWebΞϓϦέʔγϣϯ
Angular 2Λ࠾༻͢Δཧ༝- ߴػೳͷWebΞϓϦέʔγϣϯ- ϑϩϯτͰνʔϜ։ൃ
Angular 2Λ࠾༻͢Δཧ༝- ߴػೳͷWebΞϓϦέʔγϣϯ- ϑϩϯτͰνʔϜ։ൃ- jQuery͚ͩͰ͖͍ͭ
Angular 2Λ࠾༻͢Δཧ༝- ߴػೳͷWebΞϓϦέʔγϣϯ- ϑϩϯτͰνʔϜ։ൃ- jQuery͚ͩͰ͖͍ͭ- ϑϨʔϜϫʔΫʹ͔ͬΓ͍ͨ
Angular 2Λ࠾༻͢Δཧ༝- ߴػೳͷWebΞϓϦέʔγϣϯ- ϑϩϯτͰνʔϜ։ൃ- jQuery͚ͩͰ͖͍ͭ- ϑϨʔϜϫʔΫʹ͔ͬΓ͍ͨ- ͜Ε֮͑͑͞Ε
Angular JS ͱ Angular 2 ͷൺֱ
Angular JS Angular 2JavaScript TypeScriptver. 1.x ver. 2.xOld NewFastSlowEasyDifficult
Angular JS Angular 22010- 2015-‘2015 ઃܭ͕ݹ͘ͳ͖ͬͯͨ ϞμϯͳઃܭChange Detection, Component …Dirty Check, Directive …
Angular JS Angular 2ver. 1.x ver. 2.x1.5.0 2.0 beta82.xҠߦ͍͢͠ػೳ Betaʹಥೖˠ҆ఆ
Angular JS Angular 2JavaScript TypeScriptver. 1.x ver. 2.xOld NewFastSlowEasyDifficultTypeScript
• JavaScriptͷεʔύʔηοτ• JavaScriptʹͳ͍ػೳ(੩తܕ͚ɺσίϨʔλʔͱ͔)• Microsoft͕։ൃ• Angular։ൃνʔϜͱTypeScript։ൃνʔϜ͕ྑ͠• Angular 2 ͷίʔυTypeScriptͰॻ͔Ε͍ͯΔTypeScript
TypeScriptclass 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;}());JavaScriptgreeter.ts greeter.jsTypeScriptίϯύΠϧTypeScriptͰॻ͍ͨίʔυΛJavaScriptίϯύΠϧTypeScript: http://www.typescriptlang.org/
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.tsgreeter.js$ tsc greeter.ts
https://github.com/angular/angular/issues/7088https://plnkr.co/edit/zpwiOiFsls3JgkuwtYmi?p=previewhttps://plnkr.co/edit/cjFGtnI704bjSg6F0DEM?p=previewIs Angular 2 faster ?Angular JS Angular 2
Angular JS Angular 2EasyDifficult៉ྷʹॻ͚Δver 1.x࣌ͷলཕ͕ͨ͘͞Μ৭ʑͳඳ͖ํେنʹͳΔͱେม େنʹ͑Δઃܭ
Angular 2ͰΞϓϦ࡞ͬͯΔΑ
PomotuneAngular 2 ͰΞϓϦΛ࡞͍ͬͯΔ
PomotunexPomodoro tech Music
Pomotuneʹ͋ͱ̍ϲ݄
Angular 2Ͱͳʹ͕Ͱ͖ΔΜ
ͨ͘͞ΜͷػೳAnimationngUpgradeDependancy InjectionRoutingTesting HTTPInputOutput Zone.jsRxjsFormsComponent…..i18n
ػೳΛҰͭAnimationngUpgradeDependancy InjectionRoutingTesting HTTPInputOutput Zone.jsRxjsFormsComponent…..i18n
ComponentPomotuneΛྫʹ
ComponentPomotuneΛྫʹNavbar ComponentPlaylistComponentTimerComponentSearch ComponentSearch items ComponentItem ComponentItem ComponentItem ComponentItem ComponentItem Component
Item Componenthttps://angular.io/docs/ts/latest/guide/architecture.html
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);}}{{track.title}}ComponentTemplateItem Component[ۂͷใ]
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);}}{{track.title}}ComponentTemplateItem Component(Click Event)
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;}ComponentCSSItem ComponentCSSͷΧϓηϧԽ
Angular 2ͬͯͲ͏ͬͯษڧ͢Ε͍͍Μʁ
։ൃڥ
orhttps://angular.io/resources/live-examples/quickstart/ts/plnkr.htmlLocal PlunkerLocalڥ͑Δͷগ͠໘npm i anguar2ͯ͠Hello World!͢Δͱ͜Ζ·ͰPlunkerͳΒ͙͢ʹAngular 2͕ॻ͚ΔΑ
ษڧૉࡐ
GoogleʹΛ·͔ͤΔਓ• ެࣜϖʔδ• Ұ௨Γ͔ͬ͠ΓษڧͰ͖Δ• ެࣜνϡʔτϦΞϧ: Tour of Heroeshttps://angular.io/
ຊޠͰͬ͟ͱษڧ͍ͨ͠ਓ• Angular 2 Advent Calendar 2015(Qiita)• ίΞͳهࣄ͔Βɺڥߏஙͱ͍ͬͨಋೖهࣄhttp://qiita.com/advent-calendar/2015/angular2
࠷৽ใΛ͔͚͍ͬͨਓ• Github• Angular2 Info• ຊޠใॆ࣮• ւ֎ϒϩάߋ৽ͷ·ͱΊhttps://github.com/angular/angular http://ng2-info.github.io/
தͷਓͷهࣄΛಡΈ͍ͨਓ• THOUGHTRAM• ઃܭʹؔΘΔ͕Θ͔Γ͍͢http://thoughtram.io/
·ͱΊ• Angular 2ศརͩΑ• ࠓ͔Βษڧ͢ΔͳΒAngular JS ΑΓ Angular 2• ษڧ͢ΔʹެࣜνϡʔτϦΞϧ͕͓͢͢Ί• ͔͚ͬΔʹAngular2 Info͕͓͢͢Ί• ng-kyoto meetup #4 དྷͯͶ
shinsuke_imai
goyoki
microcms
sinsoku
hiroshinakagawa
takahia1988
moritama1515
jfg956
.png){kind=avatar}
jisungbin
dzeyelid
tsutaj
kumamatsu
niryuu
aleyda
marcelosomers
addyosmani
trishagee
geoffreycrofte
ammeep
tanoku
dougneiner
chrislema
palkan
samanthasiow
3n