15分で分かったつもりになるAngular 2 概要/angular2

Angular 2 の特徴を美味しいところだけ凝縮してお届けします

Transcript

1. ⴓַ׏׋א׮׶חז׷
   "OHVMBS嚊銲
   ,JIBSV
   4BTBLJ
   %FD
   
   ⴓ ד
   
2. ⡟ղ加
   ֹכ׷
   ,JIBSV
   4BTBLJ
   フリーランスでシステム開発をしています
   +"846(千葉 コアメンバー
   普段は"OHVMBS+4や#BDLCPOF使い パダワン
   !CVNQ@PG@LJIBSV
   )"-
   
   ˘
   r˘ ԍ
   CVNQIBUFOBCMPHDPN
   'SFFMBODF
   GBDFCPPLDPN
   LJIBSVTBTBLJ
   
3. 
   
   
   1SFNJTF
   •  劤项俱כծ植儗挿ך剑倜غ٦آّٝ
   
   "OHVMBS
   ˊCFUB
   ׾ك٦أח
   ⡲䧭׃גְתׅ
   •  ➙䖓ךغ٦آّٝ،حفח⠵ְծ
   鎸鯹ⰻ㺁ה殯ז׷㜥さָ׀ְׂתׅկ
   ֮׵ַׄ׭׀✪䪫ֻ׌ְׁ
   ➙㔐ך项俱חֶֽ׷⵸䲿
   
   
   
4. 
   
   
   
   
   
   
   
       */%&9
   ➙傈ֶ鑧ׅ׷ⰻ㺁
   䫇ִגֶֹ׋ְه؎ٝز
   䨽䠬
   "OHVMBS
   
   嚊銲
   ⿫罋项俱
   
5. 
   
   
   0WFSWJFX "OHVMBS
   
   嚊銲
   
6. 
   
   
   
   
   
   4QFFE
   
   1FSGPSNBODF
   4USVDUVSF
   4VQQPSU
   -BOHVBHF
   $SPTT
   1MBUGPSN
   Ⳣ椚鸞䏝ָ㣐䌴ח何㊣կ ؟٦غ٦؟؎سٖٝت ؚٔٝ׮〳腉ח
   ֿ׸תדך.78䙼䟝 ַ׵$PNQPOFOUT䭷ぢ ח
   •  5ZQF4DSJQU
   •  &4&4
   •  %BSU
   •  8FC
   •  رأؙزحف،فٔ
   •  ٌغ؎ٕ،فٔ
   
   
   'FBUVSFT
   㛇劤涸ח"OVHMBS
   כծ"OVHMBS+4 禸
   הכ
   ת׏׋ֻⴽ暟ה׃ג罋ִ׷ךָ姻鍑կ
   
7. 
   
   
   
   
   4QFFE
   
   1FSGPSNBODF
   أؾ٦سכ
   WFSה嫰鯰׃ג։⦓חկ
   㢌刿嗚濼ח銲ׅ׷儗꟦׮"OHVMBSדכ孡חׅ ׷䗳銲ָזְٖكٕח何㊣կ
   
   
   41&&%
   㢌刿嗚濼
   ˟
   
   OHKBQBO
   ؕٝؿ؋ٖٝأ项俱״׶ խ出展： IUUQTIUNMFYQFSUTKQBMCBUSPTBSZ
8. 
   
   
   
   
   4USVDUVSF
   DPOUSPMMFS
   װ
   TDPQF
   כ䐖姺חז׶ծ
   .78ؿٖ٦يٙ٦ַؙ׵؝ٝه٦طٝز䭷ぢפկ
   
   
   Application Component List Component Detail Component Other Component Detail Component Detail Component ؝ٝه٦طٝزהכ
   •  "QQMJDBUJPO׾䠐㄂ך֮׷磛䏝דⴓ ⶴ׃׋ػ٦خךאא
   •  ػ٦خך䮶׷莸ְ $POUSPMMFS װ ر٦ةծأة؎ٕ׾4IBEPX
   %0.ח ꟗׄ鴥׭׷ ؕفإٕ⻉
   ˟
   •  "QQMJDBUJPO
   ׮׉׸荈魦ָزحفٖ كٕך㣐ֹזאך؝ٝه٦طٝز
   
