ວິທີການຕິດຕັ້ງ Angular CLI ໃນ Linux


Angular ແມ່ນໂຄງຮ່າງການພັດທະນາໂປແກຼມທີ່ ນຳ ໃຊ້ແບບເປີດ, ເປັນທີ່ນິຍົມແລະມີການຂະຫຍາຍສູງ, ນຳ ໃຊ້ໃນການສ້າງໂປແກຼມມືຖືແລະເວບໄຊທ໌ໂດຍໃຊ້ TypeScript/JavaScript ແລະພາສາທົ່ວໄປອື່ນໆ. Angular ແມ່ນໄລຍະ umbrella ສຳ ລັບທຸກລຸ້ນ Angular ທີ່ມາຫຼັງຈາກ AngularJS (ຫຼື Angular version 1.0) ລວມທັງ Angular 2, ແລະ Angular 4.

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

ໃນບົດຄວາມນີ້, ພວກເຮົາຈະອະທິບາຍວິທີການຕິດຕັ້ງເຄື່ອງມືເສັ້ນ ຄຳ ສັ່ງ Angular ໃນລະບົບ Linux ແລະຮຽນຮູ້ບາງຕົວຢ່າງພື້ນຖານຂອງເຄື່ອງມືນີ້.

ຕິດຕັ້ງ Node.js ໃນ Linux

ເພື່ອຕິດຕັ້ງ Angular CLI, ທ່ານ ຈຳ ເປັນຕ້ອງມີ Node.js ແລະ NPM ລຸ້ນລ້າສຸດທີ່ຕິດຕັ້ງຢູ່ໃນລະບົບ Linux ຂອງທ່ານ.

$ sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - [for Node.js version 12]
$ sudo curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - [for Node.js version 11]
$ sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - [for Node.js version 10]
$ sudo apt install -y nodejs
# curl -sL https://deb.nodesource.com/setup_12.x | bash - [for Node.js version 12]
# curl -sL https://deb.nodesource.com/setup_11.x | bash - [for Node.js version 11]
# curl -sL https://deb.nodesource.com/setup_10.x | bash - [for Node.js version 10]
# apt install -y nodejs
# curl -sL https://rpm.nodesource.com/setup_12.x | bash - [for Node.js version 12]
# curl -sL https://rpm.nodesource.com/setup_11.x | bash - [for Node.js version 11]
# curl -sL https://rpm.nodesource.com/setup_10.x | bash - [for Node.js version 10]
# yum -y install nodejs
# dnf -y install nodejs [On RHEL 8 and Fedora 22+ versions]

ເຊັ່ນດຽວກັນ, ເພື່ອລວບລວມແລະຕິດຕັ້ງ add-ons ແບບພື້ນເມືອງຈາກ NPM ທ່ານອາດຈະຕ້ອງຕິດຕັ້ງເຄື່ອງມືພັດທະນາໃນລະບົບຂອງທ່ານດັ່ງຕໍ່ໄປນີ້.

$ sudo apt install -y build-essential  [On Debian/Ubuntu]
# yum install gcc-c++ make             [On CentOS/RHEL]
# dnf install gcc-c++ make             [On RHEL 8/Fedora 22+]

ການຕິດຕັ້ງ Angular CLI ໃນ Linux

ເມື່ອທ່ານໄດ້ຕິດຕັ້ງ Node.js ແລະ NPM, ດັ່ງທີ່ສະແດງຢູ່ຂ້າງເທິງ, ທ່ານສາມາດຕິດຕັ້ງ Angular CLI ໂດຍໃຊ້ npm package manager ດັ່ງຕໍ່ໄປນີ້ (ທຸງ -g ໝາຍ ເຖິງການຕິດຕັ້ງລະບົບເຄື່ອງມືທີ່ກວ້າງທີ່ຈະໃຊ້ໂດຍ ຜູ້ໃຊ້ລະບົບທັງ ໝົດ).

# npm install -g @angular/cli
OR
$ sudo npm install -g @angular/cli

