ແນະ ນຳ Angular CLI

ໃນຂໍ້ຄວາມນີ້, ພວກເຮົາຈະຮຽນຮູ້ກ່ຽວກັບ Angular CLI ແລະພວກເຮົາຈະເຫັນວິທີໃຊ້ມັນເພື່ອເລີ່ມຕົ້ນໂຄງການ Angular ໃໝ່.

Angular CLI ແມ່ນຫຍັງ?

Angular CLI ແມ່ນເຄື່ອງມືທາງການ ສຳ ລັບການເລີ່ມຕົ້ນແລະເຮັດວຽກກັບໂຄງການ Angular. ມັນຊ່ວຍປະຢັດທ່ານຈາກຄວາມຫຍຸ້ງຍາກໃນການຕັ້ງຄ່າທີ່ສັບສົນແລະສ້າງເຄື່ອງມືຕ່າງໆເຊັ່ນ TypeScript, Webpack, ແລະອື່ນໆ.

ຫຼັງຈາກຕິດຕັ້ງ Angular CLI, ທ່ານ ຈຳ ເປັນຕ້ອງ ດຳ ເນີນການ ຄຳ ສັ່ງ ໜຶ່ງ ຄຳ ເພື່ອສ້າງໂຄງການແລະອີກ ຄຳ ສັ່ງ ໜຶ່ງ ເພື່ອຮັບໃຊ້ມັນໂດຍໃຊ້ server ພັດທະນາທ້ອງຖິ່ນເພື່ອຫຼີ້ນກັບໂປແກຼມຂອງທ່ານ.

ເຊັ່ນດຽວກັບເຄື່ອງມືເຮັດ ໜ້າ ດ້ານ frontend ທີ່ທັນສະ ໄໝ ທີ່ສຸດ, Angular CLI ຖືກສ້າງຂຶ້ນເທິງ Node.js.

Node.js ແມ່ນເທັກໂນໂລຍີເຊີເວີ້ທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດເອີ້ນໃຊ້ JavaScript ໃນ server ແລະສ້າງໂປແກຼມ web-side web server. ເຖິງຢ່າງໃດກໍ່ຕາມ, Angular ແມ່ນເຕັກໂນໂລຢີດ້ານ ໜ້າ ດ້ານ ໜ້າ, ສະນັ້ນເຖິງແມ່ນວ່າທ່ານ ຈຳ ເປັນຕ້ອງຕິດຕັ້ງ Node.js ຢູ່ໃນເຄື່ອງພັດທະນາຂອງທ່ານ, ມັນແມ່ນ ສຳ ລັບການເຮັດວຽກຂອງ CLI ເທົ່ານັ້ນ.

ເມື່ອທ່ານສ້າງແອັບ your ຂອງທ່ານ ສຳ ລັບການຜະລິດ, ທ່ານຈະບໍ່ຕ້ອງການ Node.js ເພາະວ່າຊຸດສຸດທ້າຍແມ່ນພຽງແຕ່ HTML, CSS, ແລະ JavaScript ທີ່ສາມາດໃຊ້ໄດ້ໂດຍເຄື່ອງແມ່ຂ່າຍຫຼື CDN.

ທີ່ຖືກເວົ້າວ່າ, ຖ້າທ່ານ ກຳ ລັງສ້າງໂປແກຼມໃຊ້ອິນເຕີເນັດເຕັມຮູບແບບກັບ Angular, ທ່ານອາດຈະຕ້ອງການ Node.js ສຳ ລັບການສ້າງສ່ວນ back end ຖ້າທ່ານຕ້ອງການໃຊ້ JavaScript ສຳ ລັບທາງ ໜ້າ ແລະທາງຫລັງ.

ກວດເບິ່ງ MEAN stack - ມັນແມ່ນສະຖາປັດຕະຍະ ກຳ ທີ່ປະກອບມີ MongoDB, Express (ເຄື່ອງແມ່ຂ່າຍເວັບແລະກອບ REST API ທີ່ສ້າງຢູ່ເທິງ Node.js) ແລະ Angular. ທ່ານສາມາດອ່ານບົດຄວາມນີ້ໄດ້ຖ້າທ່ານຕ້ອງການແນະ ນຳ ຂັ້ນຕອນໂດຍຂັ້ນຕອນເພື່ອເລີ່ມຕົ້ນ.

