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
280
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
12k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.1k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
8.7k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.4k
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
ゆるい個人開発のススメ
kuroppe1819
10
990
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
360
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
430
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
Ruby GitHub Packages
bkuhlmann
0
630
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Elm Form Validation
bkuhlmann
0
510
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Being A Developer After 40
akosma
57
580k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Agile that works and the tools we love
rasmusluckow
325
20k
Music & Morning Musume
bryan
41
5.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
A Tale of Four Properties
chriscoyier
151
22k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
We Have a Design System, Now What?
morganepeng
43
6.8k
Making Projects Easy
brettharned
108
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
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-*'& ׀耮ָ֮הֲ׀ְׂת׃