AngularDart

Cddce6ee5ec153c8dade038f6f75ff04?s=47 yujikawa
January 23, 2019

 AngularDart

Cddce6ee5ec153c8dade038f6f75ff04?s=128

yujikawa

January 23, 2019
Tweet

Transcript

  1. "OHVMBS%BSUʹೖ໳ͯ͠Έͨ GVLVPLBEBSU Ώ͔͡Θ!ZVKJLBXB@MFF

  2. *O<>໊લ c઒্༞࢘ Ώ͔͡Θ  *O<>ॴଐ cΧϥϏφςΫϊϩδʔ *O<>৬छʢࣗশʣ cݟश͍άϩʔεϋοΧʔ *O<>ීஈͷ͓࢓ࣄ c8FCΞϓϦ։ൃ

    *O<>໨ඪ cάϩʔεϋοΧʔʹͳΓ͍ͨ ࣗݾ঺հ ZVKJLBXBMFF ZVKJLBXB@MFF
  3. "OHVMBS%BSU IUUQTXFCEFWEBSUMBOHPSHBOHVMBS "OHVMBSͷ%BSUόʔδϣϯɺຊՈ"OHVMBSͱ͸ϓϩδΣΫτ͕ผΒ͍͠ ݱࡏͷW̑ʢ෇ʣ

  4. Πϯετʔϧ dCSFXUBQEBSUMBOHEBSU dCSFXJOTUBMMEBSU dQVCHMPCBMBDUJWBUFBOHVMBS@DMJ dQVCHMPCBMBDUJWBUFXFCEFW ˞.BDͰͷ։ൃखॱΛॻ͍ͯ·͢

  5. ϓϩδΣΫτ࡞੒ OHEBSUOFXRVJDLTUBSU ʲ࣮ߦ݁Ռʳ dOHEBSUOFXRVJDLTUBSU */'04BWJOHRVJDLTUBSUXFCJOEFYIUNM */'04BWJOHRVJDLTUBSUXFCNBJOEBSU */'04BWJOHRVJDLTUBSUXFCTUZMFTDTT */'04BWJOHRVJDLTUBSUBOBMZTJT@PQUJPOTZBNM */'04BWJOHRVJDLTUBSUHJUJHOPSF */'04BWJOHRVJDLTUBSUQVCTQFDZBNM

    */'04BWJOHRVJDLTUBSUMJCBQQ@DPNQPOFOUEBSU */'04BWJOHRVJDLTUBSUMJCBQQ@DPNQPOFOUIUNM ࢥͬͨҎ্ʹग़ྗ͞ΕΔ΋ͷ͕গͳ͍
  6. ϑΥϧμߏ੒ RVJDLTUBSU ᵓᴷᴷBOBMZTJT@PQUJPOTZBNM ᵓᴷᴷMJC ᴹᵓᴷᴷBQQ@DPNQPOFOUEBSU ᴹᵋᴷᴷBQQ@DPNQPOFOUIUNM ᵓᴷᴷQVCTQFDMPDL ᵓᴷᴷQVCTQFDZBNM ᵋᴷᴷXFC ᵓᴷᴷJOEFYIUNM

    ᵓᴷᴷNBJOEBSU ᵋᴷᴷTUZMFTDTT
  7. OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUI /HEBSUJTBDPNNBOEMJOFJOUFSGBDFGPS"OHVMBS%BSU 6TBHFOHEBSUDPNNBOE<BSHVNFOUT> (MPCBMPQUJPOT I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO W <OP>WFSCPTF0VUQVUFYUSBMPHHJOHJOGPSNBUJPO "WBJMBCMFDPNNBOET

    HFOFSBUF(FOFSBUFDPNQPOFOUPSUFTU IFMQ%JTQMBZIFMQJOGPSNBUJPOGPSOHEBSU OFX$SFBUFBO"OHVMBS%BSUQSPKFDU 3VOOHEBSUIFMQDPNNBOEGPSNPSFJOGPSNBUJPOBCPVUBDPNNBOE
  8. OHEBSUίϚϯυΛݟͯΈΔ dOHEBSUHFOFSBUFI (FOFSBUFDPNQPOFOUPSUFTU 6TBHFOHEBSUHFOFSBUFTVCDPNNBOE I IFMQ1SJOUUIJTVTBHFJOGPSNBUJPO "WBJMBCMFTVCDPNNBOET DPNQPOFOU(FOFSBUF"OHVMBS%BSUDPNQPOFOU EJSFDUJWF(FOFSBUF"OHVMBS%BSUEJSFDUJWF QJQF(FOFSBUF"OHVMBS%BSUQJQF

    UFTU(FOFSBUF"OHVMBS%BSUDPNQPOFOUUFTU UIJTDPNNBOE TIPVMECFSVOVOEFSSPPUEJSFDUPSZPGUIFQSPKFDU 3VOOHEBSUIFMQUPTFFHMPCBMPQUJPOT
  9. ࣮ࡍʹ্ཱͪ͛ͯΈΔ ϓϩδΣΫτ࡞੒ dDERVJDLTUBSU dQVCHFU dXFCEFWTFSWF ฤूͨ͠ΒͪΌΜͱϗοτϦϩʔυͯ͘͠Ε·͢

  10. None
  11. 7FSZTJNQMF

  12. OH.PEFMΛ࢖͏ "OHVMBSͷόΠϯσΟϯάʹ࢖͏OH.PEFMΛ࢖͏ͨΊʹ BOHVMBS@GPSNTͱ͍͏ϥΠϒϥϦʔΛ௥Ճ͢Δඞཁ͕͋Δ dependencies: angular: ^5.0.0-beta+2 angular_forms: ^2.0.0 QVCTQFDZNM

  13. OH.PEFMΛ࢖͏ EJSFDUJWFTϓϩύςΟʹGPSN%JSFWUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

    selector: 'app-component', templateUrl: 'app_component.html', directives: [formDirectives] ) class AppComponent { final String title = 'Tour of Hero'; Hero hero = Hero(1, 'Windstorm'); } BQQ@DPNQPOFOUEBSU IUUQTXFCEFWEBSUMBOHPSHBQJBOHVMBS@GPSNTBOHVMBS@GPSNTGPSN%JSFDUJWFTDPOTUBOU
  14. OH.PEFMΛ࢖͏ IUNMʹόΠϯσΟϯά͍ͨ͠ม਺Λબ୒͢Δ <h1>{{title}}</h1> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> <div> <label>name:

    </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> BQQ@DPNQPOFOUIUNM
  15. ݁Ռ

  16. OH*G΍OH'PSΛ࢖͏ EJSFDUJWFTϓϩύςΟʹDPSF%JSFDUJWFTΛ௥Ճ͢Δɺ͜ΕͰ ࢖͑ΔΑ͏ʹͳΔɻ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

    selector: 'app-component', templateUrl: 'app_component.html', directives: [coreDirectives, formDirectives] ) class AppComponent { final String title = 'Tour of Hero'; Hero hero = Hero(1, 'Windstorm'); } BQQ@DPNQPOFOUEBSU IUUQTXFCEFWEBSUMBOHPSHBQJBOHVMBSBOHVMBSDPSF%JSFDUJWFTDPOTUBOU
  17. OH*G΍OH'PSΛ࢖͏ OH'PS΍OH*GΛςϯϓϨʔτʹ௥Ճ͠·͢ɻ͜ͷลͷॻ͖ํ ͸ຊՈ"OHVMBSͱಉͩͬͨ͡ <h1>{{title}}</h1> <h2>Heroes</h2> <ul class="heroes"> <li *ngFor="let hero

    of heroes" (click)="onSelect(hero)" [class.selected] = "hero === selected"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selected != null"> <h2>{{selected.name}}</h2> <div><label>id: </label>{{selected.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selected.name" placeholder="name"> </div> </div> BQQ@DPNQPOFOUIUNM
  18. ৽͍͠ίϯϙʔωϯτΛ࡞੒ OHEBSUHFOFSBUFDPNQPOFOUQ\1BUI^\/BNF^ dOHEBSUHFOFSBUFDPNQPOFOUQMJCTSDIFSP@DPNQPOFOU */'04BWJOHMJCTSDIFSP@DPNQPOFOUEBSU */'04BWJOHMJCTSDIFSP@DPNQPOFOUIUNM

  19. !*OQVUΛ࢖͏ ֎͔Β஋Λड͚ΔͨΊʹ!*OQVUΛ࢖͏ɻ͜ΕʹΑΓηϨΫ τ͞ΕͨIFSPΛऔಘ import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import './hero.dart'; @Component(

    selector: 'hero-component', templateUrl: 'hero_component.html', directives: [coreDirectives, formDirectives], ) class HeroComponent { @Input() Hero hero; } MJCTSDIFSP@DPNQPOFOUEBSU
  20. ςϯϓϨʔτͷҰ෦ΛҠಈ IFSPͷৄࡉΛදࣔ͢ΔϩδοΫΛBQQ@DPNQPOFOUIUNM͔ ΒIFSP@DPNQPOFOUIUNM΁Ҡಈͤ͞Δ <div *ngIf="hero != null"> <h2>{{hero.name}}</h2> <div><label>id: </label>{{hero.id}}</div>

    <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> </div> MJCTSDIFSP@DPNQPOFOUIUNM
  21. ֎ग़͠ςϯϓϨʔτΛ࢖͏ ઌ΄Ͳ֎ʹग़ͨ͠IFSP@DPNQPOFOUIUNMΛBQQ@DPNQPOFOUIUNMͰ ࢖͏ɻBQQ@DPNQPOFOUEBSUͷEJSFDUJWFTʹ௥Ճ͢Δ͜ͱΛ๨Εͣʹ // লུ <hero-component [hero]="selected"></hero- component> BQQ@DPNQPOFOUIUNM import

    './src/hero_component.dart'; @Component( selector: 'app-component', templateUrl: 'app_component.html', directives: [coreDirectives, HeroComponent], styleUrls: ['app_component.css'], ) // লུ BQQ@DPNQPOFOUEBSU
  22. ·ͱΊ "OHVMBSΛීஈ͔Βॻ͍͍ͯͨ਎ͱͯ͠͸؆୯ʹೃછΊͨؾ ͕͢Δ͕ɺϧʔςΟϯά΍Ψʔυͱ͍ͬͨ෦෼ΛͲ͏࣮૷͢ Δͷ͔ؾʹͳΔͱ͜Ζɻ·ͨຊ൪ϓϩμΫτʹ͚ͭΔ͔Ͳ͏ ͔ͳͲΛݟۃΊΔͨΊʹ΋ͬͱॻ͍ͯΈΑ͏ͱࢥ͏ɻ IUUQTXFCEFWEBSUMBOHPSHBOHVMBSUVUPSJBM

  23. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