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