ທ່ານສາມາດເປີດໃຊ້ Angular CLI ໂດຍໃຊ້ ng ທີ່ສາມາດປະຕິບັດໄດ້ເຊິ່ງຕອນນີ້ຄວນຕິດຕັ້ງຢູ່ໃນລະບົບຂອງທ່ານ. ດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ເພື່ອກວດເບິ່ງເວີຊັນຂອງ Angular CLI ທີ່ຕິດຕັ້ງແລ້ວ.

# ng --version

ການສ້າງໂຄງການ Angular ໂດຍໃຊ້ Angular CLI

ໃນພາກນີ້, ພວກເຮົາຈະສະແດງວິທີການສ້າງ, ສ້າງແລະຮັບໃຊ້ໂຄງການ Angular ພື້ນຖານ ໃໝ່. ກ່ອນອື່ນ ໝົດ, ຍ້າຍເຂົ້າໃນ webroot directory ຂອງ server ຂອງທ່ານ, ຈາກນັ້ນເລີ່ມຕົ້ນ application Angular ໃໝ່ ດັ່ງຕໍ່ໄປນີ້ (ຈື່ ຈຳ ທີ່ຈະຕິດຕາມ prompts)

# cd /var/www/html/
# ng new tecmint-app			#as root
OR
$ sudo ng new tecmint-app		#non-root user

ຕໍ່ໄປ, ຍ້າຍເຂົ້າໄປໃນປື້ມຄູ່ມືການ ນຳ ໃຊ້ເຊິ່ງຫາກໍ່ສ້າງແລ້ວແລະໃຫ້ບໍລິການຕາມທີ່ສະແດງໄວ້

# cd tecmint-app
# ls 			#list project files
# ng serve

ກ່ອນທີ່ທ່ານຈະສາມາດເຂົ້າເຖິງແອັບ new ໃໝ່ ຂອງທ່ານຈາກໂປແກຼມທ່ອງເວັບ, ຖ້າທ່ານມີການບໍລິການໄຟວໍ ກຳ ລັງແລ່ນຢູ່, ທ່ານ ຈຳ ເປັນຕ້ອງເປີດ port 4200 ໃນການຕັ້ງຄ່າ firewall ດັ່ງທີ່ສະແດງໄວ້.

---------- On CentOS/RHEL/Fedora ---------- 
# firewall-cmd --permanent --zone=public --add-port=4200/tcp 
# firewall-cmd --reload

---------- On Ubuntu/Debian ----------
$ sudo ufw allow 4200/tcp
$ sudo ufw reload

ຕອນນີ້ທ່ານສາມາດເປີດໂປແກຼມທ່ອງເວັບແລະ ນຳ ທາງໂດຍໃຊ້ທີ່ຢູ່ຕໍ່ໄປນີ້ເພື່ອເບິ່ງແອັບ the ໃໝ່ ທີ່ໃຊ້ຢູ່ຕາມທີ່ສະແດງຢູ່ໃນ ໜ້າ ຈໍຕໍ່ໄປນີ້.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 

ໝາຍ ເຫດ: ຖ້າທ່ານໃຊ້ ຄຳ ສັ່ງ ng ໃຊ້ເພື່ອສ້າງແອັບພລິເຄຊັນແລະຮັບໃຊ້ມັນຢູ່ໃນທ້ອງຖິ່ນ, ດັ່ງທີ່ສະແດງຢູ່ຂ້າງເທິງ, ເຊີຟເວີຈະສ້າງແອັບ app ຄືນ ໃໝ່ ໂດຍອັດຕະໂນມັດແລະໂຫລດ ໜ້າ ເວບ ໃໝ່ ເມື່ອທ່ານປ່ຽນແຫຼ່ງໃດ ໜຶ່ງ ແຟ້ມ.

ສຳ ລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບເຄື່ອງມື ng, ໃຫ້ໃຊ້ ຄຳ ສັ່ງຕໍ່ໄປນີ້.

# ng help

ໜ້າ ທຳ ອິດຂອງ Angular CLI: https://angular.io/cli

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