ติดตั้ง Angular CLI ด้วย npm และ brew 🍺 ใน macOS ด้วยเบียร์ 1 กระป๋อง

xenirio
xenirio
Nov 8 · 2 min read

เนื่องด้วยที่ออฟฟิศมีการจัดโครงการร่วมกับมหาลัยในการทำเวิร์คช็อปกับนักศึกษา ผมจึงคิดทำโปรเจ็คเพื่อใช้ในการสอนเนื้อหาไปพร้อมๆกับการทำเวิร์คช็อป ซึ่งโดยบทความตอนนี้จะเป็นการปูพื้นการใช้ command line ในการติดตั้ง tool ต่างๆ

หยิบเบียร์ 1 กระป๋องมาค่อยๆจิบแล้วลง brew, node/npm, Angular CLI ก็เสร็จพอดี

เปิดกระป๋อง มอง terminal 💻
ลง brew กันก่อนครับ ซึ่ง tool ตัวนี้คือ package manager ยอดนิยมอีกตัวนึงของ macOS เปิด terminal แล้ว copy command นี้ไปวางเลยครับ
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ระหว่างนี้ก็จิบซักอึก ทำตามขั้นตอนที่ขึ้นมาบอกเป็นระยะ นั่งรอซักพัก…

ลงเสร็จแล้ว

จิบที่สองลองเทส brew 🍺
ลองดูกันหน่อยครับว่า brew ใช้ได้รึยังโดย command
brew -v
ซึ่ง ณ ที่เขียนบทความ brew version ล่าสุดคือ 2.1.16

ดีดนิ้วลง node
มาถึงคิว JavaScript runtime ยอดนิยม ซึ่งเราจะใช้ brew นี่แหละเป็นตัว install
brew install node

ลงเสร็จแล้ว check version ด้วย node -v, npm -v

จบขั้นตอนแรกแล้วครับ ตอนนี้เบียร์เหลือประมาณครึ่งกระป๋องขอแวบเข้าห้องน้ำก่อน


เหมือนพระมาโปรดเพราะมี angular cli
Google ได้ออกแบบให้ Angular มีความอิสระมากทั้งในแง่ของการออกแบบและการนำไปใช้ ซึ่งต้องแลกมาด้วยลำบากในการ setup ระบบให้พร้อมในการพัฒนาในขั้นต้น แต่ Google ก็ยังใจดีทำ tool ช่วยให้การ setup เหล่านี้ง่ายขึ้นมากซึ่งก็คือ Angular CLI นั่นเอง หรือเรียกชื่อสั้นๆว่า ng

การติดตั้งก็ทำผ่าน npmด้วย command npm install -g @angular/cli
สังเกตว่าจะมี option -g ห้อยไปด้วยซึ่งหมายความว่าเราต้องการลง node package @angular/cli เป็น global library เพราะเราจะใช้ package ตัวนี้เป็น global CLI ในการสร้างและขึ้นโครง Angular project ครับ

ระหว่างนี้ก็หาขนมมากินด้วยครับ กินไป จิ้มไป จิบไป 🍿
ถ้าลงเสร็จแล้วก็ลอง check version ดูครับด้วย command ng -v ควรจะขึ้นแบบนี้

ถึงตอนนี้ก็ครบถ้วนกระบวนความในการติดตั้ง tool ต่างๆจำเป็นในการสร้าง Angular project จากนี้ไปเราจะใช้คำสั่ง ng เป็นตัวเรียก Angular CLI ขึ้นมาทำงานในการสร้าง project, component, service, … หรือสั่งการ build deployment package เพื่อใช้ในการ deploy ซึ่งตัว ng ครอบคุมการทำงานได้แทบทั้งหมด

บทต่อไปเราจะมาว่ากันด้วยเรื่องการใช้งาน ng เบื้องต้นเช่นการ create project, component และเราจะมาดูกันว่าส่วนประกอบใน project มีอะไรบ้าง กระป๋องนี้หมดแล้ว เตรียมหยิบกระป๋องที่ 2 เลยครับ


อ้างอิง
brew : https://brew.sh/
Angular CLI : https://cli.angular.io/

MycosTech

Since 2001, Mycos Technologies has been building software applications for clients around the world. We are a consultancy, typically offshore. We strive to deliver with integrity and have a passion for technology.

xenirio

Written by

xenirio

Arts, Science and Technologies

MycosTech

MycosTech

Since 2001, Mycos Technologies has been building software applications for clients around the world. We are a consultancy, typically offshore. We strive to deliver with integrity and have a passion for technology.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade