Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初めてのAngular 2
Search
imashin
March 05, 2016
Technology
6
6.3k
初めてのAngular 2
Frontend Conference 2016
5 Mar 2016
imashin
March 05, 2016
Tweet
Share
More Decks by imashin
See All by imashin
スマートホームのこれから - NOT A HOTEL TECH TALK 2024/04/09
shinsuke_imai
1
220
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
69k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.5k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
570
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.2k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
730
クックパッド流食品流通の作り方
shinsuke_imai
0
280
Reliable label printer system
shinsuke_imai
0
230
Data analysis of cookpad storeTV
shinsuke_imai
1
5.7k
Other Decks in Technology
See All in Technology
TROCCO今昔
gtnao
0
210
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
380
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
170
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
320
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
210
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
140
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
Building GoReleaser - from shell script to paid product
caarlos0
0
260
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Embracing the Ebb and Flow
colly
86
4.8k
Side Projects
sachag
455
43k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Automating Front-end Workflow
addyosmani
1370
200k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Code Review Best Practice
trishagee
69
19k
It's Worth the Effort
3n
185
28k
BBQ
matthewcrist
89
9.7k
Transcript
ॳΊͯͷAngular 2 FRONTEND CONFERENCE 2016 @shin_v1 #frontkansai 5 Mar 2016
Slide URL: http://hogehoge
@shin_v1 Shinsuke 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ͬͯͳΜͳΜʁ
Framework Angular 2 is also supporting IE9+ and Android 4.1+
Server Browser Native
Powered by MIT License https://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 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 2010- 2015- ‘2015 ઃܭ͕ݹ͘ͳ͖ͬͯͨ Ϟμϯͳઃܭ Change
Detection, Component … Dirty Check, Directive …
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 ver. 1.x ver. 2.x 1.5.0 2.0
beta8 2.xҠߦ͍͢͠ػೳ Betaʹಥೖˠ҆ఆ
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult TypeScript
• JavaScriptͷεʔύʔηοτ • JavaScriptʹͳ͍ػೳ(੩తܕ͚ɺσίϨʔλʔͱ͔) • Microsoft͕։ൃ • Angular։ൃνʔϜͱTypeScript։ൃνʔϜ͕ྑ͠ • Angular
2 ͷίʔυTypeScriptͰॻ͔Ε͍ͯΔ TypeScript
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/
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
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
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
Angular JS Angular 2 JavaScript TypeScript ver. 1.x ver. 2.x
Old New Fast Slow Easy Difficult
Angular JS Angular 2 Easy Difficult ៉ྷʹॻ͚Δ ver 1.x࣌ͷল ཕ͕ͨ͘͞Μ
৭ʑͳඳ͖ํ େنʹͳΔͱେม େنʹ͑Δઃܭ
Angular 2ͰΞϓϦ࡞ͬͯΔΑ
Pomotune Angular 2 ͰΞϓϦΛ࡞͍ͬͯΔ
Pomotune x Pomodoro tech Music
Pomotune ʹ͋ͱ̍ϲ݄
Angular 2Ͱͳʹ͕Ͱ͖ΔΜ
ͨ͘͞Μͷػೳ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output
Zone.js Rxjs Forms Component ….. i18n
ػೳΛҰͭ Animation ngUpgrade Dependancy Injection Routing Testing HTTP Input Output
Zone.js Rxjs Forms Component ….. i18n
Component PomotuneΛྫʹ
Component PomotuneΛྫʹ
Component PomotuneΛྫʹ Navbar Component Playlist Component Timer Component Search Component
Search items Component Item Component Item Component Item Component Item Component Item Component
Item Component https://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); } } <div> <img src="{{track.artwork_url}}" class="artwork"/> <div class="content"> <h1 (click)="link()">{{track.title}}</h1> </div> </div> Component Template Item 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); } } <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)
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ͷΧϓηϧԽ
Angular 2ͬͯͲ͏ͬͯ ษڧ͢Ε͍͍Μʁ
։ൃڥ
or https://angular.io/resources/live- examples/quickstart/ts/plnkr.html Local Plunker Localڥ͑Δͷ গ͠໘ npm i anguar2ͯ͠Hello
World! ͢Δͱ͜Ζ·Ͱ PlunkerͳΒ͙͢ʹ Angular 2͕ॻ͚ΔΑ
ษڧૉࡐ
GoogleʹΛ·͔ͤΔਓ • ެࣜϖʔδ • Ұ௨Γ͔ͬ͠ΓษڧͰ͖Δ • ެࣜνϡʔτϦΞϧ: Tour of Heroes
https://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 དྷͯͶ