Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!

Home Explore หนังสือ AngularJS สำหรับผู้เริ่มต้น ที่ต้องการใช้งานจริง

หนังสือ AngularJS สำหรับผู้เริ่มต้น ที่ต้องการใช้งานจริง

Published by morakot panpichit, 2020-01-05 23:56:32

Description: หนังสือ AngularJS สำหรับผู้เริ่มต้น ที่ต้องการใช้งานจริง

Search

Read the Text Version

พัฒนาเวบ็ ดว้ ย 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