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

2018-07-31-angular-tips

Araya
July 31, 2018
110

 2018-07-31-angular-tips

合同会社ヘマタイトの社内LT会で話した、Angularでアプリケーションを開発するときに個人的に意識しているTipsです

Araya

July 31, 2018
Tweet

Transcript

  1. ϓϩδΣΫτͷ৽ن࡞੒ ng new [application-name] componentͳͲͷprefix͕σϑΥϧτͰ͸ app ͱͳΔ͕ɺ--prefix [prefix] ΦϓγϣϯͰมߋ͕ՄೳͳͷͰɺ৽ن࡞੒࣌ʹprefixΛࢦఆ͓ͯ͘͠ ͱ͋ͱͰݕࡧɾஔ׵͠ͳ͍͍ͯ͘ͷͰָ

    --style ΦϓγϣϯͰstylesheetͷϑΝΠϧܗࣜΛࢦఆͰ͖Δɻ
 e.g. ng new sample --style scss
 ͜Ε΋͋ͱͰมߋ͠ͳ͍͍ͯ͘ͷͰ࠷ॳʹࢦఆ͓ͯ͘͠ͱָ
  2. ng generate ΞϓϦέʔγϣϯ಺ʹDPNQPOFOU TFSWJDF QJQF EJSFDUJWFͳͲΛ࡞੒Ͱ ͖Δ e.g. ng generate

    component directory/component-name component΍serviceͳͲΛ࡞Δͱ͖͸جຊ͜ΕΛ࢖͏ WebStormͰ͸GUIͰݺͼग़͕͠Մೳ [demo]
  3. "OHVMBSϓϩδΣΫτͷCVJME ng buildͰϓϩδΣΫτΛCVJME͠ɺ੒Ռ෺ IUNM DTT KT BTTFUT ͸EJTU σΟϨΫτϦʹు͖ग़͞ΕΔ EFGBVMU

     ng build —prodͷΑ͏ʹΦϓγϣϯΛ͚ͭΔͱϏϧυ؀ڥΛ੾Γସ͑ΒΕ Δ Ϗϧυ؀ڥΛ੾Γସ͑Δͱimport * from ‘path/to/environment’Ͱ ࢀর͢ΔFOWJSPONFOUIPHFUTϑΝΠϧΛมߋͰ͖Δ npx ng build —prodͱ͔ຖ౓ଧͭͷ໘౗ͳͷͰɺOQNTDSJQUʹ͢Δͱศར