พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง

แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------
หน ้า 2
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

บริษัท Control C จำกัด

ถาวร ศรีเสนพิ ลา (อ. กบ)
่ ต้น Angular.JS เพื่ อใช้งานจริง
สำหรับผู้เริม

เกริ่นนำ
สวัสดีครับก่อนจะเข้าเรื่องผมขออนุญาติแนะทำ ทักทายกับผู้
อ่านก่อนเพื่ อให้ทราบถึงจุดประสงค์ของหนังสือเล่มนี้ว่าจัดทำขึ้นมา
เพื่ ออะไร และเพื่ อคนกลุ่มไหน
ต้องขอเรียนอย่างตรงมาตรงไปครับว่าผมจัดทำหนังสือเล่ม
นี้โดยไม่ได้หวังว่าจะขายเป็นเรื่องเป็นราวอะไร แต่ต้องการแจกใน
กลุ่ม “กลุ่มนักเขียนโปรแกรม” เมื่อสมาชิกในกลุ่มมีจำนวนครบ
5,000 คน ซึ่งตอนนี้ก็ใกล้เข้ามาทุกขณะแล้ว
จุดประสงค์เพื่ อแจกฟรี ส่วนกลุ่มเป้าหมายนั้นผมเน้นว่า
สำหรับคนที่ต้องการนำเอา Angular.JS ไปใช้ในการทำงานของท่าน
โดยไม่ต้องเรียนเป็นคอร์สยาวเหยียด ที่ใช้เวลามาก โดยผมได้
รวบรวมจุดสำคัญ ที่เราได้ใช้บ่อยๆ ในการทำงานจริง เพื่ อลดระยะ
เวลาในการเรียนรู้ของผู้อ่าน ดังนั้นหมายความว่าบางส่วนผมก็อาจ
จะไม่ได้กล่าวถึง เพราะหากมีพื้นฐานการใช้งานจากความรู้ในหนังสือ
นี้แล้ว ผู้อ่านจะสามารถไปต่อยอดศึกษาจากแหล่งอื่นได้โดยไม่ยาก
สุดท้ายผมขอเรียนให้ทราบว่า ตัวหนังสือในหนังสือเล่มนี้อาจ
จะมีขนาดใหญ่สักหน่อยเพื่ อให้อ่านง่าย และผมขอย้ำทิง ้ ท้ายว่า
เนื้อหาการเขียนการอธิบายนั้นผมจะใช้ภาษาง่ายๆ ไม่วิชาการ ซึ่งไม่
ใช่แนวทางที่ผมถนัด จะเรียกว่าเหมือนการเล่าสู่กันฟังก็ว่าได้ ไม่ได้
ออกแนวสอนเป็นเรื่องเป็นราวเหมือนการเรียนหนังสือในห้อง หรือ
คอร์สอบรมต่างๆ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 3
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

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

รู้จักกับ Angular.JS กันก่อน

ในหัวข้อนี้เรามาดูกันก่อนครับว่าอะไรคือ Angular.JS ผมจะ
ขอเล่าแบบสรุปเลยเนาะ ไม่เข้าเรื่องอะไรให้กว้างเกินไป คือมันเป็น
เพี ยงชุดคำสั่ง JS จะเรียกว่าเป็น Library ก็ได้นะให้เราแค่เพี ยง
import ใส่ในโปรเจคแล้วก็ใช้งานได้เลย
โดยไอ้ตัวนี้จะช่วยให้การเขียนโค้ดเราเป็นระบบ อ่านง่าย ทุก
อย่างถูกแยกจากกันอย่างชัดเจน ทั้งส่วนของ การแสดงผลค่าตัว
แปร ลอจิก การเชื่อมต่อกับ API ภายนอก
จริงๆ ถ้าถามว่าไม่ใช้ได้ไหม ใช้ jQuery ได้ไหมคำตอบก็คือ
ได้ครับ แต่ถ้าใช้ตัว Angular.JS มาช่วยงานจะทำให้โค้ดเป็นระบบ
ขึ้นเยอะ ง่ายต่อการพั ฒนาระบบที่มีขนาดใหญ่ขึ้น ผมก็จะสรุปไว้
ประมาณนี้ก่อนครับเพื่ อไม่ให้ผู้อ่านเสียเวลาเยอะในการทำความเข้าใจ
เดี๋ยวเรามาดูหน้าตาของ Angular.JS กันสักนิดนึงเผื่อจะได้เป็น
พื้ นฐานไปสู่การทำความเข้าใจในหัวข้ออื่นต่อไปอีก
การแสดงค่าตัวแปรใช้ {{ var_name }} เช่น
<div>Name is {{ name }}</div>
เท่านี้ครับมันก็จะแสดงค่าได้ละ ส่วนตัวแปรนัน ้ ๆ จะมีค่าอะไรอยู่ที่เรา
เขียนกำหนดไว้ให้ โดยทุกอย่างจะถูกเก็บไว้ใน $scope หรือห้อง
เก็บค่าตัวแปรนั้นเอง หัวข้อหน้าผมจะมาอธิบายเพิ่ มเติมอีกหน่อย
เกี่ยวกับพื้ นฐานของ Angular.JS แล้วจากนั้นจะค่อยพาโหลด ติด
ตั้ง ทดสอบการทำงานกัน สำหรับหัวข้อนี้เราเอาเท่านี้ก่อนเนอะ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 4
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

โครงสร้างของ Angular.JS แบบสรุ้ป สรุป

