Prepare

ขั้นแรกของการเริ่มต้น คือ การเตรียมเครื่อง และ devops ให้พร้อม แต่มันมีเครื่องมือมากมายที่ต้องเตรียมไม่ว่าจะเป็น

* typescript สำหรับแปลงโค้ด .ts ไปเป็น .js

* web server สำหรับแสดงผลเวปที่เราต้องการ

* rxjs สำหรับการเขียน html ใน js

* jasmine/karma สำหรับเทส

* และอีกมากมายยยย~

ไม่ต้องกลัว เพราะว่า Angular มีความเมตตามาโปรดคนธรรมดาอย่างเราๆ โดยเขียน Setup instructions มาให้เรียบร้อยแล้ว โดยมีขั้นตอนง่ายๆแค่ 4 ขั้น คือ

#1. Clone QuickStart seed

#2. สั่ง npm insall
เพื่อลง devops ต่างๆที่จำเป็นสำหรับโปรเจค แต่ทั้งนี้ก่อนที่จะสามารถรันคำสั่งนี้ จำเป็นต้องลง node.js มาก่อนนะจ๊ะ

#3. (optional) ลบไฟล์ที่ไม่จำเป็น
หลังจากที่ clone มาแล้วจะพบไฟล์มากมาย และหลายๆไฟล์เป็นไฟล์สำหรับเทส และไม่จำเป็นสำหรับโปรเจคนี้สักเท่าไร นอกจากนี้ ก็อย่าลืมลบ .git เพื่อให้เราสามารถเซตอัพ git ของตัวเอง

สำหรับคนที่ไม่ชำนาญ เพราะไม่รู้ว่าต้องลบไฟล์ไหนบ้าง ให้ทำตามนี้เลย

*** work on Linux/OSX
*** สำหรับคนที่ใช้ Window เราจะมองด้วยสายตาดูแคลนแล้วชี้ให้ไปอ่านวิธีด้วยตัวเองที่ Delete non-essential files

#4. สั่ง npm start
เพื่อรัน devops ทุกอย่างที่เราเซตไว้ หากทุกอย่างรันได้อย่างไม่มีปัญหา ควรจะได้

File structure

เมื่อเปิดโฟลเดอร์ที่เราสร้างไว้ ไฟล์ที่จำเป็นสำหรับโค้ดครั้งนี้ มีดังนี้

package.json

ไฟล์นี้เป็นไฟล์ที่ใช้ร่วมกับ npm เพื่อกำหนด dependency module และรายละเอียดคร่าวๆของโปรเจค

node_modules

โฟลเดอร์นี้เก็บ module ต่างๆที่เกี่ยวข้องทั้งหมด แต่ปกติจะอยู่ใน .gitignore ไม่อัพขึ้น git

tsconfig.json

ไฟล์นี้เป็นไฟล์สำหรับบอกเงื่อนไขในการแปลง .ts ไปเป็น .js

index.html

ไฟล์นี้เป็นเสมือนหน้าต่างที่ทำให้โค้ดของเราเปิดเผยออกสู่โลกภายนอก เมื่อทุกคนเขาเวปไซท์ที่เราสร้างขึ้นจะเข้าไฟล์นี้เป็นไฟล์แรก

main.ts

เป็นจุดเชื่อมต่อระหว่าง index.html กับ javscript ซึ่งจะเลือก module แรกขึ้นมาแล้วโหลดขึ้นไปให้ผู้ใช้ใช้งาน

app

โฟลเดอร์นี้ คือ หัวใจสำคัญ เพราะมันคือโค้ดทั้งหมดที่จะอยู่ในโปรเจคนี้

Keep the app transpiling and running

หลังจากที่เราเรียนรู้ไปแล้วว่า แต่ละไฟล์ทำหน้าที่อะไร ก่อนที่จะเริ่มลงรายละเอียดที่ app/ ส่ิงแรกที่ห้ามลืม คือ ต้องรันคำสั่ง npm start เสมอ

เพราะว่า โค้ดที่เรากำลังจะเขียนนี้เป็นโค้ด .ts หรือ typescript ซึ่ง browser ไม่สามารถรันคำสั่งเหล่านี้ได้ จึงจำเป็นต้องแปลงโค้ด(transpiling) ไปเป็น .js ก่อนทุกครั้งที่มีการแก้ไข และ กด refresh browser แต่ npm start จะเป็นเครื่องมือทำหน้าที่เหล่านี้แทนเรา เย้ๆๆๆ

Intro Architecture

หลังจากที่เถลไถล มัวเมาไปกับ devops กันอย่างหอมปาขมคอกันไปแล้ว มาถึง coding ที่ทุกคนรอคอย

