1: Create a New Application
เริ่มสร้างโปรเจคด้วยคำสั่ง ionic start ionic4-angular7-crud ใน command line จะได้โฟลเดอร์ของโปรเจค
2: Install Material and CDK
ติดตั้งสิ่งที่จำเป็นในการใช้งานลงไปในโปรเจค โดย
- พิมพ์คำสั่งใน command line
ng add @angular/material
- import Module ใน app.module.ts
import {
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule } from "@angular/material";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
- register all module in @ngModule
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule,
DragDropModule,
ScrollingModule,
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatTableModule,
MatIconModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule
],
3: Create RESTful API Service
REST ย่อมาจาก Representational State Transfer เป็นรูปแบบหนึ่งในการออกแบบ open web technology เป็นการทำให้ข้อมูลอยู่ในรูปแบบของ resource ส่วนการกระทำต่าง ๆ เป็นไปตาม HTTP Method (GET, POST, PUT, DELETE) และทำงานแบบ Stateless ทำให้สามารถสามารถพัฒนาได้ง่ายเนื่องจากอยู่บนมาตรฐาน HTTP และมีประสิทธิภาพในการทำงานที่ดี
- import module
- สร้าง class Product
- generate service ด้วยคำสั่ง ng g service api ใน command line
- กำหนด constant ใน src/app/api.service.ts
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "/api/v1/products";
- สร้างฟังก์ชันในการทำงาน 4 ฟังก์ชัน ได้แก่ การเพิ่มสินค้า การลบสินค้า การเรียกข้อมูลมาแสดง และ การอัพเดทค่าเมื่อมีการแก้ไข โดยใช้ id เป็นตัวกำหนด
4: Modify Tabs Page
- สร้าง tab Details ด้วยคำสั่ง ionic g page details
- แก้ไขหน้า tab1 tab2 tab3 เดิมที่มีอยู่เป็น Home Edit Add และแก้ไข code ภายในให้เรียบร้อย
- import หน้าต่างๆมาที่ tabs และกำหนด router ในการ route ไปยังหน้าการใช้งานต่างๆ โดยกำหนดให้หน้าแรกเป็นหน้า Home
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'add',
children: [
{
path: '',
loadChildren: '../add/add.module#AddPageModule'
}
]
},
{
path: ':id',
children: [
{
path: '',
loadChildren: '../edit/edit.module#EditPageModule'
}
]
},
{
path: ':id',
children: [
{
path: '',
loadChildren: '../details/details.module#DetailsPageModule'
}
]
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
- สร้าง html สำหรับแสดงผลหน้าหลัก