สำหรับส่วนนี้นะครับผมจะพามาดูโครงสร้าง Angular.JS
แบบง่ายๆ กันเลย ขอพู ดแบบสรุปเลยว่าทุกอย่างจะอยู่ใต้กรอบ
ของ module แล้วใน module จะมี controller จากนั้นค่าตัวแปร
และลอจิกการทำงาน จะอยู่ใน controller อีกต่อหนึ่ง งง ใช่มะ มา
ดูภาพกันดีกว่า
[Module]
● Controller
○ Variable
○ Logic
่ ต้นเราต้องสร้าง app ก่อนด้วยโค้ดแบบนี้
เริม
var myModule = angular.module(‘myApp’, []);
ทีนี้ก็สร้าง controller ให้อยู่ใต้ module นี้อีกที
myModule.controller(‘MyController’, function($scope) {
… });
หากจะให้มีตัวแปรอะไรก็จัดไปได้เลยด้วยโค้ดง่ายๆ นี้ครับ
$scope.varName = valueOfVariable;
พอจะเอาค่าตัวแปรไปแสดงผลก็แค่วางในที่ที่ต้องการ
<div>{{ varName}}</div>
จบปิ้ง ง่ายเลยใช่ไหม

---------------------------------------------------------------------------------------------------------------------------
หน ้า 5
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

Download and Install ดีกว่า

คันไม้คันมือเต็มทนแล้วหลังจากเขียนอะไรที่ไม่เห็นภาพมา
หลายหน้า ทีนี้ผมขอพาดาวโหลดมาเล่นกันเลยจะดีกว่า เพราะชอบ
อะไรที่เห็นผลไวๆ แล้วค่อยเข้าใจไปทีละน้อยพร้อมกัน
เริ่มจากไปเว็บ www.angularjs.org กัน

กดที่ปม
ุ่ Download ได้เลยครับจะพบหน้านี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 6
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

กดกดที่ปม
ุ่ Download จะพบหน้าโค้ดแบบนี้ (แต่บางทีมันก็ดาว
โหลดเก็บลงในคอมนะ)

ให้เรากดกอปปี้ โค้ดทั้งหมดนี้เก็บไว้ก่อน (จำให้ได้นะว่าเรากอปแล้ว)

ทีนี้ไปทำการเปิดโปรแกรม Visual Studio Code จากนี้จะเรียกว่า
VSCode นะ (ใครยังไม่มีหามาไว้เลยโดยไว)

ทำการสร้างไฟล์ขึ้นมา ตั้งชื่อว่า angular.js วางโค้ดเมื่อกี้เข้าไป (ที่

เรากอปไว้ก่อนนี้)

---------------------------------------------------------------------------------------------------------------------------
หน ้า 7
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทีนี้สร้างไฟล์มาอีกตั้งชื่อว่า hello.html ครับ เก็บไว้ที่เดียวกันด้วยนะ

โอเคเนาะแล้วจากนั้นเราก็ทำการเขียนโค้ดลงในไฟล์ hello.html ดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 8
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

วิธีทดสอบการทำงานให้ดับเบิลคลิกไฟล์ hello.html ก็จะพบกับผลดังนี้

้ มอยากแนะนำว่าให้เราจดจำว่าอะไรอยู่ใต้
หลักการจำง่ายๆ ก่อนจบบทนีผ
อะไร และตัวไหนต้องไปวางตรงไหน โดยผมสรุปเป็นแผนภาพให้ดังนี้

ข้อสำคัญมากๆ คือตัวพิ มพ์ เล็กตัวพิ มพ์ ใหญ่เอาให้ถูกต้องนะครับ มันจะ

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

---------------------------------------------------------------------------------------------------------------------------
หน ้า 9
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ก่อนจะไปหัวข้ออื่นๆ ต่อ
ผมขออนุญาติพื้นที่เล็กน้อยเพื่ ออธิบายอะไรสักหน่อยก่อนนะครับ
ตลอดเนื้อหาในหนังสือนี้ผมจะเน้นว่าสำหรับคนทำงาน ดังนั้นเราจะไม่ได้มา
อธิบายกันขนาดว่า บรรทัดนี้คืออะไร คำนั้นคำนี้คืออะไร เพราะว่าหากต้อง
บอกกันทุกโค้ดขนาดนั้นจะทำให้ต้องใช้เนื้อที่เยอะมาก และโดยทั่วไปหากคน
ทำงานอ่านดูก็เข้าใจได้อย่างรวดเร็ว ดังนั้นผมจะอธิบายเฉพาะส่วนสำคัญ
จริงๆ และจะพยายามยกตัวอย่างที่กระชับ ไม่เยิ่นเย้อ เพื่ อประหยัดเวลา
การเรียนรู้ของคนอ่าน

การสร้างตัวแปรหลายตัวพร้อมกันทีเดียว
ตัวอย่างนี้เราจะมาดูว่าหากโปรแกรมเราต้องการเก็บค่าต่างๆ หลาย
อย่างไว้ในตัวแปรหลายตัวจะทำอย่างไร หรือบางทีอาจจะเก็บใส่ตัวแปร
เดียว จะต้องทำอย่างไร มีวิธีการไหนบ้าง และเอาไปใช้งานต้องเขียนยังไง
เริ่มจากง่ายๆ ก่อน $scope สามารถเก็บตัวแปรได้ไม่จำกัด เช่นเรา
ต้องการเก็บตัวแปร 2-3 ตัวแบบนี้
$scope.x = 10;
$scope.y = 20;
$scope.z = 30;
ง่ายๆ แบบนี้เลยครับพออยากเอาไปแสดงผลก็แค่วาง {{ x }} จบ ค่าตัว
แปรจะมาทันที ณ จุดที่เราวางตัวแปรเอาไว้ จุดสำคัญคือว่าหากค่าตัวแปร
มีการเปลี่ยน ณ เวลาใดก็ตาม ทุกๆ จุดที่วางตัวแปรนี้ไว้จะเปลี่ยนค่าทันที
มาดูโค้ดกันดีกว่าครับจะได้เห็นภาพกันแบบจะจะ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 10
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 11
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

การสร้าง เก็บ และใช้งานตัวแปรแบบ Array

เป็นอีกหัวข้อที่ยังไงก็ต้องเขียน เพราะได้ใช้แน่นอนไม่ว่าจะไปเขียน
โปรแกรมแบบไหน โดยปกติเราจะเก็บค่าต่างๆ ไว้เป็นชุดข้อมูลอยู่แล้วเช่น
ข้อมูลลูกค้าจากฐานข้อมูล แล้วส่งมาเก็บใส่ Array สุดท้ายเอาไป loop
แสดงผลในรูปแบบตารางเพื่ อให้ แก้ไข ลบ และจัดการได้อย่างง่าย
เรามาดูกันว่าจะเขียนโค้ดได้อย่างไร โดยผมจะยกตัวอย่างโค้ดนี้ให้ดูครับ

