Skip to main content

Angular CRUD with Rest API

สวัสดีครับ วันนี้ผมจะมาแนะนำการเขียน Basic Angular CRUD เบื้องต้น และ มีการ ดึงข้อมูลจากฐานข้อมูล MySQL จาก Rest Api โดยจะใช้ API จากบทความที่แล้วครับ BASIC RESTful Web API PHP/MySQL

เครื่องมือต่าง ๆ ที่ใช้ในบทความนี้

1.Text Editor  Vs Code
2.Node Js
3.Angular Cli

ก่อนอื่นเรามาติดตั้ง Angular Cli กันก่อนครับ แต่ก่อนที่จะติดตั้ง Angular ได้ต้องติดตั้ง  NodeJs ก่อนนะครับ

เปิด Command Line พิมพ์คำสั่งสำหรับติดตั้ง Angular

สร้าง Project Angular ด้วยคำสั่ง ng new ProjectName ดังนี้

ตัวอย่างตั้งชื่อ Project ว่า demo จากนั้นจะมีให้เลือกว่า ต้องการเพิ่ม Angular routing หรือไม่ให้ตอบ Y


จากนั้นเลือก stylesheet เป็น Css จากนั้นกด Enter

เมื่อติดตั้งเรียบร้อยแล้วเราจะมา Run Project กัน โดยใช้คำสั่ง ng serve

เมื่อ Start Project เรียบร้อยแล้ว เปิด Web Browser  ไปที่  URL : http://localhost:4200  จะแสดงหน้าจอดังภาพ

ติดตั้ง Bootstrap 4 ใน angular

เปิด Command พิมพ์คำสั่ง  npm install bootstrap –save

จากนั้นไปที่ Project Angular ตัวอย่างติดตั้งไว้ที่ D:/angular/demo เปิดไฟล์ angular.json เพิ่ม CODE ดังนี้

สร้าง Component ด้วย ng Generate

ต่อมาเราจะมาสร้าง Component สำหรับ ดู/เพิ่ม/แก้ไข/ลบ ข้อมูลกันครับ โดยเราจะใช้คำสั่ง ng generate เพื่อให้ Angular สร้าง Component  ให้เราอัตโนมัติ ครับ
สามารถดู วิธีการใช้งานได้ที่  https://angular.io/cli/generate

คำสั้ง generate component employee-create สำหรับการเพิ่มข้อมูลพนักงาน

คำสั้ง generate component employee-update สำหรับการแก้ไขข้อมูลพนักงาน

คำสั้ง generate component employee-list สำหรับการดูข้อมูลพนักงาน

เมื่อ Generate Component เรียบร้อยแล้วจะมี Folder เกิดขึ้นที่  D:/angular/demo/src/app ดังภาพ

ต่อมาเรามาสร้าง Service ไว้สำหรับติดต่อ Api ภายนอกกันครับ

ใช้คำสั่ง ng generate service api

เมื่อเรียบร้อยแล้ว angular จะมีการสร้างไฟล์ที่ D:/angular/demo/src/app/api.service.ts

โดยในตัวอย่างนี้เราจะเรียกใช้ Api ที่เคยเขียนไว้แล้วในบทความก่อนหน้านี้ครับ BASIC RESTful Web API PHP/MySQL

แก้ไขไฟล์ api.service.ts ดังนี้

 

แก้ไขไฟล์ app.modules.ts  เพิ่ม HttpClientModule และ FormsModule ดังนี้

ตัวอย่างไฟล์ app.modules.ts

แก้ไขไฟล์ app-routing.modules.ts ดังนี้

Employee List Component สำหรับแสดงผลข้อมูล

ไปที่ D:/angular/demo/src/app/employee-list/employee-list.component.ts แก้ไข Code ดังนี้

ไปที่ D:/angular/demo/src/app/employee-list/employee-list.component.html แก้ไข Code ดังนี้

Employee Create Component สำหรับการเพิ่มข้อมูลใหม่

ไปที่ D:/angular/demo/src/app/employee-create/employee-create.component.ts แก้ไข Code ดังนี้

ไปที่ D:/angular/demo/src/app/employee-create/employee-create.component.html แก้ไข Code ดังนี้

Employee Update Component สำหรับการแก้ไขข้อมูล

ไปที่ D:/angular/demo/src/app/employee-update/employee-update.component.ts แก้ไข Code ดังนี้

ไปที่ D:/angular/demo/src/app/employee-update/employee-update.component.html แก้ไข Code ดังนี้

เมื่อแก้ไขไฟล์ทั้งหมดเรียบร้อยแล้วใช้คำสั่ง  ng serve เพื่อดูผลการทำงานกันอีกครั้ง

เปิด Web Browser  ไปที่  URL : http://localhost:4200

หากไม่มีอะไรผิดพลาด จะแสดงหน้าจอดังภาพ และ สามารถคลิกปุ่ม เพิ่ม / แก้ไข / ลบ ข้อมูลได้เลยครับ

ขอบคุณครับ