Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

kiharu sasaki

December 26, 2015
Tweet

More Decks by kiharu sasaki

Other Decks in Programming

Transcript

  1.         */%&9 ➙傈ֶ鑧ׅ׷ⰻ㺁

    䫇ִגֶֹ׋ְه؎ٝز 䨽䠬 "OHVMBS嚊銲 ⿫罋项俱
  2.   4QFFE 1FSGPSNBODF 4USVDUVSF 4VQQPSU -BOHVBHF $SPTT 1MBUGPSN Ⳣ椚鸞䏝ָ㣐䌴ח何㊣կ

    ؟٦غ٦؟؎سٖٝت ؚٔٝ׮〳腉ח ֿ׸תדך.78䙼䟝 ַ׵$PNQPOFOUT䭷ぢ ח •  5ZQF4DSJQU •  &4&4 •  %BSU •  8FC •  رأؙزحف،فٔ •  ٌغ؎ٕ،فٔ  'FBUVSFT 㛇劤涸ח"OVHMBSכծ"OVHMBS+4 禸 הכ ת׏׋ֻⴽ暟ה׃ג罋ִ׷ךָ姻鍑կ
  3.   4USVDUVSF DPOUSPMMFSװTDPQFכ䐖姺חז׶ծ .78ؿٖ٦يٙ٦ַؙ׵؝ٝه٦طٝز䭷ぢפկ  Application Component List Component

    Detail Component Other Component Detail Component Detail Component ؝ٝه٦طٝزהכ •  "QQMJDBUJPO׾䠐㄂ך֮׷磛䏝דⴓ ⶴ׃׋ػ٦خךאא •  ػ٦خך䮶׷莸ְ $POUSPMMFS װ ر٦ةծأة؎ٕ׾4IBEPX%0.ח ꟗׄ鴥׭׷ ؕفإٕ⻉ ˟ •  "QQMJDBUJPO׮׉׸荈魦ָزحفٖ كٕך㣐ֹזאך؝ٝه٦طٝز
  4.   4VQQPSU -BOHVBHF Ⱅ䒭דכ5ZQF4DSJQU׾䱿㤺  •  5ZQF4DSJQU  &4&4

    %BSU׮؟ه٦زׅ׷ָ "OHVMBSדכ5ZQF4DSJQUח״׷ ؝٦ر؍ؚٝ׾䱿㤺׃גְ׷׋׭ ➙䖓ך"OHVMBSדכ54ךⵃ欽ָ ⚺崧חז׏גְֻה䙼׻׸׷
  5.   $SPTT 1MBUGPSN 4&0㼎瘻ָ䗳銲הׁ׸׷ؐؑـ؟؎زדך ⵃ欽׮〳腉ח  •  رأؙزحفٌغ؎ٕ،فٔ "OESPJEJ04

     *POJD /BUJWF4DSJQUחג"OHVMBSפך 㼎䘔ָ鹌遤⚥ •  4&0㼎瘻ָ䗳銲ז؟؎ز ؟٦غ٦؟؎سٖٝتؚٔٝח״׶ 4&0㼎瘻ָ䗳銲ז؟؎زד׮㼪Ⰵ〳
  6. 8JUIPVU $PNQBUJCJMJUZ˘ 禸הך✼䳔䚍כ֮׶תׇ׿ ׋׌׃ծ幉㖈ׇׁ׷ֿהכ〳腉J  •  獳遤䩛갫 (PPHMF+BQBO%FWFMPQFST#MPH  չء٦يٖأז،حفؚٖ٦سך倯岀חאְגպ

    IUUQHPPHMFEFWKQCMPHTQPUKQBOHVMBSBOHVMBSIUNM •  OHGPSXBSE 傀㶷ך"OHVMBS،فٔ؛٦ءّٝחOHGPSXBSEה "OHVMBS׾JODMVEFׅ׷ֿהד穈さׇ〳腉חׅ׷ IUUQTHJUIVCDPNOH6QHSBEFSTOHGPSXBSE
  7.   5FNQMBUF 4ZOUBY !$PNQPOFOU !*OQVU !0VUQVU %FQFOEFODZ *OKFDUJPO 3PVUJOH

    /BWJHBUJPO ⿽倯ぢر٦ةغ؎ٝسכ ⨳㖈׌ָծ4ZOUBYָ䗍㦩 ח㢌刿חז׏גְ׷ OHBQQOHDPOUSPMMFS כ䐖姺կ$PNQPOFOU䭷 ぢדך鎸鶢׾然钠ׅ׷  *NQPSUBOU 1PJOUT 劤傈כֶ鑧׃תׇ׿N @@ N "OHVMBS׾㨣׭׷ח֮׋׏ג 剑ⴱח䫇ִגֶֻץֹه؎ٝز
  8.   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”>
  9.   5FNQMBUF 4ZOUBY &WFOUCJOEJOH   ؎كٝزغ؎ٝر؍ؚٝ <button ng-click=“onClick()”>

    <button ng-keyup=“onKeyUp()”> <button ng-keydown=“onKeyDown()”> <button (click)=“onClick()”> <button (keyup)=“onKeyUp()”> <button (keydown)=“onKeyDown()”>
  10.   !$PNQPOFOU *OQVU !0VUQVU ؝ٝه٦طٝز鋵㶨꟦ךծر٦ة؎كٝزך「ֽ 床׃׾遤ֲ؎ٝة٦ؿؑ؎أ㹀纏  Application  Component

    List  Component Detail  Component Detail  Component Detail  Component 親 子 鋵̔㶨ر٦ة床׃ !*OQVU 親 子 㶨̔鋵؎كٝز鸐濼 !0VUQVU
  11. 3FGFSFODF NBUFSJBMT 参考資料     0OFGSBNFXPSLˊ"OHVMBS Ⱅ䒭سًُؗٝز IUUQTBOHVMBSJP

    "OHVMBS"EWFOU$BMFOEBS IUUQRJJUBDPNBEWFOUDBMFOEBS BOHVMBS սĔٔٔ٦أ鎸䙀վⴓדⴓַ׷ "OHVMBSךأأً IUUQTIUNMFYQFSUTKQDBOJEPXFC չ"OHVMBS膷ד鋅׷"OHVMBSպ IUUQXXXTMJEFTIBSFOFUN@BSBLBXB BOHVMBSBOHVMBS " # $ %