พอต้องการแสดงผลก็ทำการ loop ด้วยการใช้ ng-repeat ตามในภาพ

เน้อ ขออธิบายด้วยแผนภาพอีกสักนิดเพื่ อจะได้เห็นว่าส่วนไหน ไปเชื่อม
โยงกันอย่างไร เพราะจากนี้เราต้องใช้ความรู้ตรงนี้กันอีกเยอะ (กันงงไว้
ก่อน)

---------------------------------------------------------------------------------------------------------------------------
หน ้า 12
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ผลการทำงานของโค้ดนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 13
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

การใช้งาน ng-if ตรวจสอบเงือ ่ นไข

สำหรับการเขียนโปรแกรมที่ต้องการแสดงผลซับซ้อน มีเงื่อนไขเข้า
มาเกี่ยวข้อง ทีนี้ล่ะเราต้องได้ใช้คำสั่งพิ เศษตัวหนึ่งชื่อว่า ng-if ครับ ซึ่ง
วางในหน้าของ HTML เพื่ อเช็คค่าตัวแปรนั้นๆ ได้เลย ซึ่งจะเช็คตัวแปร
เดี่ยว หรือว่าตัวแปรแบบ Array ขณะมีการ loop ก็ได้ ขอยกเอา
ตัวอย่างโค้ดก่อนหน้านี้มาเขียนเพิ่ มอีกนิดหน่อย เพื่ อประหยัดระยะเวลาใน
การเรียนของผู้อ่านนะครับ ซึ่งผมจะเติมไปอีกเล็กน้อยดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 14
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ผลการทำงานของโค้ด

ขออธิบายทิ้งท้ายเล็กน้อยก่อนจบหัวข้อนี้เนาะ คือการใช้ ng-if เนีย

่ เราจะ
ใช้เพื่ อตรวจสอบค่าต่างๆ ว่าเป็นจริงหรือไม่ หากจริงโปรแกรมก็จะแสดง
ผล หรือทำงานในส่วนที่ ng-if ครอบเอาไว้ ซึ่งตรงนี้เราจะเพิ่ มเติมเงื่อนไข
&& || ได้หมดตามต้องการเหมือนกับเราที่เขียน if ธรรมดาในภาษา
JavaScript นัน่ แหละ เพี ยงแค่แยกมาเขียนใส่ส่วนของ HTML Code
เท่านั้นเอง

---------------------------------------------------------------------------------------------------------------------------
หน ้า 15
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

รู้จักและใช้งาน ng-click ของดีย์ ทีโ่ ลกรอ

อันนี้เป็นอีกส่วนนึงที่ชอบมากๆ ใน Angular.JS คือการจัดการ
event click ของสิง ่ ต่างๆ บนหน้าจอ โดยปกติเนี่ยเราก็ใส่
onClick=”myFunction()” อยู่แล้วในโค้ด JavaScript แต่ทีนี้มันจะมอง
ไม่เห็นพวก function ที่เราสร้างไว้ใน $scope ของ controller ดังนั้น
เพื่ อให้เห็นเราต้องใช้คำว่า ng-click เช่น
<button ng-click=”myFunc()”>Click Here</button>
แบบนี้ครับ ส่วนไอ้ตัว myFunc เราก็ไปเขียนใส่ไว้ใน $scope อีกทีโดย
กำหนดให้เป็น function เหมือนกับ JS Code ธรรมดานี่แหละ
เพื่ อให้เห็นภาพการใช้งานมาลองดูโค้ดในภาพนี้กันครับ

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 16
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เมื่อเราคลิกปุม
่ หน้าเว็บก็จะแสดงค่าตัวแปรออกมาให้เห็น

ภาพความสัมพั นธ์ของค่าต่างๆ กับโค้ดที่เราเขียนไปเมื่อกี้

ขออธิบายเสริมเล็กน้อยก่อนจบหัวข้อนี้ไปครับ เมือ
่ เราคลิกที่ button ตัว
ng-click จะไปวิ่งหา function ชื่อว่า showMessage() ที่อยู่ใน
$scope ภายใต้ controller ชื่อว่า MyController จากนั้นส่วนนี้เองก็มี
การสร้างตัวแปรชื่อ message ในบรรทัดที่ 7 นั่นเอง และค่าตัวแปรก็จะ
ถูกนำมาแสดงที่บรรทัด 17 ตามในภาพนี้
หากเราใช้ onClick=”showMessage()” จะไม่พบการทำงานใดเพราะ
JavaScript ไม่อาจมองเห็น function ที่อยู่ใน $scope ของ
Angular.JS ได้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 17
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งานร่วมกับ form
ตัวอย่างที่ผ่านมาหลายๆ หัวข้อผมได้อธิบายเกี่ยวกับการใช้งาน
Angular พื้ นฐานไปพอสมควร บัดนี้ก็ได้เวลาที่เราจะมาเริม ่ ทำอะไรจริงๆ
จังๆ กันมากขึ้นอีกหน่อยเพราะว่ายังไงซะเราก็หนีไม่พ้นการทำเว็บ หรือ
เขียนโปรแกรมเกี่ยวกับรับค่าจาก Form อยู่แล้วแหละ ดังนั้นตัวอย่างนี้
ผมจะเขียนเรื่องนี้ และอธิบายให้เห็นว่าตัวแปรมันมายังไง ไปยังไง
เอ้าเริ่มกันดีกว่ากับโค้ดตัวอย่างแบบบ้านๆ นี้ครับ

ครั้งแรกที่เห็นโค้ดนี้หลายคนอาจจะร้องออกมาว่า “อิหยังวะ” ทำไมต้อง

