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
15分で分かったつもりになるAngular 2 概要/angular2
Search
kiharu sasaki
December 26, 2015
Programming
23
20k
15分で分かったつもりになるAngular 2 概要/angular2
Angular 2 の特徴を美味しいところだけ凝縮してお届けします
kiharu sasaki
December 26, 2015
Tweet
Share
More Decks by kiharu sasaki
See All by kiharu sasaki
マルチクラウドナイト/multicloud-night-panel-discussion
kiharu
1
300
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
12k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.2k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
8.9k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.5k
Other Decks in Programming
See All in Programming
CSC509 Lecture 09
javiergs
PRO
0
140
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Jakarta EE meets AI
ivargrimstad
0
200
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Jakarta EE meets AI
ivargrimstad
0
580
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Why Our Code Smells
bkeepers
PRO
334
57k
Done Done
chrislema
181
16k
RailsConf 2023
tenderlove
29
900
Typedesign – Prime Four
hannesfritz
40
2.4k
BBQ
matthewcrist
85
9.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A designer walks into a library…
pauljervisheath
204
24k
Transcript
ⴓַאחז "OHVMBS嚊銲 ,JIBSV4BTBLJ %FD ⴓ ד
⡟ղ加ֹכ ,JIBSV4BTBLJ フリーランスでシステム開発をしています +"846(千葉 コアメンバー 普段は"OHVMBS+4や#BDLCPOF使い パダワン !CVNQ@PG@LJIBSV )"-
˘r˘ ԍ CVNQIBUFOBCMPHDPN 'SFFMBODF GBDFCPPLDPN LJIBSVTBTBLJ
1SFNJTF • 劤项俱כծ植儗挿ך剑倜غ٦آّٝ "OHVMBSˊCFUB ك٦أח ⡲䧭׃גְתׅ • ➙䖓ךغ٦آّٝ،حفח⠵ְծ 鎸鯹ⰻ㺁ה殯ז㜥さָ׀ְׂתׅկ
ַ֮ׄ׀✪䪫ְֻׁ ➙㔐ך项俱חֶֽ䲿
*/%&9 ➙傈ֶ鑧ׅⰻ㺁
䫇ִגְֶֹه؎ٝز 䨽䠬 "OHVMBS嚊銲 罋项俱
0WFSWJFX "OHVMBS嚊銲
4QFFE 1FSGPSNBODF 4USVDUVSF 4VQQPSU -BOHVBHF $SPTT 1MBUGPSN Ⳣ椚鸞䏝ָ㣐䌴ח何㊣կ
؟٦غ٦؟؎سٖٝت ؚٔٝ〳腉ח ֿתדך.78䙼䟝 ַ$PNQPOFOUT䭷ぢ ח • 5ZQF4DSJQU • &4&4 • %BSU • 8FC • رأؙزحف،فٔ • ٌغ؎ٕ،فٔ 'FBUVSFT 㛇劤涸ח"OVHMBSכծ"OVHMBS+4 禸 הכ תֻⴽ暟ה׃ג罋ִךָ姻鍑կ
4QFFE 1FSGPSNBODF أؾ٦سכWFSה嫰鯰׃ג։⦓חկ 㢌刿嗚濼ח銲ׅ儗"OHVMBSדכ孡חׅ 䗳銲ָזְٖكٕח何㊣կ 41&&% 㢌刿嗚濼
˟OHKBQBOؕٝؿ؋ٖٝأ项俱״ խ出展: IUUQTIUNMFYQFSUTKQBMCBUSPTBSZ
4USVDUVSF DPOUSPMMFSװTDPQFכ䐖姺חזծ .78ؿٖ٦يٙ٦ַؙ؝ٝه٦طٝز䭷ぢפկ Application Component List Component
Detail Component Other Component Detail Component Detail Component ؝ٝه٦طٝزהכ • "QQMJDBUJPO䠐ך֮磛䏝דⴓ ⶴ׃ػ٦خךאא • ػ٦خך䮶莸ְ $POUSPMMFS װ ر٦ةծأة؎ٕ4IBEPX%0.ח ꟗׄ鴥 ؕفإٕ⻉ ˟ • "QQMJDBUJPO荈魦ָزحفٖ كٕך㣐ֹזאך؝ٝه٦طٝز
4VQQPSU -BOHVBHF Ⱅ䒭דכ5ZQF4DSJQU䱿㤺 • 5ZQF4DSJQU &4&4
%BSU؟ه٦زָׅ "OHVMBSדכ5ZQF4DSJQUח״ ؝٦ر؍ؚٝ䱿㤺׃גְ ➙䖓ך"OHVMBSדכ54ךⵃ欽ָ ⚺崧חזגְֻה䙼
$SPTT 1MBUGPSN 4&0㼎瘻ָ䗳銲הׁؐؑـ؟؎زדך ⵃ欽〳腉ח • رأؙزحفٌغ؎ٕ،فٔ "OESPJEJ04
*POJD /BUJWF4DSJQUחג"OHVMBSפך 㼎䘔ָ鹌遤⚥ • 4&0㼎瘻ָ䗳銲ז؟؎ز ؟٦غ٦؟؎سٖٝتؚٔٝח״ 4&0㼎瘻ָ䗳銲ז؟؎زד㼪Ⰵ〳
8JUIPVU $PNQBUJCJMJUZ˘ 禸הך✼䳔䚍כ֮תׇ ׃ծ幉㖈ׇֿׁהכ〳腉J • 獳遤䩛갫 (PPHMF+BQBO%FWFMPQFST#MPH չء٦يٖأז،حفؚٖ٦سך倯岀חאְגպ
IUUQHPPHMFEFWKQCMPHTQPUKQBOHVMBSBOHVMBSIUNM • OHGPSXBSE 傀㶷ך"OHVMBS،فٔ؛٦ءّٝחOHGPSXBSEה "OHVMBSJODMVEFֿׅהד穈さׇ〳腉חׅ IUUQTHJUIVCDPNOH6QHSBEFSTOHGPSXBSE
*NQPSUBOUQPJOUT 䫇ִגְֶֹه؎ٝز
5FNQMBUF 4ZOUBY !$PNQPOFOU !*OQVU !0VUQVU %FQFOEFODZ *OKFDUJPO 3PVUJOH
/BWJHBUJPO 倯ぢر٦ةغ؎ٝسכ ⨳㖈ָծ4ZOUBYָ䗍㦩 ח㢌刿חזגְ OHBQQOHDPOUSPMMFS כ䐖姺կ$PNQPOFOU䭷 ぢדך鎸鶢然钠ׅ *NQPSUBOU 1PJOUT 劤傈כֶ鑧׃תׇN @@ N "OHVMBS㨣ח֮ג 剑ⴱח䫇ִגֶֻץֹه؎ٝز
5FNQMBUF4ZOUBY
5FNQMBUF 4ZOUBY *OUFSQPMBUJPO ⟃הず圫חؿ؍ٕة٦ָⵃ欽〳腉 \\^^ر٦ةغ؎ٝر؍ؚٝ <p>Hello {{user.name}}</p>
<p>{{user.name | uppercase}}</p> <p>{{user.birthday | date:’YYYY/mm/dd’}}</p>
5FNQMBUF 4ZOUBY 1SPQFSUZ "UUSJCVUF $MBTT4UZMFCJOEJOH <>فٗػذ؍غ؎ٝر؍ؚٝ <img
ng-src=“images_url”> <img ng-show=“images_url”> <img ng-style=“color:blue”> <img [src]=“images_url”> <img [visible]=“true”> <img [style.color]=“blue”>
5FNQMBUF 4ZOUBY &WFOUCJOEJOH ؎كٝزغ؎ٝر؍ؚٝ <button ng-click=“onClick()”>
<button ng-keyup=“onKeyUp()”> <button ng-keydown=“onKeyDown()”> <button (click)=“onClick()”> <button (keyup)=“onKeyUp()”> <button (keydown)=“onKeyDown()”>
OH.PEFMEJSFDUJWF .PEFM̔7JFX♧倯ぢغ؎ٝر؍ؚٝ OH.PEFM<>.PEFM̔7JFX 5FNQMBUF 4ZOUBY
OH.PEFM< >.PEFM̒̔7JFX OH.PEFMEJSFDUJWF 倯ぢغ؎ٝر؍ؚٝ 5FNQMBUF 4ZOUBY
OH.PEFM<> .PEFM̒̔7JFX OH.PEFMEJSFDUJWF <> ד剅ֹ䳔ִ㜥さ
5FNQMBUF 4ZOUBY
!$PNQPOFOU
؝ٝه٦طٝزך㹀纏 5ZQF4DSJQUדך鎸鶢⢽ )5.- !$PNQPOFOU
!$PNQPOFOU *OQVU !0VUQVU ؝ٝه٦طٝز鋵㶨ךծر٦ة؎كٝزך「ֽ 床׃遤ֲ؎ٝة٦ؿؑ؎أ㹀纏 Application Component
List Component Detail Component Detail Component Detail Component 親 子 鋵̔㶨ر٦ة床׃ !*OQVU 親 子 㶨̔鋵؎كٝز鸐濼 !0VUQVU
!$PNQPOFOU *OQVU،ظذ٦ءّٝ 鋵̔㶨פ「ֽ床ׅر٦ة㾩䚍ה׃ג鷄⸇ׅ 親 子 親 子
CJOE5P$POUSPMMFS みたいなもの
!$PNQPOFOU 0VUQVU،ظذ٦ءّٝ 㶨̔鋵פ؎كٝز鸐濼涪欰ׇׁ 親 子 親 &WFOU
⡲䧭 子 POCSPBEDBTU みたいなもの
*NQSFTTJPO 䨽䠬
• 㷕统؝أز넝 • 禸ך项欵ָ崞ַׇזְ • 獳遤؝أز˘PS[ #BE ؝ٝه٦طٝز䭷ぢכ➙䖓ך⚺崧ד֮ծ3FBDUKTה⚛ן չ+4ؿٖ٦يٙ٦ؙ㣐菓嵲儗➿պך崧㢌ִ〳腉䚍㣐 *NQSFTTJPO
• 禸דך铬겗ָⰋ涸ח何㊣ ׁٌتٝח • 랲눤遭ָ幾ג湫䠬涸 • Ⱅ䒭%PDָ⯍㹋 (PPE
3FGFSFODF.BUFSJBMT 罋项俱
3FGFSFODF NBUFSJBMT 参考資料 0OFGSBNFXPSLˊ"OHVMBS Ⱅ䒭سًُؗٝز IUUQTBOHVMBSJP
"OHVMBS"EWFOU$BMFOEBS IUUQRJJUBDPNBEWFOUDBMFOEBS BOHVMBS սĔٔٔ٦أ鎸䙀վⴓדⴓַ "OHVMBSךأأً IUUQTIUNMFYQFSUTKQDBOJEPXFC չ"OHVMBS膷ד鋅"OHVMBSպ IUUQXXXTMJEFTIBSFOFUN@BSBLBXB BOHVMBSBOHVMBS " # $ %
#FIBQQZZPVS +4-*'& ׀耮ָ֮הֲ׀ְׂת׃