9. 
   
   
   
   
   4VQQPSU
   -BOHVBHF
   Ⱅ䒭דכ5ZQF4DSJQU׾䱿㤺
   
   
   •  5ZQF4DSJQU
   
   
   &4&4
   %BSU
   ׮؟ه٦زׅ׷ָ "OHVMBSדכ
   5ZQF4DSJQUח״׷
   ؝٦ر؍ؚٝ׾䱿㤺׃גְ׷׋׭
   ➙䖓ך"OHVMBS
   
   דכ54ךⵃ欽ָ
   ⚺崧חז׏גְֻה䙼׻׸׷
   
10. 
    
    
    
    
    $SPTT
    1MBUGPSN
    4&0㼎瘻ָ䗳銲הׁ׸׷ؐؑـ؟؎زדך
    ⵃ欽׮〳腉ח
    
    
    •  رأؙزحفٌغ؎ٕ،فٔ "OESPJE
    
    J04
    *POJD
    /BUJWF4DSJQU
    חג"OHVMBSפך
    㼎䘔ָ鹌遤⚥
    •  4&0㼎瘻ָ䗳銲ז؟؎ز
    ؟٦غ٦؟؎سٖٝتؚٔٝח״׶
    4&0㼎瘻ָ䗳銲ז؟؎زד׮㼪Ⰵ〳
    
11. 8JUIPVU
    $PNQBUJCJMJUZ˘
    禸הך✼䳔䚍כ֮׶תׇ׿
    ׋׌׃ծ幉㖈ׇׁ׷ֿהכ〳腉
    J
    
    
    •  獳遤䩛갫
    (PPHMF
    +BQBO
    %FWFMPQFST
    #MPH
    չء٦يٖأז،حفؚٖ٦سך倯岀חאְגպ
    IUUQHPPHMFEFWKQCMPHTQPUKQBOHVMBSBOHVMBSIUNM
    •  OHGPSXBSE
    傀㶷ך"OHVMBS،فٔ؛٦ءّٝחOHGPSXBSEה "OHVMBS׾JODMVEFׅ׷ֿהד穈さׇ〳腉חׅ׷
    IUUQTHJUIVCDPNOH6QHSBEFSTOHGPSXBSE
    
12. 
    
    
    *NQPSUBOU
    QPJOUT 䫇ִגֶֹ׋ְه؎ٝز
    
13. 
    
    
    
    
    
    5FNQMBUF
    4ZOUBY
    !$PNQPOFOU
    !*OQVU
    !0VUQVU
    %FQFOEFODZ
    *OKFDUJPO
    3PVUJOH
    /BWJHBUJPO
    ⿽倯ぢر٦ةغ؎ٝسכ ⨳㖈׌ָծ4ZOUBYָ䗍㦩 ח㢌刿חז׏גְ׷
    OHBQQOHDPOUSPMMFS
    כ䐖姺կ$PNQPOFOU䭷 ぢדך鎸鶢׾然钠ׅ׷
    
    
    *NQPSUBOU
    1PJOUT
    劤傈כֶ鑧׃תׇ׿
    N @
    @ N
    "OHVMBS׾㨣׭׷ח֮׋׏ג
    剑ⴱח䫇ִגֶֻץֹه؎ٝز
    
14. 5FNQMBUF
    4ZOUBY
    
    
    
15. 
    
    
    
    
    5FNQMBUF
    4ZOUBY
    *OUFSQPMBUJPO
    ⟃⵸הず圫חؿ؍ٕة٦ָⵃ欽〳腉
    
    
    \\
    ^^
    ر٦ةغ؎ٝر؍ؚٝ
    
    
    <p>Hello {{user.name}}</p> <p>{{user.name | uppercase}}</p> <p>{{user.birthday | date:’YYYY/mm/dd’}}</p>
16. 
    
    
    
    
    5FNQMBUF
    4ZOUBY
    1SPQFSUZ
    "UUSJCVUF
    $MBTT4UZMF
    CJOEJOH
    
    
    <
    >
    فٗػذ؍غ؎ٝر؍ؚٝ
    
    
    <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”>
17. 
    
    
    
    
    5FNQMBUF
    4ZOUBY
    &WFOU
    CJOEJOH
    
    
    
    
    ؎كٝزغ؎ٝر؍ؚٝ
    
    
    <button ng-click=“onClick()”> <button ng-keyup=“onKeyUp()”> <button ng-keydown=“onKeyDown()”> <button (click)=“onClick()”> <button (keyup)=“onKeyUp()”> <button (keydown)=“onKeyDown()”>
18. 
    
    
    
    
    OH.PEFM
    EJSFDUJWF
    .PEFM
    ̔
    7JFX
    ♧倯ぢغ؎ٝر؍ؚٝ
    
    
    OH.PEFM
    <
    >
    
    .PEFM
    ̔
    7JFX
    
    
    5FNQMBUF
    4ZOUBY
    
19. 
    
    
    
    
    
    
    OH.PEFM
    <
    >
    
    .PEFM
    ̒
    ̔
    7JFX
    
    OH.PEFM
    EJSFDUJWF
    ⿽倯ぢغ؎ٝر؍ؚٝ
    5FNQMBUF
    4ZOUBY
    
20. 
    
    
    
    
    
    
    OH.PEFM
    <
    >
    
    
    .PEFM
    ̒
    ̔
    7JFX
    OH.PEFM
    EJSFDUJWF
    <
    >
    
    
    ד剅ֹ䳔ִ׋㜥さ
    5FNQMBUF
    4ZOUBY
    
21. !$PNQPOFOU
    
    
    
22. 
    
    
    
    
    
    
    ؝ٝه٦طٝزך㹀纏
    5ZQF4DSJQUדך鎸鶢⢽
    )5.-
    !$PNQPOFOU
    