เขียนให้ยุ่งยากขนาดนี้ก็แค่รับค่าจาก Form เอง เดี๋ยวผมขออธิบายก่อน
นะครับ ว่าทำไมต้องพาเขียนแบบนี้ (ทัง ้ ที่เขียนให้กระชับกว่านี้ก็ได้)
เพราะว่าผมต้องการให้เห็นภาพของตัวแปรในกรณีที่มันแยกกันอยู่ระหว่าง
ตัวที่สำหรับ input กับอีกตัวที่ใช้สำหรับ output เลยแยกเป็น name
และ nameValue

---------------------------------------------------------------------------------------------------------------------------
หน ้า 18
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ผลการทำงานก่อนกดปุม
่

เมื่อกดปุม
่ แล้ว

เรามาดูผังความสัมพั นธ์กันก่อนว่าโค้ดแต่ละส่วน ไปมาอย่างไร

---------------------------------------------------------------------------------------------------------------------------
หน ้า 19
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทีนี้เห็นแล้วใช่ไหมครับว่าพอเรากดแล้วค่าไหนไปไหน อย่างไร เอาล่ะมาดู

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

ขอไม่แคปผลการทำงานอีกรอบนะ เพราะว่ามันก็ทำงานได้เหมือนเดิมแหละ
แค่โค้ดเราเปลี่ยนไป ดูเป็นระบบระเบียบมากขึ้นกว่าเดิมเท่านั้นเอง ไม่มีอะไร

---------------------------------------------------------------------------------------------------------------------------
หน ้า 20
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

2 Way Binding ปราบเซียน

ประเด็นเรื่องนี้เป็นที่ถกเถียงกันอย่างกว้างขวางมากในบรรดาคน
เขียน Angular.JS ว่าเป็นปัญหาให้เกิดการเขียนโปรแกรมที่ยุ่งยากเกินไป
แต่ความจริงมันไม่มีอะไรในกอไผ่ เป็นเพี ยงเรื่องความไม่เข้าใจ หรือเข้าใจ
คลาดเคลื่อนของคนที่ยังใช้งาน Angular.JS ไม่มากพอเท่านั้นเอง
ก่อนไปดูโค้ดต้องขออธิบายสักนิดนึงก่อนว่า 2 Way แปลว่า 2
เส้นทางส่วน Binding ก็คือผูก แปลกันแบบง่ายคือ การผูกตัวแปรไว้ 2
เส้นทางแต่เอาจริงๆ แล้วเนี่ยหลายทางกว่านั้นก็ได้ เช่นเรามีการสร้าง
Form และผูกกับตัวแปรไว้จากนั้นมีการเอาตัวแปรนี้ไปใช้ในจุดอื่นบนหน้า
เดียวกันด้วย หากว่าค่าตัวแปรโดนเปลี่ยนจะด้วยบรรทัดไหนก็แล้วแต่ ทุก
จุดจะเปลี่ยนกันหมดเลย ไม่สนใจว่าตอนที่เปลี่ยนค่านั้น เปลี่ยนเพราะ
โค้ดบรรทัดไหน บนก่อน หรือว่าล่างก่อน (งงใช่มะ)
เพื่ อให้เห็นภาพมากขึ้นเรามาลองดูโค้ด 2 Way แบบพื้ นๆ ก่อน เอา
ที่เรียบง่ายสุดเลยกับตัวอย่างนี้ครับ

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 21
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

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

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 22
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

จัดการ loop ด้วย angular.forEach

หัวข้อนี้เรามาดูกันในส่วนของการจัดการกับตัวแปรที่เป็น array
แล้วทำการ loop เพื่ ออ่านค่า หรือเอาค่าในแต่ละรอบไปทำงานอย่างอื่น
เช่นเราต้องการค้นหาสินค้าที่ราคาเกิน 100 บาท แล้วแยกไปใส่ array อีก
ชุด ก็ทำได้ง่ายๆ ลองมาดูตัวอย่างแรกกัน

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 23
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ให้ทำการคลิกขวาเพื่ อเปิดหน้าต่าง inspect เผื่อมีบางท่านไม่รู้วิธีการ

ดังนัน
้ ผมขอสาธิตตามขัน ้ ตอนนี้นะครับ

จะพบหน้าต่างแบบนี้

ทีนี้พอเรากดปุม
่ ก็ให้มาดูที่ส่วนของ console จะพบว่ามีข้อมูลออกมาดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 24
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

หากเราต้องการจัดการข้อมูลในแต่ละรอบใช้ if มาช่วยได้

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 25
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เล่นกับ Arrow Function ของใหม่ที่ชาวเดฟรอคอย

แต่ก่อนเวลาเราเขียนพวก function ใน JavaScript ต้องเขียนยาว
เป็นกิโล ทีนี้เขามีการเขียนแบบใหม่เข้ามาช่วยให้โค้ดกระชับมากขึ้นเรียกว่า
Arrow Function ครับ โดยใช้ () แทนคำว่า function แล้วใช้ => มาต่อ
เช่น
$scope.myFunction = () => {
}
ง่ายไหมล่ะครับจากนี้ไปในเนื้อหาหนังสือเล่มนี้ผมจะเขียน function ต่างๆ
ด้วยวิธีการแบบ arrow function ไปจนหน้าสุดท้ายเลยนะครับ เพราะว่า
เป็นรูปแบบมาตรฐานที่เหล่าโปรแกรมเมอร์ยุคใหม่ใช้กันแทนแบบเก่า

การทำ route แบบง่ายๆ แต่เจ๋งโคตรรรรรรร

ในส่วนนี้ผมจะพารู้จักกับ route และใช้งานกันครับก่อนอื่นขอ
อธิบายก่อนว่าการทำ route หมายถึงการเชื่อมต่อส่วนต่างๆ เข้ากับ
controller หมายความว่าคุณจะทำเว็บหลายๆ หน้า แยกจากกันได้ โดย
อาจจะแยกคนละ controller ก็ได้ แล้วคลิกไปหน้าใหม่ (โดยที่หน้าเว็บไม่รี
เฟรสเลย)
่ ต้นให้เราไปที่เว็บ angularjs.org แล้วกดที่ดาวโหล
มาดูวิธีการกันครับเริม
ด