ໃນກໍລະນີນີ້, Node.js ຖືກໃຊ້ເພື່ອສ້າງສ່ວນ back end ຂອງແອັບ your ຂອງທ່ານແລະສາມາດຖືກທົດແທນດ້ວຍເທັກໂນໂລຢີດ້ານ server ທີ່ທ່ານຕ້ອງການເຊັ່ນ PHP, Ruby, ຫຼື Python. ແຕ່ Angular ບໍ່ຂື້ນກັບ Node.js ຍົກເວັ້ນເຄື່ອງມື CLI ຂອງມັນແລະການຕິດຕັ້ງແພັກເກດຈາກ npm.

NPM ຫຍໍ້ມາຈາກຜູ້ຈັດການ Package Node. ມັນເປັນການລົງທະບຽນສໍາລັບການໂຮດແພັກເກດ Node. ໃນຊຸມປີມໍ່ໆມານີ້, ມັນຍັງຖືກ ນຳ ໃຊ້ເພື່ອເຜີຍແຜ່ບັນດາຊຸດດ້ານ ໜ້າ ແລະຫ້ອງສະ ໝຸດ ເຊັ່ນ Angular, React, Vue.js ແລະແມ້ແຕ່ Bootstrap.

ໝາຍ ເຫດ: ທ່ານສາມາດດາວໂຫລດປື້ມປື້ມ Angular ຂອງພວກເຮົາ: ສ້າງໂປແກຼມເວັບ ທຳ ອິດຂອງທ່ານດ້ວຍ Angular ໂດຍບໍ່ເສຍຄ່າ.

ຕິດຕັ້ງ Angular CLI

ກ່ອນອື່ນ ໝົດ, ທ່ານຕ້ອງມີ Node ແລະ npm ຕິດຕັ້ງໃສ່ເຄື່ອງພັດທະນາຂອງທ່ານ. ມີຫລາຍວິທີໃນການເຮັດເຊັ່ນ, ເຊັ່ນວ່າ:

  • ການ ນຳ ໃຊ້ NVM (Node Version Manager) ສຳ ລັບຕິດຕັ້ງແລະເຮັດວຽກຮ່ວມກັບຫຼາຍໆ Node ໃນລະບົບຂອງທ່ານ
  • ໃຊ້ຜູ້ຈັດການຊຸດທີ່ເປັນທາງການຂອງລະບົບປະຕິບັດການຂອງທ່ານ
  • ຕິດຕັ້ງມັນຈາກເວັບໄຊທ໌ທາງການ.

ຂໍໃຫ້ມັນງ່າຍດາຍແລະໃຊ້ເວບໄຊທ໌ທາງການ. ພຽງແຕ່ເຂົ້າເບິ່ງ ໜ້າ ທີ່ດາວໂຫລດແລະຈັບເອົາໄບນາລີ ສຳ ລັບ Windows, ຈາກນັ້ນຕິດຕາມຕົວຊ່ວຍສ້າງການຕິດຕັ້ງ.

ທ່ານສາມາດຮັບປະກັນວ່າ Node ຖືກຕິດຕັ້ງຢູ່ໃນລະບົບຂອງທ່ານໂດຍການໃຊ້ ຄຳ ສັ່ງຕໍ່ໄປນີ້ໃນ ຄຳ ສັ່ງ ຄຳ ສັ່ງເຊິ່ງຄວນສະແດງ Node ທີ່ຕິດຕັ້ງໄວ້:

$ node -v

ຕໍ່ໄປ, ດຳ ເນີນການ ຄຳ ສັ່ງຕໍ່ໄປນີ້ເພື່ອຕິດຕັ້ງ Angular CLI:

$ npm ຕິດຕັ້ງ @ angular / cli

ໃນເວລາຂຽນນີ້, Angular 8.3 ຈະຖືກຕິດຕັ້ງ.

ຖ້າທ່ານຕ້ອງການຕິດຕັ້ງ Angular 9, ພຽງແຕ່ເພີ່ມແທັກຕໍ່ໄປດັ່ງຕໍ່ໄປນີ້:

$ npm ຕິດຕັ້ງ @ angular / cli @ ຕໍ່ໄປ

ຫຼັງຈາກ ຄຳ ສັ່ງ ສຳ ເລັດແລ້ວ, ທ່ານຄວນຕິດຕັ້ງ Angular CLI.

ຄູ່ມືດ່ວນ ສຳ ລັບ Angular CLI

ຫຼັງຈາກຕິດຕັ້ງ Angular CLI, ທ່ານສາມາດໃຊ້ງານ ຄຳ ສັ່ງໄດ້ຫຼາຍ. ໃຫ້ເລີ່ມຕົ້ນໂດຍການກວດສອບສະບັບຂອງ CLI ທີ່ຕິດຕັ້ງ:

$ ng ຮຸ່ນ

