Small Steps begin

หลังจากที่ผมได้ลองใช้ Anuglar มาได้ซักพักแล้วเลยคิดว่าจะลองเขียน blog เกี่ยวกับมัน เพื่อเก็บไว้ดูวันหลังเผื่อลืม และอาจจะมีประโยชน์สำหรับคนที่สนใจ Angular ด้วย ซึ่งโพสนี้ผมยึดเนื้อหาจากเวป https://codecraft.tv/courses/angular/quickstart/overview/ เป็นหลักเพราะเข้าใจได้ง่าย วันนี้มาทำความรู้จัก Angular เบื้องต้นไปพร้อมๆกับ web based code editor ที่ชื่อว่า plunker กันนะครับ

Angular เป็น Javascript framework ที่ Google พัฒนาขึ้นมาด้วยภาษาTypeScript ของ Microsoft เวอร์ชั่นของ Angular ตอนนี้อยู่ 4.x อ่านเพิ่มเติมได้ที่ https://angular.io/

สิ่งที่จะได้เรียนรู้

รู้จัก plunker ว่าคือะไร และทำไมถึงต้องใช้ plunker และจะใช้มันได้อย่างไร
เข้าใจโครงสร้างของ Angular plunkerรู้จ้ก library ต่าง ๆ ของ Angular ที่ใช้รันกับ plunker

Plunker คืออะไร และใช้งานยังไง

เป็น web based editor ที่สามารถ สร้าง แก้ไข และ รัน HTML, css และ javascript ไฟล์บน browser ได้เลย
plunker จะมี url เป็นของตัวเอง ดังนั้นเราสามารถแชร์โค๊ดของเราให้คนอื่นได้
เราไม่สามารถไปแก้โค๊ดของคนอื่นได้ แต่จะสามารถ fork ได้ ซึ่งก็คือการ copy โค๊ดมาจาก url อื่นให้มาเป็นของคุณเอง
หากมีไฟล์ index.html คุณสามารถกดปุ่มรัน เพื่อดูผลลัพธ์ใน Preview ได้เริ่มใช้งานง่ายมาก แค่กดปุ่ม Launch the Editor จากหน้าเวป แล้วเลือก New->Angular เท่านี้ก็สามารถเริ่มโค๊ด Angular ได้แล้ว

โครงสร้างของ Angular Plunker

ไฟล์ต่าง ๆ ที่ plunker สร้างมาให้ มีตามนี้

index.htmlเป็นไฟล์ HTML ที่จะเอาไว้ใส่ libraries และ bootstraps ของ Angular.
app.tsไฟล์ที่เราจะเขียนโค๊ดของ Angular
main.tsไฟล์หลักที่เป็นจุดเริ่มต้นของ Angular Application
config.js ไฟล์คอนฟิก ที่เอาไว้สำหรับโหลดโมดูลต่างๆ ของ Angular

ภายในไฟล์ index.html จะมีการ include ไฟล์ javascript อยู่ ไฟล์ดังนี้

core-js

เป็น library มาตรฐานของ JavaScript ที่ใช้รันกับ browser ต่างๆได้ ปัจจุบัน browser ส่วนใหญ่จะสนับสนุนเวอร์ชั่น 6 โดยปกติจะเรียกว่า ES6

สำหรับ TypeScript นั้นไม่สามารถรันบน browser ได้ ซึ่ง Angular จะทำการ Transpilation จาก TypeScript ไปเป็น JavaScript ก่อน อ่านเพิ่มเติมได้ที่ https:// www.stevefenton.co.uk/2012/ 11/ compiling-vs-transpiling/

zone

เป็นกลไกสำหรับการทำงานของ asynchronous https://github.com/angular/zone.js ซึ่งโดยสรุปแล้วมันจะดูแลงานสำหรับการ notify ให้ Angular เองในเวลาที่งาน pending anyschornous เกิดขึ้น