---------------------------------------------------------------------------------------------------------------------------
หน ้า 26
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ให้เลือกเป็นแบบ zip ตามภาพนี้

พอโหลดมาแล้วให้ทำการแตกไฟล์ออก จะพบว่ามีไฟล์มากมายในนั้นตาม
ภาพนี้

เลื่อนมาล่างๆ จะพบว่ามีไฟล์ angular-route.js ตามภาพนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 27
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทำการกอปปี้ ไฟล์นี้ไปวางในโปรเจคโค้ดของเราข้างๆ กับ angular.js และ

ให้สร้างไฟล์ต่างๆ ตามภาพนี้ แต่ว่ายังไม่ต้องเขียนโค้ดใดๆ เข้าไปนะครับ
เดี๋ยวผมจะพาเขียนทีละจุด

เพื่ อให้สามารถใช้งานการ route ได้เราต้องนำโปรเจคไปรันกับ

web server ต่างๆ ในที่นี้ขอใช้ apache web server ซึ่งมีมากับ
โปรแกรม xampp เลยครับ หากท่านใดยังไม่ได้โหลดมาเก็บไว้รบกวนทำ
การหาโหลดมาไว้ก่อน และทำการ start server ด้วย (เลือก start
apache อย่างเดียวก็ได้ครับ) ทีนี้ก็เอาโค้ดเราไปวางในนัน
้ ต่อมาให้ทำการ
เปิดไฟล์ index.html เขียนโค้ดลงไปดังนี้ (ส่วนหน้าอื่นๆ ที่พาสร้างเขียน
อะไรลงไปก็ได้นะครับ)

---------------------------------------------------------------------------------------------------------------------------
หน ้า 28
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

อธิบายสักหน่อย
บรรทัดที่ 2: เป็นการอ้างอิงไปหา route library ของ angularjs
บรรทัดที่ 4: ส่วนของ [‘ngRoute’] คือการเรียกใช้ Router Library
ร่วมกับ app
บรรทัดที่ 6-20: เป็นการกำหนดผูก route เข้ากับไฟล์ html ที่เราสร้างไว้
บรรทัดที่ 25-28: เป็นการสร้างเมนู และผูกเข้ากับ route เวลาเราคลิก
หน้าต่างๆ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 29
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

บรรทัดที่ 30: กำหนด ng-view ให้รู้ว่าจุดนี้จะเปลี่ยนแปลงเมื่อมีการคลิก

ไปหน้าอื่น

ทดสอบการทำงานจะพบว่าเราคลิกไปหน้าต่างๆ ได้เลยโดยทีเ่ ว็บเราไม่รี

เฟรส วิธีการนี้ประหยัดทรัพยากรเซิฟเวอร์เพราะไม่ต้องโหลดอะไรเดิมๆ
มาอีก และทำเทมเพลตง่ายขึ้นด้วย

เชื่อมต่อ API ภายนอกง้ายง่าย จนต้องร้อง

ตัวอย่างนี้จะพาทำการเชื่อมต่อไปที่ api ภายนอกครับโดยมีวิธีเขียน
ง่ายๆ เลยเพี ยงแค่เรียก $http ก็ใช้ได้เลย ส่วนจะส่ง get หรือ post ก็
แล้วแต่เราต้องการเดี๋ยวผมพาทำการส่ง 2 แบบนี้ก่อนด้วยตัวอย่างง่ายๆ
กัน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 30
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

หากต้องการส่งค่าไปพร้อมกับ parameter ต่างๆ ก็สามารถทำได้โดย

การเติมโค้ดเข้าไปอีกดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 31
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

จัดการข้อมูลใน DropdownList สุดยอดโค้ดปราบเซียน

สำหรับหัวข้อนี้สำคัญมากๆ สมัยที่ผมหัดเขียน Angular.JS ใหม่ๆ
เรื่องนี้ทำเอาปวดหัวได้เหมือนกันเพราะว่ามันจะผูกค่ากันตรงๆ แล้ว
กำหนด default value ไม่ได้ ดังนั้นผมเลยคิดว่าน่าจะต้องทำตัวอย่างนี้
ไว้ในหนังสือด้วย ลองกันดูครับ

ผลการทำงาน

แต่ถ้าหากเราต้องการนำค่าไปใช้ก็ต้องสร้าง ng-model มาผูกแล้ว

กำหนดค่าเริม
่ ต้นให้กับข้อมูล

---------------------------------------------------------------------------------------------------------------------------
หน ้า 32
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ผลการทำงานจะพบว่ามันไม่มีค่าเริ่มต้นให้

ดังนั้นเราต้องเติมโค้ดไปอีกดังนี้

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 33
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งาน ng-blur
สำหรับส่วนนี้ถือว่าได้ว่านิยมใช้กันมาก โดยส่วนใหญ่จะใช้กับ
textbox เวลาที่เราเอาเมาส์ไปกด แล้วออกจาก textbox เขาเรียกว่าเหตุ
การ blur event เรามาทดลองเขียนโค้ดกันดูครับ

ผลการทำงาน

เมื่อเอาเมาส์ไปกด แล้วจากนั้นกดที่อื่นหรือกด tab บนคีย์บอร์ด

---------------------------------------------------------------------------------------------------------------------------
หน ้า 34
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งาน ng-submit
ในบางกรณีที่เราทำฟอร์มแล้วต้องการให้ผู้ใช้งานกดปุม
่ enter เพื่ อ
เป็นการ submit ข้อมูลไปยัง function ต่างๆ สามารถทำได้โดยใช้
ng-submit แต่ว่าต้องใช้ร่วมกับ <form> tag นะครับ เช่นการทำ
ฟอมบันทึกข้อมูล ฟอม login เข้าระบบอะไรพวกนี้ ส่วนมากคนใช้งานมัก
จะไม่ค่อยอยากกดเมาส์ไปคลิกปุม่ (ยกเว้นคนใช้จอสัมผัส) เราลองมาดู
ตัวอย่างโค้ดกัน

ผลการทำงาน