ຄຳ ສັ່ງທີສອງທີ່ທ່ານອາດ ຈຳ ເປັນຕ້ອງ ດຳ ເນີນການແມ່ນ ຄຳ ສັ່ງການຊ່ວຍເຫຼືອ ສຳ ລັບການຊ່ວຍເຫຼືອການ ນຳ ໃຊ້ທີ່ສົມບູນ:

$ ng ຊ່ວຍເຫຼືອ

CLI ໃຫ້ ຄຳ ສັ່ງຕໍ່ໄປນີ້:

ເພີ່ມ: ເພີ່ມການສະ ໜັບ ສະ ໜູນ ຫ້ອງສະ ໝຸດ ພາຍນອກເຂົ້າໃນໂຄງການຂອງທ່ານ.

ສ້າງ (ຂ): ຮວບຮວມແອັບ Angular ເຂົ້າໃນໄດເລກະທໍລີຜົນຜະລິດທີ່ມີຊື່ວ່າ dist / ຢູ່ເສັ້ນທາງຜົນຜະລິດທີ່ໃຫ້. ຕ້ອງໄດ້ຮັບການປະຕິບັດຈາກພາຍໃນໄດເລກະທໍລີພື້ນທີ່ເຮັດວຽກ.

config: ດຶງຂໍ້ມູນຫຼື ກຳ ນົດຄ່າການຕັ້ງຄ່າ Angular.

doc (d): ເປີດເອກະສານ Angular ຢ່າງເປັນທາງການ (angular.io) ໃນ browser, ແລະຄົ້ນຫາ ຄຳ ທີ່ໃຫ້.

e2e (e): ສ້າງແລະຮັບໃຊ້ແອັບ Angular, ຫຼັງຈາກນັ້ນ ດຳ ເນີນການທົດສອບໃນຕອນທ້າຍໂດຍໃຊ້ Protractor.

ສ້າງ (g): ສ້າງແລະ / ຫຼືດັດແກ້ເອກະສານໂດຍອີງໃສ່ schematic.

help: ບອກລາຍການ ຄຳ ສັ່ງທີ່ມີຢູ່ແລະ ຄຳ ບັນຍາຍສັ້ນໆຂອງມັນ.

lint (l): ໃຊ້ເຄື່ອງມື ສຳ ລັບລະຫັດ app Angular ໃນໂຟນເດີຂອງໂຄງການ.

new (n): ສ້າງບ່ອນເຮັດວຽກ ໃໝ່ ແລະແອັບ Angular ເລີ່ມຕົ້ນ.

run: ດຳ ເນີນການຕາມເປົ້າ ໝາຍ ທີ່ ກຳ ນົດໄວ້ໃນໂຄງການຂອງທ່ານ.

ໃຫ້ບໍລິການ: ສ້າງແລະບໍລິການແອັບ your ຂອງທ່ານ, ສ້າງ ໃໝ່ ໃນການປ່ຽນເອກະສານ.

test (t): ດຳ ເນີນການທົດສອບຫົວ ໜ່ວຍ ໃນໂຄງການ.

update: ອັບເດດ ຄຳ ຮ້ອງສະ ໝັກ ແລະຄວາມເພິ່ງພາອາໄສຂອງມັນ. ເບິ່ງ https://update.angular.io/

version (v): Outputs Angular CLI ລຸ້ນ.

xi18n: ສະກັດຂໍ້ຄວາມ i18n ຈາກລະຫັດແຫຼ່ງ.

ການສ້າງໂຄງການ

ທ່ານສາມາດໃຊ້ Angular CLI ເພື່ອສ້າງໂປແກຼມ Angular ຂອງທ່ານໂດຍການແລ່ນ ຄຳ ສັ່ງຕໍ່ໄປນີ້ໃນອິນເຕີເຟດເສັ້ນ ຄຳ ສັ່ງຂອງທ່ານ:

ຂອບໃບ ໜ້າ ໃໝ່ $ ng

ໝາຍ ເຫດ: frontend ແມ່ນຊື່ຂອງໂຄງການ. ແນ່ນອນທ່ານສາມາດເລືອກຊື່ທີ່ຖືກຕ້ອງ ສຳ ລັບໂຄງການຂອງທ່ານ. ເນື່ອງຈາກວ່າພວກເຮົາຈະສ້າງໂປແກຼມເຕັມຮູບແບບທີ່ຂ້ອຍ ກຳ ລັງໃຊ້ frontend ເປັນຊື່ ສຳ ລັບໂປແກມ ນຳ ໜ້າ.

