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 เกิดขึ้น
reflect
Angular เขียนด้วยภาษา TypeScript, ไฟล์นี้จะช่วยให้ใช้ feature ของ TypeScript ที่เรียกว่า annotations หรือ decorators.
SystemJs
Angular จะแบ่งการทำงานเป็นแบบโมดูล ซึ่งไฟล์นี้จะทำหน้าที่โหลดโมดูลที่จะต้องใช้เข้ามาทำงาน.
กดลิ้งค์เพื่อไปที่ plunker
https://plnkr.co/edit/PDStI9CkJJiZuCgkt0Ai?p=info
ทดลองกดปุ่ม Run เราจะได้ผลลัพธ์
Hello Angular! v4.3.5
References:
https://codecraft.tv/courses/angular/quickstart/overview/
https://angular.io/
https://jhipster.github.io/