เมื่อเอาเมาส์ไปคลิกใส่ช่อง textbox แล้วกด enter

---------------------------------------------------------------------------------------------------------------------------
หน ้า 35
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งาน ng-change
สำหรับบาง ui component เราอาจจะต้องใช้เหตุการณ์
ng-change เพื่ อจัดการเมื่อมีการเปลี่ยนค่าในนั้น เช่นในกรณีของ
dropdownlist พวกจังหวัด อำเภอ ประมาณนี้ หรืออย่างประเภทสินค้า
พอเลือกก็ทำการกรอกสินค้าใน table เอาล่ะครับเดี๋ยวมาลองใช้งานกันดู
สักหน่อย

ผลการทำงาน

เมื่อทำการเปลี่ยน หรือเลือกรายการต่างๆ ใน select นี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 36
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งาน filter
สำหรับการใช้งาน filter คือการกรองข้อมูลที่มาจาก $scope
เพื่ อให้ง่ายในการค้นหา โดยที่เราไม่ต้องไปแตะส่วนฐานข้อมูลเลย ช่วยให้
ลดภาระการทำงานของฐานข้อมูลไปได้มาก เช่นต้องการค้นหา สินค้าที่ชื่อ
มีตัวอักษร “ก” ในชื่อสินค้า เมื่อพบแล้วตัว filter จะทำการคืนค่ารายการ
กลับมาเป็น array ให้เราไปทำการ loop แสดงผลได้ตามต้องการ เพื่ อ
ความเข้าใจมาลองเขียนโค้ดตามตัวอย่างนี้กันครับ

ผลการทำงาน

เมื่อลองทำการป้อนอักษรลงในช่องค้นหา

---------------------------------------------------------------------------------------------------------------------------
หน ้า 37
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ใช้งาน orderBy
อีกหัวข้อหนึ่งที่น่าสนใจมากคือการเรียงลำดับข้อมูลเพื่ อแสดงผลให้
สวยงาม โดยที่เราไม่ต้องไปใช้พลังของฐานข้อมูลเลย นั่นก็คือการใช้
orderBy ซึ่งมีอยู่แล้วใน angularjs ครับ เขียนง่ายด้วยนะ จะเรียงจาก
น้อยไปมาก หรือว่าจากมากไปหาน้อยก็ได้ แล้วแต่เราต้องการเลย เดี๋ยว
ผมสาธิตตัวอย่างให้ดู

● หากเราต้องการเรียงจากน้อยไปหามากก็แค่แก้ไข true เป็น false

ผลการทำงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 38
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

Workshop ระบบสมุดโทรศัพท์ ด้วย Node.js

สำหรับตัวอย่างเวิคชอปนี้ผมจะไม่พูดถึงการติดตัง้ Node.JS นะ
ครับให้ผู้อ่านที่ต้องการทำตามเวิคชอปหาข้อมูลวิธีการติดตั้ง และคอนฟิก
เบื้องต้นด้วยตัวเอง หรือหากจะให้ดีศึกษาการเขียนโปรแกรมด้วย
Node.JS ก่อนก็จะดีมากๆ ยังไงผมขอเริ่มด้วยการเช็คเวอร์ชั่นของ
Node.JS ในเครื่องก่อนเพื่ อจะได้ไปทิศทางเดียวกัน

ทีนี้เราทำการสร้างโปรเจคด้วย ExpressJS กันครับ (ใครที่ยังไม่ได้ติดตั้ง

ดูวิธีการติดตั้งได้ที่ expressjs.com นะครับ)

พอเราติดตั้ง express generator มาแล้วก็ทำการสร้างโปรเจคครับ ใน

ตัวอย่างนี้ผมจะทำการสร้างโดยเลือกใช้ ejs เป็นตัวออกแบบหน้าเว็บ
เพื่ อให้ง่ายต่อการพั ฒนาชิ้นงาน

---------------------------------------------------------------------------------------------------------------------------
หน ้า 39
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

จะได้โครงสร้างโปรเจคมาดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 40
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เข้าไปใน myapp

ติดตั้งตัวเสริมต่างๆ

ติดตั้ง nodemon

ทดสอบการทำงานของ server

---------------------------------------------------------------------------------------------------------------------------
หน ้า 41
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เปิดที่ Chrome แล้วทดสอบดู

พอทดสอบผ่านแล้วให้กด ctrl + c เพื่ อปิด server ก่อนเพราะเรายังต้อง

ลงตัวเสริมกันต่ออีกนั่นคือ ติดตั้งตัวเชื่อมต่อ mysql

ทำการสร้างฐานข้อมูลชื่อว่า db_phonebook

สร้างตารางให้มีโครงสร้างดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 42
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ดาวโหลดโปรแกรม postman มาลงไว้ก่อนเพื่ อใช้ทดสอบ API ทีเ่ ราจะทำ

กันครับ ใครโหลดแล้วข้ามจุดนี้ได้เลยใครยังไม่โหลดหามาลงไว้เลยเน้อ

จากนั้นไปที่โปรเจคเราเขียนโค้ดดังนี้

อธิบายโค้ดทีละส่วนดังนี้
1. เป็นการนำเข้าไลบราลี่เพื่ อให้เชื่อมต่อกับฐาน mysql ได้
2. ทำการเชื่อมต่อกับฐาน mysql ครับ
3. สร้าง route ชื่อ /insert และเขียนโค้ดเชื่อมต่อฐาน จากนั้นก็ทำ
การสั่งให้ insert ข้อมูลเข้าไป

---------------------------------------------------------------------------------------------------------------------------
หน ้า 43
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทำการ start โปรแกรมใน nodejs

เปิดโปรแกรม postman แล้วทดสอบการทำงานของโปรแกรมเรา

เพื่ อให้เข้าใจสำหรับมือใหม่กับโปรแกรม postman ขออธิบายตามภาพและ

