Jaynarol Blog

Angular 2 : SetUp + Hello World!

สวัสดีครับ หลังจากในบทความที่แล้วได้ปูพื่น Angular 2 ไปนิดนึง

บทความนี้ผมจะพาติดตั้งแบบง่ายๆ จนกระทั่งแสดงผล Hello World ออกมาได้

ปกติแล้วการติดตั้ง Angular 2 มีหลายวิธีมากๆ มีคนทำ git repository สำเร็จรูปเอาไว้แล้วมากมาย

แต่เพื่อรากฐานที่ดี ผมคิดว่าการลงมือโดยใช้ตัวช่วยน้อยที่สุดจะทำให้เราเข้าใจมันอย่างแท้จริงมากกว่า

อนาคตพอเราเข้าใจมันดีแล้ว เราจะไปใช้เครื่องมือต่างๆนาๆมาช่วย ก็ยิ่งสบายขึ้นไปอีก

แถมเวลาเกิดปัญหาผิดพลาดมา ถ้าเรารู้ว่าส่วนไหนคืออะไร เราก็ตามแก้ได้ง่ายขึ้นครับ

 

 

เข้าใจหลักการ

ถึง Angular 2 จะขึ้นชื่อว่าเป็น Front-end Framework แต่มันไม่ง่ายเหมือนเขียน html+jquery

ที่เราสามารถเขียนคำสั่งลงใน editor ต่างๆและสั่งรันผ่าน Browser ได้ทันที

ที่เป็นอย่างนั้นเพราะ Angular 2 ใช้ TypeScript เป็นภาษาหลัก

ซึ่งภาษา TypeScript เป็น Superset ของ JavaScript

หมายความว่า เมื่อเราเขียนโปรแกรมด้วยภาษานี้เราจำเป็นต้องมีการแปลงโค้ดเรากลับไปเป็น JavaScript อีกทีนึง

หากเราจะต้องมาแปลงโค้ดเองทุกครั้งที่มีการแก้ไขและสั่งรันคงเป็นเรื่องที่น่าเบื่อและเสียเวลาไม่น้อย

จึงเป็นเหตุผลที่ต้องติดตั้งเครื่องมือต่างๆให้มาช่วยเราทำงานที่น่าเบื่อนี้แบบอัตโนมัติครับ

 

 

 

เตรียมพร้อมเครื่องมือ

สิ่งที่เราต้องมีในเครื่อง เพื่อใช้สำหรับพัฒนาเว็บด้วย Angular 2 มีดังต่อไปนี้ครับ

 

git

ขอสรุปสั้นๆว่ามันคือ repository หรือคลัง source code ของโปรเจคต่างๆ

ช่วยในการบริหารจัดการ source code ถือว่าสำคัญมากๆในปัจจุบันและจำเป็นต้องรู้จัก+ใช้เป็นครับ

ใครอยากอ่านหรือศึกษาเต็มๆ ทางนี้ครับ

 

วิธีการติดตั้ง

  1. ไปที่ https://git-scm.com/downloads
  2. เลือกดาวน์โหลดและติดตั้งตาม OS ตัวเอง
  3. ติดตั้งตามขั้นตอนปกติ
  4. ทดสอบการทำงานโดยพิม git --version ใน command prompt
  5. หากขึ้นเลขเวอร์ชั่น ถือว่าติดตั้งสำเร็จแล้วครับ

 

node.js and npm

npm คือเครื่องมือที่ช่วยในการจัดการ dependencies ทั้งหมดในโปรเจคของเรา

ในสมัยนี้การที่เราจะเลือกใช้ lib ของใครมาใส่ในโปรเจคเรา เราจะไม่ใช้วิธีก๊อปมาวางแล้วครับ

เราจะสั่งให้ npm ไปดึงที่ git repository ของ lib นั้นมาให้เราเลย

ความเจ๋งมันอยู่ที่ถ้า lib นั้นมันต้องการ lib อื่นๆอีก เจ้า npm ก็จะดึงมาให้เราทั้งยวงทีเดียวเลยครับ

 

วิธีการติดตั้ง

  1. ไปที่ https://nodejs.org/en/download/
  2. เลือกดาวน์โหลดและติดตั้งตาม OS ตัวเอง
  3. ติดตั้งตามขั้นตอนปกติ
  4. ทดสอบการทำงานโดยพิม npm --version ใน command prompt
  5. หากขึ้นเลขเวอร์ชั่น ถือว่าติดตั้งสำเร็จแล้วครับ

 

 

เตรียมโฟลเดอร์และไฟล์คอนฟิก

หลังจากเรามีเครื่องมือพร้อมแล้วขั้นตอนนี้ให้เราสร้าง folder ที่ไหนก็ได้ในเครื่อง

เพื่อเป็นที่เก็บ source code ของเราครับ

เมื่อสร้างเสร็จแล้วให้เข้าไปในโฟลเดอร์และสร้างทั้ง 3 ไฟล์ตามข้อมูลด้านล่างนี้ครับ

 

อธิบายทั้ง 3 ไฟล์

tsconfig.json

