สวัสดีครับ วันนี้ผมจะมาแนะนำการเขียน 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
npm install -g @angular/cli
สร้าง Project Angular ด้วยคำสั่ง ng new ProjectName ดังนี้
ng new demo
ตัวอย่างตั้งชื่อ Project ว่า demo จากนั้นจะมีให้เลือกว่า ต้องการเพิ่ม Angular routing หรือไม่ให้ตอบ Y
จากนั้นเลือก stylesheet เป็น Css จากนั้นกด Enter
เมื่อติดตั้งเรียบร้อยแล้วเราจะมา Run Project กัน โดยใช้คำสั่ง ng serve
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 ดังนี้
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
สร้าง Component ด้วย ng Generate
ต่อมาเราจะมาสร้าง Component สำหรับ ดู/เพิ่ม/แก้ไข/ลบ ข้อมูลกันครับ โดยเราจะใช้คำสั่ง ng generate เพื่อให้ Angular สร้าง Component ให้เราอัตโนมัติ ครับ
สามารถดู วิธีการใช้งานได้ที่ https://angular.io/cli/generate
คำสั้ง generate component employee-create สำหรับการเพิ่มข้อมูลพนักงาน
ng generate component employee-create
คำสั้ง generate component employee-update สำหรับการแก้ไขข้อมูลพนักงาน
ng generate component employee-update
คำสั้ง generate component employee-list สำหรับการดูข้อมูลพนักงาน
ng generate component employee-list
เมื่อ Generate Component เรียบร้อยแล้วจะมี Folder เกิดขึ้นที่ D:/angular/demo/src/app ดังภาพ
ต่อมาเรามาสร้าง Service ไว้สำหรับติดต่อ Api ภายนอกกันครับ
ใช้คำสั่ง ng generate 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 ดังนี้
import { Injectable } from '@angular/core';
//import HttpClient สำหรับ เชือมต่อ URL API ภายนอก
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
//กำหนด URL API ที่ต้องการดึงข้อมูล
URL_API = 'http://localhost/api/employee.php';
constructor(private http : HttpClient) { }
//สร้าง function สำหรับเรียกดูข้อมูลทั้งหมด
findAll() {
return this.http.get<any>(`${this.URL_API}`);
}
//สร้าง function สำหรับเรียกดูข้อมูลครั้งละ 1 รายการ
findOne(id:number){
return this.http.get<any>(`${this.URL_API}?id=${id}`);
}
//สร้าง function สำหรับบันทึกข้อมูล
create(data:{}){
return this.http.post<any>(`${this.URL_API}`,data);
}
update(objData:{},id:number) {
return this.http.put(`${this.URL_API}?id=${id}`,objData);
}
delete(id:number){
return this.http.delete(`${this.URL_API}?id=${id}`);
}
}
แก้ไขไฟล์ app.modules.ts เพิ่ม HttpClientModule และ FormsModule ดังนี้
ตัวอย่างไฟล์ app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeCreateComponent } from './employee-create/employee-create.component';
import { EmployeeUpdateComponent } from './employee-update/employee-update.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
@NgModule({
declarations: [
AppComponent,
EmployeeCreateComponent,
EmployeeUpdateComponent,
EmployeeListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
แก้ไขไฟล์ app-routing.modules.ts ดังนี้
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EmployeeCreateComponent } from './employee-create/employee-create.component';
import { EmployeeUpdateComponent } from './employee-update/employee-update.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
const routes: Routes = [
{
path: 'employee/create',
component: EmployeeCreateComponent
},
{
path: 'employee/:id',
component: EmployeeUpdateComponent
},
{
path: 'employees',
component: EmployeeListComponent
},
{
path: '',
component: EmployeeListComponent,
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Employee List Component สำหรับแสดงผลข้อมูล
ไปที่ D:/angular/demo/src/app/employee-list/employee-list.component.ts แก้ไข Code ดังนี้
import { Component, OnInit } from '@angular/core';
//นำเข้า function เชื่อมต่อ api จาก api.service
import { ApiService } from './../api.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
//สร้างตัวแปรสำหรับเก็บข้อมูลที่ดึงมาจาก API
employees : [];
//ใน constructor กำหนด ให้ apiService เป็นตัวแปรแบบ private และ เรียกใช้งาน ApiService
constructor(private apiService : ApiService) { }
ngOnInit() {
//เรียก function getData เมื่อ App เริ่มทำงาน
this.getData();
}
getData(){
// เรียก function findAll จาก apiService
this.apiService.findAll().subscribe((res) => {
//นำข้อมูลที่ได้เก็บไว้ที่ตัวแปร employees
this.employees = res
});
}
deleteEmployee(id:number){
// เรียก function delete จาก apiService ส่งค่า id เพิ่มลบข้อมูล
this.apiService.delete(id).subscribe(res => {
//เรียก function getData เพื่อแสดงข้อมูลล่าสุด
this.getData();
});
}
}
ไปที่ D:/angular/demo/src/app/employee-list/employee-list.component.html แก้ไข Code ดังนี้
<h3>Employees</h3>
<p>
<a [routerLink]="['/employee/create']" class="btn btn-success">Add</a>
</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td width="5%">#</td>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td width="10%">Edit</td>
<td width="10%">Delete</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees">
<td>{{ employee.id }}</td>
<td>{{ employee.first_name }}</td>
<td>{{ employee.last_name }}</td>
<td>{{ employee.email_address }}</td>
<td><a [routerLink]="['/employee', employee.id]" class="btn btn-primary">Edit</a></td>
<td><a (click) = "deleteEmployee(employee.id)" class="btn btn-danger">Delete</a>
</tr>
</tbody>
</table>
Employee Create Component สำหรับการเพิ่มข้อมูลใหม่
ไปที่ D:/angular/demo/src/app/employee-create/employee-create.component.ts แก้ไข Code ดังนี้
import { Component, OnInit } from '@angular/core';
import { ApiService } from './../api.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-employee-create',
templateUrl: './employee-create.component.html',
styleUrls: ['./employee-create.component.css']
})
export class EmployeeCreateComponent implements OnInit {
first_name : string;
last_name : string;
email : string;
constructor(private apiService : ApiService,private router : Router) { }
ngOnInit() {
}
onSubmit(){
let data = {
first_name : this.first_name,
last_name : this.last_name,
email_address : this.email
}
this.apiService.create(data).subscribe((res) => {
if(res){
this.router.navigate(['/employees']);
}
});
}
}
ไปที่ D:/angular/demo/src/app/employee-create/employee-create.component.html แก้ไข Code ดังนี้
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="first_name" [(ngModel)]="first_name" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="last_name" [(ngModel)]="last_name" >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" [(ngModel)]="email" >
</div>
<button type="submit" class="btn btn-primary">Save</button>
<a [routerLink]="['/employees']" class="btn btn-success">Cancel</a>
</form>
Employee Update Component สำหรับการแก้ไขข้อมูล
ไปที่ D:/angular/demo/src/app/employee-update/employee-update.component.ts แก้ไข Code ดังนี้
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from './../api.service';
@Component({
selector: 'app-employee-update',
templateUrl: './employee-update.component.html',
styleUrls: ['./employee-update.component.css']
})
export class EmployeeUpdateComponent implements OnInit {
first_name : string;
last_name : string;
email : string;
id : number;
constructor(private apiService : ApiService,private route: ActivatedRoute,private router: Router ) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.getEmployeeOne(params.id);
});
}
getEmployeeOne(id:number){
this.apiService.findOne(id).subscribe(res => {
this.first_name = res[0].first_name;
this.last_name = res[0].last_name;
this.email = res[0].email_address;
this.id = res[0].id;
});
}
updateData() {
let data = {
first_name : this.first_name,
last_name : this.last_name,
email_address : this.email
}
this.apiService.update(data,this.id).subscribe(res => {
if(res){
this.router.navigate(['employees']);
}
});
}
}
ไปที่ D:/angular/demo/src/app/employee-update/employee-update.component.html แก้ไข Code ดังนี้
<form (ngSubmit)="updateData()">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="first_name" [(ngModel)]="first_name" [value]="first_name" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="last_name" [(ngModel)]="last_name" [value]="last_name" >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" [(ngModel)]="email" [value]="email" >
</div>
<button type="submit" class="btn btn-primary">Save</button>
<a [routerLink]="['/employees']" class="btn btn-success">Cancel</a>
</form>
เมื่อแก้ไขไฟล์ทั้งหมดเรียบร้อยแล้วใช้คำสั่ง ng serve เพื่อดูผลการทำงานกันอีกครั้ง
เปิด Web Browser ไปที่ URL : http://localhost:4200
หากไม่มีอะไรผิดพลาด จะแสดงหน้าจอดังภาพ และ สามารถคลิกปุ่ม เพิ่ม / แก้ไข / ลบ ข้อมูลได้เลยครับ
ขอบคุณครับ