จุดที่ผมไฮไลสีเหลือง ดังนี้
1. เลือกการส่งข้อมูลเป็นแบบ POST และส่งไปยัง api ที่เราเขียนไว้
ก่อนหน้านี้
2. เลือกส่งข้อมูลโดยระบุว่าส่งไปทาง body
3. เลือกว่าส่งข้อมูลไปแบบ x-www-form-urlencoded
4. กำหนดตัวแปรที่จะส่งไป ประกอบด้วย name, phone
5. ผลตอบกลับจากทาง nodejs server

---------------------------------------------------------------------------------------------------------------------------
หน ้า 44
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เมื่อไปดูข้อมูลในฐานจะพบว่ามีรายการเพิ่ มเข้ามา

จบไปกับตัว api แรกของเราทีนี้จะพาสร้างเพิ่ มอีกพอเราทำครบหมด

สามารถเอา api เหล่านี้ไปใช้ต่อได้กับ frontend อื่นเช่น angularjs,
react, vuejs, android app, ios, desktop โดยที่เราไม่ต้องให้สิ่ง
เหล่านั้นต่อกับฐานข้อมูลเลย
เอาล่ะครับเรามาต่อกันเนอะให้เติมโค้ดเข้าไปอีกในไฟล์ index.js ดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 45
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทดสอบการทำงานใน postman กันครับ

อธิบายการทำงาน
1. ทำการส่งข้อมูลไปแบบ GET ไปยัง phonebookAll
2. ผลตอบกลับจากทาง NodeJS

เพื่ อให้การเขียนโค้ดกระชับมากขึ้น และง่ายต่อการจัดการประสิทธิภาพ

ของการใช้งานฐานข้อมูลขอให้แก้ไขโค้ดเชื่อมต่อฐานดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 46
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

วิธีการนี้จะทำการเชื่อมต่อแบบ pool คือไม่ต้องคอยเปิด ปิด การเชื่อมต่อ

ใหม่ทุกครัง้ จะมีประสิทธิภาพกว่าและเขียนโค้ดง่ายกว่าด้วย

ต่อมาทำการเติมโค้ดเข้าไปอีกในไฟล์ index.js

ทดสอบการทำงานที่ postman

ขออธิบายเล็กน้อยนะครับสำหรับด้านบนคือการส่งค่าแบบ GET ไปที่

phonebookInfo/1 โดยที่ 1 ก็คือรหัส id ที่จะไปค้นในฐานข้อมูลนั่นเอง
ส่วนด้านล่างคือผลที่ NodeJS ตอบมาครับ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 47
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

แก้ไขโค้ดส่วนของการ insert อีกนิดหน่อย

ใส่ข้อมูลเข้าไปอีก 2 รายการ

ทีนี้เรามาเขียน api เพิ่ มอีก

---------------------------------------------------------------------------------------------------------------------------
หน ้า 48
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทดสอบการทำงานด้วย postman

จะพบว่ารายการหายไปละ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 49
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เขียน api เพิ่ มเข้าไปอีก

ทดสอบการทำงานด้วย postman

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

---------------------------------------------------------------------------------------------------------------------------
หน ้า 50
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

น่าจะครบหมดแล้วสำหรับการเขียน API ของเราทั้งการเพิ่ ม แสดง

ทัง ่ ที่เราจะต้องทำก็คือการเขียน
้ หมด ค้นหารายการ ลบ แก้ไข ต่อไปสิง
ส่วนของ Frontend หรือหน้าเว็บโดยใช้ AngularJS + HTML เข้าช่วย
ครับ เดี๋ยวเรามาเริ่มกันเลย

สำหรับส่วนนี้เพื่ อให้เร็วผมจะใช้การเชื่อมต่อ AngularJS, Bootstrap

แบบ CDN ทั้งหมดนะครับ ให้เข้าไปที่เว็บของทั้งสองแล้วกอปโค้ดเชื่อม
ต่อมาได้เลย ให้เติมโค้ดลงในไฟล์ inde.ejs ดังนี้

พอทำการเชื่อมต่อแล้วเราก็จะมาเขียนส่วนของหน้าตาของเว็บกัน
ก่อนครับ ผมขอว่าไม่เน้นสวยมากนะ ให้ทำงานได้ก็พอเพราะความสวยงาม
เราไปแต่งกันทีหลังได้ครับ ในหนังสือนี้จะเน้นไปที่ให้ผู้อ่านเกิดความเข้าใจ
การรับส่งค่า และเขียนโค้ดของ AngularJS ก่อนครับ เริม ่ กันเลยเนอะ
ก่อนอื่นเลยแก้ไขโค้ดใน index.js อีกหน่อย ให้ตัดตัว connect ออก
เหลือเพี ยงเท่านี้เพราะเราต่อแบบ pool แล้วหากไม่ลบออกระบบจะ error
ครับ ให้แก้โค้ดเหลือไว้เพี ยงส่วนที่ผมแปะภาพไว้ตามนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 51
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ให้ทำการสร้างไฟล์ index.js ไว้ใน javascripts/ ดังนี้

เขียนโค้ดลงไปดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 52
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เนื่องจากพื้ นที่ไม่พอเลยขยับมาวางโค้ดไว้หน้านี้นะครับ เพราะผมทำการแค

ปภาพมาเลย ไม่ได้กอปโค้ดมาแปะในเวิดส์

ต่อมาให้ทำการเติมโค้ดลงไปใน index.ejs โดยผมจะขอยกโค้ดส่วนของ

body มาเท่านั้นนะครับเพราะว่าก่อนนี้เราได้ทำไปแล้วในเรื่องการเชื่อมต่อ
angularjs, bootstrap เลยจะไม่เอ่ยถึงซ้ำอีก

---------------------------------------------------------------------------------------------------------------------------
หน ้า 53
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ในส่วนนี้มีเพี ยง ng-init ทีผ ่ มอยากอธิบายเพิ่ มเติมเพราะไม่ได้เอ่ยถึงมา

ก่อน ตรงนี้คือการให้ method ใดๆ เริม ่ ต้นทำงานเมื่อหน้าเว็บโหลดขึ้นมา
ครั้งแรก ซึ่งสิง่ ที่เราจะสั่งให้ทำงานคือตัว all() ตรงนี้จะทำการดึงข้อมูล
ทั้งหมดมาแสดงผลที่หน้าเว็บครับ