คือไฟล์ที่ไว้กำหนดการทำงานของ TypeScript compiler อ่านเพิ่มเติม

typings.json

คือไฟล์ที่ใช้สำหรับจัดการความขัดแย้งของเวอร์ชั่น TypeScript อ่านเพิ่มเติม

package.json

คือไฟล์หลักของโปรเจคที่เราใช้ระบุ dependencies ต่างๆที่ระบบต้องโหลดเข้ามา

โดย package.json จะถูกเรียกใช้งานผ่าน npm และไปโหลดข้อมูลที่ github

 

 

เริ่มการติดตั้ง

ตอนนี้ folder เราควรจะมีไฟล์ดังนี้

root/
├── tsconfig.json
├── typings.json
└── package.json

  1. กด shift+คลิ๊กขวา พื้นที่ว่างๆใน folder แล้วเลือก Open command window here
  2. command prompt จะถูกเปิดขึ้นมาให้พิมพ์คำสั่ง npm install และรอจนเสร็จ

 

npm

 

หลังจากติดตั้งเสร็จเราควรจะมีไฟล์ตามนี้

root/
├── node_modules/…
├── typings/…
├── tsconfig.json
├── typings.json
└── package.json

 

อธิบายทั้ง 2 โฟลเดอร์

node_modules 

คือโฟลเดอร์ที่เก็บ libraries ต่างๆที่เรากำหนดไว้ใน package.json

typings

คือโฟลเดอร์ที่เก็บชุดคำสั่งที่ช่วยให้ JavaScript เวอร์ชั่นเก่าๆสามารถใช้งานได้ ตามที่เรากำหนดไว้ใน typings.json

 

 

เริ่มเขียนโปรแกรม

สร้างไฟล์ index.html, app/bootstrap.ts, app/app.component.ts และเพิ่มข้อมูลไปในไฟล์ดังนี้

 

อธิบายทั้ง 3 ไฟล์

index.html

คือไฟล์แรกสุดที่จะถูกเรียกเมื่อเปิดเว็บ ในไฟล์นี้เราจะแบ่งเป็น 3 ส่วนได้แก่

  1. Load libraries – นำเข้า libraries ที่ Angular 2 ต้องเรียกใช้งาน
  2. Configure – ตั้งค่าเริ่มต้นให้กับ lib ต่างๆและชี้ไฟล์ .ts ที่ให้ Angular 2 ไปโหลดตัวแรก
  3. Display – ส่วนแสดงผลหลัก โดยปกติในไฟล์ index จะมี tag แค่นี้ (ส่วนอื่นๆเราจะฉีดเข้ามาทีหลัง)

app/bootstrap.ts

คือไฟล์แรกสุดที่ Angular 2 เริ่มทำงาน โดยปกติจะระบุ component แรกที่ต้องการให้เริ่มฉีดเข้าไปใน Display

app/app.component.ts

คือไฟล์ component ที่เราเขียนขึ้นมาเอง ให้แสดงคำว่า Hello Word แทนที่ลงไปใน tag my-app

(จะลงลึกอีกทีในบท component)

 

 

Hello World!

ตอนนี้เราควรมีไฟล์ทั้งหมดตามนี้

root/
├── app/
│     ├── app.component.ts
│     ├── bootstrap.ts
├── node_modules/…
├── index.html
├── typings/…
├── tsconfig.json
├── typings.json
└── package.json

 

พิมพ์ npm start ใน command prompt และ enter (cmd ต้องอยู่ที่ root project ของเราก่อนเสมอ)

รอสักพัก browser จะเปิดหน้าเว็บ http://localhost:3000/ ขึ้นมาให้อัตโนมัติ

 

ng-helloworld

จากนั้นให้เราลองแก้ข้อความใน app/app.component.ts ตรง <h1>Hello World!</h1> เป็นคำอื่น

จะเห็นได้ว่าตัว command prompt จะมีการ compile ใหม่และหน้าเว็บมีการ refresh ให้อัตโนมัติด้วย

 

เสร็จสิ้นการติดตั้ง Angular 2 ฉบับ Basic ครับ 

 

 

ปิดท้าย

บทความนี้ ตอนแรกผมใช้เวลาคิดอยู่หลายวันว่าจะเขียนวิธีติดตั้งแบบไหนดี

ถ้าเอาง่ายผมก็เขียนสั้น คนอ่านก็ทำตามง่าย

แต่จะมีประโยชน์อะไร ถ้าอนาคตเครื่องมือเปลี่ยน บทความนี้ก็ใช้ไม่ได้

และที่แย่กว่าคือการที่ทำอะไรไปโดยไม่รู้จุดประสงค์ของมัน พอเจอปัญหามาก็ไปไม่เป็น

คิดไปคิดมาก็ได้ข้อสรุปตามที่ได้เกริ่นไปเมื่อต้นบทความ ยอมเหนื่อยเพิ่มหน่อยดีกว่า

เรื่องถัดไปผมจะเขียนอธิบายเกี่ยวกับ component ว่าคืออะไร ทำงานยังไง

รอติดตามได้เลยครับ 🙂