Architecture พื้นฐานของ Angular Application จะประกอบไปด้วย 2 ส่วนสำคัญ คือ

* Module เป็นส่วนหลักของทุกๆ application โดย 1 โปรเจคจะต้องมี 1 core module แต่สามารถสร้าง module ย่อยๆสำหรับแต่ละ features หรือแยกไปเป็น libary บางครั้งจะเรียก Angular module ว่า “NgModules”

สำหรับโปรเจคนี้ เรามี core module แรกดูได้ที่ app/app.module.ts

* Component เป็นส่วนที่ใช้ในการตัดสินใจ เงื่อนไขต่างๆ เปรียบเสมือน controller ควบคุมการทำงานของแต่ละหน้า ดังนั้นภายใน component จะประกอบไปด้วยตัวแปร และ action หลายๆอย่างที่จะต้องใช้ใน view

สำหรับโปรเจคนี้ เรามี component แรกดูได้ที่ app/app.component.ts

Show the hero

สิ่งแรกที่เราสร้างในตอนนี้ คือ Class Hero สำหรับเป็นคลาสแทน heros แต่ละคน ดังนี้

โค้ดนี้เป็นทั้งการสร้างคลาสและนิยาม parameter type ซึ่งแตกต่างจาก js ปกติพอสมควร ซึ่งโค้ดแปลกๆนี้ เป็นส่วนที่ใช้สำหรับ
validation ต่างๆ โดยเฉพาะเรื่อง type agreement ขอ typescript

ต่อมา คือการสร้างตัวแปร hero ใน AppComponent โดยกำหนดให้มันต้องมี type เป็น Hero

และกำหนด default value ให้กับ ตัวแปร hero ที่อยู่ใน AppComponent

และสุดท้าย คือ กำหนดลักษณะของ view หรือ template ให้ผู้ใช้เห็น

ในที่นี้ เราสามารถกำหนดหน้าตาของเพจได้โดยใช้ html และหากต้องการแสดงค่าที่อยู่ในตัวแปร ก็สามารถทำได้โดยใช้ {{variableName}}

และมีการใช้ (backticks) แทนเครื่องหมายฟันหนูแบบเดิมๆ สำหรับ string ยาวหลายๆบรรทัด

** ส่วนที่เป็น selector จะอธิบายเพิ่มเติมอีกที

เมื่อถึงขั้นตอนนี้ ควรจะได้

Edit the hero name

หลังจากที่เราสามารถแสดงผลข้อมูลต่างๆของ hero แล้ว ฟีเจอร์สำคัญที่ขาดไม่ได้ คือ “การแก้ไขข้อมูล” ซึ่งต้องอาศัยเครื่องมือสำคัญที่เรียกว่า Two-way binding

Two-way binding คือ การผูกความสัมพันธ์ระหว่างตัวแปรที่อยู่ภายใน Component และ Template เมื่อมีการเปลี่ยนค่าไม่ว่าจะเป็นที่ Template หรือ Component ค่าที่อยู่อีกที่นึ่งก็จะเปลี่ยนแปลงตามอย่างทันทีทันใด

ลงมือ!!

ขั้นแรก คือ เปลี่ยนจากการแสดงผลธรรมดา เป็น input

โดยใช้สัญลักษณ์ [()] แทน ความเป็น two-way binding

ขั้นตอนต่อมา คือ @include FormsModule เพราะเราต้องใช้ข้อมูลที่เกี่ยวข้องกับการใช้ input

หากคนที่เคยเขียน angular1.0 มาก่อนอาจจะงงๆว่าทำไมต้อง @include เดิมทีแล้วใน angular1.0 เราสามารถใช้ได้ทันที แต่สำหรับ angular2.0+ ฟีเจอร์นี้โดนเอาออกไปจาก default ดังนั้นก่อนจะใช้ Two-way binding ใน input จึงจำเป็นต้อง @include FormsModule ที่ app/app.module.ts เสมอ

และก็จบไป 1 ตอนในการเริ่มต้นเขียน Angular application…

PS.

เนื้อหาทั้งหมด จะแบ่งเป็น 7 ตอน
EP1. introduction
EP2. The Hero Editor
EP3. Master/Detail
EP4. Multiple Components
EP5. Services
EP6. Routing
EP7. HTTP
ตามดูโค้ดได้ที่ Github

Thank you

Angular.io บทความนี้อยู่ภายใต้ลิขสิทธิ์แบบ CC BY 4.0

Tell your friend about thisShare on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on Google+
Google+
0