ผลการทำงาน เราสามารถทำการเพิ่ ม แก้ไข ลบ ข้อมูลต่างๆ ได้ตาม

ต้องการเลยโดยที่หน้าเว็บไม่รีเฟรสแม้แต่น้อย แถมยังทำงานไวด้วย

เพื่ อให้เห็นภาพว่าส่วนไหนทำงานอย่างไรขออธิบายด้วยภาพดังนี้

---------------------------------------------------------------------------------------------------------------------------
หน ้า 54
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

้ ไหนขึ้นมา ทีนี้
อันนี้จะเป็นการอธิบายว่าโค้ดส่วนไหน สร้างหน้าตาจุดไหนขึน
ผมจะมาอธิบายเพิ่ มอีก เมื่อหน้าเว็บโหลดมาโค้ดจะทำงานในส่วนนี้

อันนี้ยกตัวอย่างให้เห็นภาพคร่าวๆ นะครับไม่ได้เจาะลึกในการอธิบายเพราะ
เชื่อว่าผู้อ่านสามารถไล่โค้ด และทำความเข้าใจเพิ่ มเติมได้อยู่แล้ว

---------------------------------------------------------------------------------------------------------------------------
หน ้า 55
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

ทิ้งท้ายหนังสือเล่มนี้
ตลอดเนื้อหาทัง ้ หมดที่ได้นำเสนอไปนัน ้ ก็อาจจะมีบางเรื่องที่ขาดหล่น
หายไปบ้าง ผมในฐานะผู้เขียนกราบขออภัยไว้ ณ โอกาสนี้นะครับ จริงแล้ว
ทั้งหมดในเล่มนี้ผู้อ่านจะได้เห็นว่าเราเรียนรู้ AngularJS กันแบบรวบรัด
ตัดตอน ซึ่งได้มีการตัดส่วนที่ยังไม่จำเป็นออกไปก่อน ให้เราเรียนรู้
เฉพาะตัวที่เมื่อเรียนแล้วนำไปใช้ทำงานจริงได้เท่านั้น สำหร้บจุดอื่นผู้อ่าน
สามารถค้นหาข้อมูลเพิ่ มเติมได้จากเว็บไซต์ต่างๆ ซึ่งจะต่อยอดไปได้อีก
ไกลมาก
ตัวอย่างของระบบ Workshop ที่ทำมาเป็นแบบง่ายๆ ให้เห็นภาพ
การรับส่งข้อมูลเท่านัน ้ ซึ่งผู้อ่านสามารถนำความรู้นี้ไปใช้กับภาษาอื่นๆ ได้
ตามต้องการ เช่นใช้กับ PHP, .NET Core, JAVA, Go, Python ซึ่งส่วน
ของ AngularJS จะไม่ได้เปลี่ยนอะไร ใช้เทคนิคเดิมได้ครับ
แต่ท้ายที่สุดแล้วผู้อ่านสามารถนำเทคนิคไปพลิกแพลงได้ตาม
ต้องการนะครับ วิธีการนี้ไม่ใช่เทคนิคที่ตายตัว เอาจริงๆ สามารถเขียนให้
แตกต่างได้ อาจจะดีกว่าแนวทางที่ผมพาทำก็ได้

จากใจผู้เขียน
อีกหัวข้อหนึ่งสุดท้ายของหนังสือเล่มนี้ผมอยากขอบคุณทุกท่านที่
ติดตามผลงานมาตลอด และหนังสือนี้จะสำเร็จไม่ได้แน่หากไม่มีกำลังใจ
จากสมาชิกทุกท่านคอยส่งมาอย่างต่อเนื่อง ทั้งทางแชท ทางอีเมล์ และใน
กลุ่มเฟสบุค ซึ่งผมเองมีจุดประสงค์ว่าจะทำหนังสือ Ebook แจกฟรีออก
มาอย่างต่อเนื่องเพื่ อส่งต่อวิทยาทานนี้ออกไป ถึงแม้ในบางจุดผมอาจจะ
ไม่เก่ง หรืออธิบายไม่ลึกพอ
แต่ว่าอย่างน้อยผมคิดว่าการได้ลงมือทำอะไรสักอย่าง มันก็ดีกว่า
เราไม่ทำอะไรเลยแล้วเอาแต่วิจารณ์คนอื่นไปเรื่อย อย่างนัน ้ ไม่มีใครได้
ประโยชน์อะไรเลย ในความรู้ผมบางจุดก็ต้องยอมรับอย่างตรงไปตรงมา
ว่าผมเป็นคนรู้น้อย ซึ่งคนเราไม่รู้อะไรไปทั้งหมดจุดไหนที่แบ่งปันกันได้เราก็
นำออกมาแบ่งปันกันไป เพื่ อส่งต่อข้อมูลความรู้ออกไปยังผู้สนใจ
ผมหวังเป็นอย่างยิ่งว่าผู้อ่านจะได้รับความรู้จากหนังสือนี้ของผม
และช่วยแนะนำคนอื่นๆ มาเข้ากลุ่ม แอดไลน์ รู้จักกับเว็บของผม เพื่ อเป็น
กำลังใจให้ผมได้สร้างสรรค์ผลงานอย่างต่อเนื่องต่อไป สุดท้ายและท้ายสุด

---------------------------------------------------------------------------------------------------------------------------
หน ้า 56
 พั ฒนาเว็บด้วย AngularJS สำหรับมือใหม่ ทีต ่ ้องการใช้งานจริง
แจกฟรีในกลุ่มเฟสบุค “กลุ่มนักเขียนโปรแกรม”
โดย อ.กบ ถาวร ศรีเสนพิ ลา
---------------------------------------------------------------------------------------------------------------------------

เล่มนี้เป็นเพี ยงชุดแรกของหนังสือ “แจกฟรี” ที่ผมจะทำออกมา พบกันอึก

ครัง
้ ในเล่มต่อไป ขอบคุณครับ

---------------------------------------------------------------------------------------------------------------------------
หน ้า 57