Small Steps begin

Arkhom Khamthip
Aug 23, 2017 · 2 min read

หลังจากที่ผมได้ลองใช้ 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/

)

Arkhom Khamthip

Written by

Development Manager

CheHipster

Inspried by JHipster

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