ດັ່ງທີ່ໄດ້ກ່າວມາກ່ອນ, CLI ຈະຖາມທ່ານວ່າທ່ານຕ້ອງການເພີ່ມເສັ້ນທາງ Angular ບໍ່? ແລະທ່ານສາມາດຕອບໄດ້ໂດຍການປ້ອນຂໍ້ມູນ y (ແມ່ນ) ຫຼື n (ບໍ່), ເຊິ່ງແມ່ນຕົວເລືອກເລີ່ມຕົ້ນ. ມັນຍັງຈະຖາມທ່ານກ່ຽວກັບຮູບແບບ stylesheet ທີ່ທ່ານຕ້ອງການໃຊ້ (ເຊັ່ນ CSS). ເລືອກຕົວເລືອກຂອງທ່ານແລະກົດ Enter ເພື່ອສືບຕໍ່.

ຫລັງຈາກນັ້ນ, ທ່ານຈະໄດ້ສ້າງໂຄງການຂອງທ່ານດ້ວຍໂຄງສ້າງຂອງລະບົບແລະເອກະສານການຕັ້ງຄ່າແລະເອກະສານລະຫັດ. ມັນສ່ວນໃຫຍ່ແມ່ນຈະຢູ່ໃນຮູບແບບ TypeScript ແລະ JSON. ມາເບິ່ງບົດບາດຂອງແຕ່ລະເອກະສານ:

  • / e2e /: ປະກອບມີການທົດສອບໃນຕອນທ້າຍ (ການ ຈຳ ລອງພຶດຕິ ກຳ ຂອງຜູ້ໃຊ້) ຂອງເວັບໄຊທ໌້
  • / node_modules /: ທຸກຫ້ອງສະ ໝຸດ ຂອງບຸກຄົນທີ 3 ແມ່ນຖືກຕິດຕັ້ງໃສ່ໂຟນເດີນີ້ໂດຍໃຊ້ npm install
  • / src /: ມີລະຫັດແຫຼ່ງຂອງ ຄຳ ຮ້ອງສະ ໝັກ. ວຽກງານສ່ວນຫຼາຍຈະເຮັດຢູ່ບ່ອນນີ້
  • / app /: ມີໂມດູນແລະສ່ວນປະກອບຕ່າງໆ
  • / assets /: ມີຊັບສິນທີ່ຄົງທີ່ເຊັ່ນ: ຮູບພາບ, ຮູບສັນຍາລັກແລະຮູບແບບ
  • / ສະພາບແວດລ້ອມ /: ປະກອບມີສະພາບແວດລ້ອມ (ການຜະລິດແລະການພັດທະນາ) ເອກະສານການຕັ້ງຄ່າສະເພາະ
  • browserslist: ຕ້ອງການໂດຍ autoprefixer ສຳ ລັບການສະ ໜັບ ສະ ໜູນ CSS
  • favicon.ico: favicon ໄດ້
  • index.html: ເອກະສານ HTML ຕົ້ນຕໍ
  • karma.conf.js: ເອກະສານການຕັ້ງຄ່າ ສຳ ລັບ Karma (ເຄື່ອງມືທົດສອບ)
  • main.ts: ໄຟລ໌ເລີ່ມຕົ້ນທີ່ມາຈາກບ່ອນທີ່ AppModule ຖືກປິດລົງ
  • polyfills.ts: polyfills ທີ່ຕ້ອງການໂດຍ Angular
  • styles.css: ແຟ້ມ stylesheet ທົ່ວໂລກ ສຳ ລັບໂຄງການ
  • test.ts: ນີ້ແມ່ນເອກະສານການຕັ້ງຄ່າ ສຳ ລັບ Karma
  • tsconfig. *. json: ໄຟລ໌ການຕັ້ງຄ່າ ສຳ ລັບ TypeScript
  • angular.json: ມີການຕັ້ງຄ່າ ສຳ ລັບ CLI
  • package.json: ມີຂໍ້ມູນພື້ນຖານຂອງໂຄງການ (ຊື່, ຄຳ ອະທິບາຍແລະຄວາມເພິ່ງພາອາໄສ)
  • README.md: ແຟ້ມເຄື່ອງ ໝາຍ ທີ່ມີ ຄຳ ອະທິບາຍຂອງໂຄງການ
  • tsconfig.json: ເອກະສານການຕັ້ງຄ່າ ສຳ ລັບ TypeScript
  • tslint.json: ເອກະສານການຕັ້ງຄ່າ ສຳ ລັບ TSlint (ເຄື່ອງມືວິເຄາະແບບຄົງທີ່)

ຮັບໃຊ້ໂຄງການຂອງທ່ານ

