ng-japan OnAir LT Session

Angular޷͖ͳWebΞϓϦέʔγϣϯΤϯδχΞͰ͢ ࣗࣾͰӡӦ͢ΔϏϡʔΞʔΞϓϦέʔγϣϯͷςοΫϦʔ υΛ୲౰͍ͯ͠·͢ɻ Senior Software Engineer yusuke-oba1 About Me େ৔༔հ 
 Yusuke OBA

4BGJFͬͯԿʁ

Ϋϥ΢υ࿥ըαʔϏε גࣜձࣾςΫϊɾγεςϜɾϦαʔνʮωοτϫʔΫΧϝϥͷΫϥ΢υ࿥ըαʔϏεࢢ৔ௐࠪʯ ωοτϫʔΫΧϝϥͷө૾ΛΫϥ΢υʹ อଘɻ ͍ͭͰ΋޷͖ͳ࣌ʹϥΠϒ΍࿥ըө૾Λ ݟΒΕ·͢ɻ ૑ۀ೥໨ɻ 
 ಉ༷ͷαʔϏεͱͯ͠͸ɺ 
 ࠃ಺γΣΞ/P✨

ng-mocksΛ׆༻ͨ͠Ϣχοτςετͷ͝঺հ

ͳͥςετΛॻ͘ͷ͔

ͳͥςετΛॻ͘ͷ͔ ɾσάϨΛ๷͙ ɾϩδοΫͷมߋɺϥΠϒϥϦͷมߋʹڧ͘ͳΔ ɾΑΓγϯϓϧͳ࣮૷ʹͳΔ

ςετͷ೰Έ

ςετͷ೰Έ ɾϞοΫΛ࡞੒͢Δͷ͕खؒ ɾ࣮૷͕มΘΔͱϞοΫΛվम͢Δඞཁ͕͋Δ

OHNPDLT.PDL1SPWJEFS IUUQTOHNPDLTTVEPFVBQJ.PDL1SPWJEFS ϞοΫΛಈతʹ࡞੒͢Δ

࣮૷ྫͷ͝঺հ

؆୯ͳαϯϓϧͰ͝঺հ ςΩετϘοΫε ߋ৽Ϙλϯ

ؔ࿈ਤ Component Component Store Service 6*Λఆٛ ঢ়ଶ؅ཧɾߋ৽ "1*αʔϏε

σΟϨΫτϦߏ੒ Service Component Store Component

αʔϏεͷ࣮૷

αʔϏεͷ࣮૷    "1*Ͱ஋Λߋ৽ ⁞ ⁞"1*Ͱ஋Λऔಘ

ComponentStoreͷ࣮૷ͱςετ

$PNQPOFOU4UPSFͷ࣮૷ ⁞ ⁞ঢ়ଶͱͯ͠WBMVFΛఆٛ    αʔϏε͔Β஋Λऔಘͯ͠WBMVFͷঢ়ଶΛॳظԽ ⁠ ⁠WBMVFͷঢ়ଶΛߋ৽ ⁡ ⁡αʔϏεͷVQEBUF7BMVFϝιουΛݺͼग़͢

$PNQPOFOU4UPSFͷςετ࣮૷ ⁞ ⁞OHNPDLTͷ.PDL1SPWJEFSͰαʔϏεΛϞοΫ    5FTU#FEJOKFDUͰϞοΫΠϯελϯε͕ฦΔ ⁠ ⁠TQZ0OͰϝιουͷॲཧΛ্ॻ͖ ⁡ ⁡ঢ়ଶ͕ظ଴஋ʹߋ৽͞Ε͍ͯΔ͔Λςετ ⁢ ⁢ετΞͷঢ়ଶΛߋ৽ ⁣ ⁣TQZ0OͰϝιουͷॲཧΛ্ॻ͖ ⁤ ⁤ظ଴͢ΔϝιουɾҾ਺͕ݺ͹Ε͍ͯΔ͔Λςετ

Componentͷ࣮૷ͱςετ

HTML Template Component $PNQPOFOUͷ࣮૷ ⁞ ⁞$PNQPOFOU4UPSFΛQSPWJEFSTʹ௥Ճ    $PNQPOFOU4UPSFΛ%*Ͱ஫ೖ ⁠ ⁠WBMVFม਺ʹετΞͷWBMVF஋Λ୅ೖ ˞QVTIQJQF͸BTZODQJQFͷΧελϚΠζ ⁡ ⁡ςΩετϘοΫεʹWBMVFΛόΠϯσΟϯά ˞TGUFYUCPY͸ಠࣗίϯτϩʔϧ ⁢ ⁢ϘλϯʹVQEBUFϝιουΛόΠϯσΟϯά ˞TGCVUUPO͸ಠࣗίϯτϩʔϧ

$PNQPOFOUͷςετ࣮૷ ⁞ ⁞.PDL1SPWJEFSͰ$PNQPOFOU4UPSFΛϞοΫ ɹWBMVFΛ#FIBWJPS4VCKFDUʹஔ͖׵͑    WBMVFͷ஋Λߋ৽ ˞.PDL4UPSF7BMVFʹ͍ͭͯ͸ޙड़ ⁠ ⁠ςΩετϘοΫεͷ஋Λςετ ˞GJOE&MFNFOUT#Z/BNFʹ͍ͭͯ͸ޙड़ ⁡ ⁡ίϯτϩʔϧͷϔϧύʔΛ࡞੒ ˞ಠࣗίϯτϩʔϧΛςετͰ੍ޚ͢ΔͨΊͷϔϧύʔΫϥε ⁢ ⁢6QEBUFϘλϯΛΫϦοΫͯ͠VQEBUFϝιου ͕ݺ͹Ε͍ͯΔ͔Λςετ

ศརؔ਺ͷ঺հ #FIBWJPS4VCKFDUͷ஋Λߋ৽͢Δ )5.-ཁૉͷOBNFଐੑ͔ΒλʔήοτͷཁૉΛ୳ࡧ͢Δ

·ͱΊ ɾϞοΫͷ࡞੒ίετΛ࡟ݮ͢Δ͚ͩͰ͍ͩͿָʹͳΔ 
 ɾཁૉ͸OBNFଐੑΛ෇༩࣮ͯ֬͠ʹऔΕΔΑ͏ʹ͢Δ 
 ɾϔϧύʔΫϥεͰίϯτϩʔϧΛૢ࡞Ͱ͖ΔΑ͏ʹ͢Δͱศར 
 ɾςετ͸ॻ͖ա͗ͳ͍

ө૾͔ΒະདྷΛͭ͘Δ