23. 
    
    
    
    
    !$PNQPOFOU
    *OQVU
    !0VUQVU
    ؝ٝه٦طٝز鋵㶨꟦ךծر٦ة؎كٝزך「ֽ 床׃׾遤ֲ؎ٝة٦ؿؑ؎أ㹀纏
    
    
    Application  Component List  Component Detail  Component Detail  Component Detail  Component 親 子 鋵̔㶨
    ر٦ة床׃
    !*OQVU 親 子 㶨̔鋵
    ؎كٝز鸐濼
    !0VUQVU
24. 
    
    
    
    
    !$PNQPOFOU
    *OQVU
    ،ظذ٦ءّٝ
    鋵̔㶨
    פ「ֽ床ׅر٦ة׾㾩䚍ה׃ג鷄⸇ׅ׷
    
    
    親 子 親 子 CJOE5P$POUSPMMFS
    みたいなもの
25. 
    
    
    
    
    !$PNQPOFOU
    0VUQVU
    ،ظذ٦ءّٝ
    㶨̔鋵
    פ؎كٝز鸐濼׾涪欰ׇׁ׷
    
    
    親 子 親 &WFOU ⡲䧭
    子 POCSPBEDBTU
    みたいなもの
26. 
    
    
    *NQSFTTJPO 䨽䠬
    
27. •  㷕统؝أز넝׭
    •  禸ך项欵ָ崞ַׇזְ
    •  獳遤؝أز˘PS[
    #BE
    ؝ٝه٦طٝز䭷ぢכ➙䖓ך⚺崧ד֮׶ծ3FBDUKTה⚛ן
    չ+4ؿٖ٦يٙ٦ؙ㣐菓嵲儗➿պך崧׸׾㢌ִ׷〳腉䚍㣐
    *NQSFTTJPO
    •  禸דך铬겗ָⰋ꬗涸ח何㊣ ׁ׸ٌتٝח
    •  랲눤遭ָ幾׏ג湫䠬涸
    •  Ⱅ䒭%PDָ⯍㹋
    (PPE
    
28. 
    
    
    3FGFSFODF
    .BUFSJBMT ⿫罋项俱
    
29. 3FGFSFODF
    NBUFSJBMT
    参考資料
    
    
    
    
    
    
    
    
    0OF
    GSBNFXPSL
    ˊ
    "OHVMBS
    
    Ⱅ䒭سًُؗٝز
    IUUQTBOHVMBSJP
    "OHVMBS
    
    "EWFOU
    $BMFOEBS
    IUUQRJJUBDPNBEWFOUDBMFOEBS BOHVMBS
    սĔٔٔ٦أ鎸䙀վⴓדⴓַ׷ "OHVMBSךأأً
    IUUQTIUNMFYQFSUTKQDBOJEPXFC
    չ"OHVMBS膷ד鋅׷"OHVMBSպ
    IUUQXXXTMJEFTIBSFOFUN@BSBLBXB BOHVMBSBOHVMBS
    " # $ %
30. #F
    IBQQZ
    ZPVS
    +4
    -*'&
    
    ׀꫼耮֮׶ָהֲ׀ְׂת׃׋