Angular CLI ໃຫ້ລະບົບຕ່ອງໂສ້ເຄື່ອງມືທີ່ສົມບູນ ສຳ ລັບພັດທະນາແອັບດ້ານ ໜ້າ ໃນເຄື່ອງຂອງທ່ານ. ດັ່ງນັ້ນ, ທ່ານບໍ່ ຈຳ ເປັນຕ້ອງຕິດຕັ້ງເຊີຟເວີທ້ອງຖິ່ນເພື່ອຮັບໃຊ້ໂຄງການຂອງທ່ານ - ທ່ານພຽງແຕ່ສາມາດໃຊ້ ຄຳ ສັ່ງ ng service ຈາກ terminal ຂອງທ່ານເພື່ອຮັບໃຊ້ໂຄງການຂອງທ່ານຢູ່ໃນທ້ອງຖິ່ນ.

ທຳ ອິດ, ນຳ ທາງໃນໂຟນເດີຂອງໂຄງການຂອງທ່ານແລະ ດຳ ເນີນການ ຄຳ ສັ່ງຕໍ່ໄປນີ້:

$ cd ໜ້າ ຕໍ່ $ ng ຮັບໃຊ້

ດຽວນີ້ທ່ານສາມາດໄປຫາທີ່ http: // localhost: 4200 / address ເພື່ອເລີ່ມຕົ້ນການຫຼີ້ນກັບໂປແກຼມສິ້ນສຸດທາງຫນ້າຂອງທ່ານ. ໜ້າ ເວັບຈະໂຫລດແບບ ໃໝ່ ໂດຍອັດຕະໂນມັດຖ້າທ່ານປ່ຽນເອກະສານແຫຼ່ງໃດກໍ່ໄດ້.

ການຜະລິດຂອງປອມ Angular

Angular CLI ໃຫ້ ຄຳ ສັ່ງ ng generate ເຊິ່ງຊ່ວຍໃຫ້ນັກພັດທະນາສ້າງພື້ນຖານຂອງປອມ Angular ເຊັ່ນໂມດູນ, ສ່ວນປະກອບ, ທິດທາງ, ທໍ່ແລະການບໍລິການຕ່າງໆ:

$ ng ສ້າງສ່ວນປະກອບຂອງສ່ວນປະກອບຂອງຂ້ອຍ

ສ່ວນປະກອບຂອງຂ້ອຍແມ່ນຊື່ຂອງສ່ວນປະກອບ. Angular CLI ຈະເພີ່ມເອກະສານອ້າງອີງໃສ່ສ່ວນປະກອບ, ທິດທາງແລະທໍ່ໂດຍອັດຕະໂນມັດໃນເອກະສານ src / app.module.ts.

ຖ້າທ່ານຕ້ອງການເພີ່ມສ່ວນປະກອບຂອງທ່ານ, ຄຳ ສັ່ງຫລືທໍ່ໃສ່ກັບໂມດູນອື່ນ (ນອກ ເໜືອ ຈາກໂມດູນການ ນຳ ໃຊ້ຫລັກ, app.module.ts), ທ່ານພຽງແຕ່ສາມາດໃສ່ຊື່ຂອງສ່ວນປະກອບທີ່ມີຊື່ໂມດູນແລະ ຄຳ ຕັດ:

$ ng g ສ່ວນປະກອບ my-module / my-component

my-module ແມ່ນຊື່ຂອງໂມດູນທີ່ມີຢູ່.

ສະຫຼຸບ

ໃນຂໍ້ຄວາມນີ້, ພວກເຮົາໄດ້ເຫັນວິທີການຕິດຕັ້ງ Angular CLI ໃນເຄື່ອງພັດທະນາຂອງພວກເຮົາແລະພວກເຮົາໄດ້ໃຊ້ມັນເພື່ອເລີ່ມຕົ້ນໂຄງການ Angular ໃໝ່ ຕັ້ງແຕ່ເລີ່ມຕົ້ນ.

ພວກເຮົາຍັງໄດ້ເຫັນ ຄຳ ສັ່ງຕ່າງໆທີ່ທ່ານສາມາດ ນຳ ໃຊ້ຕະຫຼອດການພັດທະນາໂຄງການຂອງທ່ານ ສຳ ລັບການຜະລິດຂອງປອມ Angular ເຊັ່ນໂມດູນ, ສ່ວນປະກອບແລະການບໍລິການ.

ທ່ານສາມາດເຂົ້າຫາຫລືຕິດຕາມຜູ້ຂຽນຜ່ານເວັບໄຊທ໌ສ່ວນຕົວຂອງລາວ, Twitter, LinkedIn ແລະ Github.