สวัสดีครับวันนี้เราจะมาสร้างเว็บแอปพลิเคชัน TO-DO List ด้วย ASP.NET Core + Angular + Angular Material กันครับ ก่อนอื่นมารู้จักกับ แอปพลิเคชัน TO-DO List กันก่อน มันคืออะไร มันก็คือ….แอปพลิเคชันที่มีไว้สำหรับจดโน้ตนั่นแหละครับ เราสามารถจดสิ่งที่เราจะต้องทำแล้วสามารถเลือกได้ว่าเราทำเสร็จแล้ว ตัวอย่างก็เช่น เวลาเราทำอาหาร 1 มื้อ เราก็ต้องวางแผนสิ่งที่เราจะต้องซื้อก่อนนั่นเอง
ส่วนโครงสร้างของเว็บแอปของเราก็จะตามภาพข้างล่าง โดยเราจะสร้าง API ด้วย ASP.NET Core 2.1 เก็บข้อมูลใน Sqlite และฝั่ง Client เราจะสร้างด้วย Angular + Angular Material

- Visual Studio 2017 Community Version
- .NET Core 2.1 SDK or later (รวมอยู่ใน Visual Studio 2017)
- Visual Studio Code
- Node JS
- Postman
มาเริ่มกันด้วย Web API ซึ่งเป็นส่วนของ Server ที่จะคอยรับ-ส่งข้อมูล จากฐานข้อมูลของเรา โดยเราจะสร้าง API จาก ASP.NET Core 2.1 และเก็บข้อมูลไว้ใน Sqlite
สร้างโปรเจค APS.NET Core Web Application – TodoApi เลือก ASP.NET Core 2.1, API


- Id จะถูกสร้างขึ้นอัตโนมัติโดย Database เมื่อ TodoItem ถูกสร้างขึ้น
- Name เป็นชื่อของ TodoItem จะเก็บเป็น string
- IsComplete เป็นสถานะของ TodoItem จะเก็บเป็น boolean (true, false)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
namespace TodoApi.Models | |
{ | |
public class TodoItem | |
{ | |
public long Id { get; set; } | |
public string Name { get; set; } | |
public bool IsComplete { get; set; } | |
} | |
} |
Install Microsoft.EntityFrameworkCore.Sqlite and Microsoft.EntityFrameworkCore.Design เปิด Command prompt แล้วชี้ไปที่โฟลเดอร์โปรเจคของเรา (ใน folder ที่มีไฟล์ TodoApi.csproj) Run command ข้างล่าง
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dotnet add package Microsoft.EntityFrameworkCore.Sqlite | |
dotnet add package Microsoft.EntityFrameworkCore.Design | |
dotnet restore |
สร้าง Clsas TodoContext และแทนที่ด้วย code ข้างล่าง โดย TodoContext จะทำหน้าที่เชื่อมระหว่าง TodoItem.cs และ Entity Framework
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using Microsoft.EntityFrameworkCore; | |
namespace TodoApi.Models | |
{ | |
public class TodoContext : DbContext | |
{ | |
public TodoContext(DbContextOptions<TodoContext> options) | |
: base(options) | |
{ | |
} | |
public DbSet<TodoItem> TodoItems { get; set; } | |
} | |
} |
เชื่อม DbContext กับ Database Sqlite โดยแทนที่ code ข้างล่างใน Startup.cs โดย code ส่วนที่ทำหน้าที่นั้นก็คือ services.AddDbContext<TodoContext>(opt => opt.UseSqlite(“Data Source=TodoList.db”)); โดย TodoList.db คือชื่อ Database ของเรานั่นเอง
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using Microsoft.AspNetCore.Builder; | |
using Microsoft.AspNetCore.Mvc; | |
using Microsoft.EntityFrameworkCore; | |
using Microsoft.Extensions.DependencyInjection; | |
using TodoApi.Models; | |
namespace TodoApi | |
{ | |
public class Startup | |
{ | |
public void ConfigureServices(IServiceCollection services) | |
{ | |
services.AddDbContext<TodoContext>(opt => | |
opt.UseSqlite("Data Source=TodoList.db")); | |
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); | |
} | |
public void Configure(IApplicationBuilder app) | |
{ | |
app.UseMvc(); | |
} | |
} | |
} |
สร้าง Sqlite Database
Initial Database และสร้าง Database จาก code ข้างล่าง โดยรันคำสั่งใน CMD (Command Prompt) ในโฟลเดอร์โปรเจคของเรา
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dotnet ef migrations add InitialCreate | |
dotnet ef database update |
สร้าง Controller
New Item -> Add New Item เลือก API Controller Class template ตั้งชื่อ class TodoController และแทนที่

API | Description | Request body | Response body |
---|---|---|---|
GET /api/todo | Get all to-do items | None | Array of to-do items |
GET /api/todo/{id} | Get an item by ID | None | To-do item |
POST /api/todo | Add a new item | To-do item | To-do item |
PUT /api/todo/{id} | Update an existing item | To-do item | None |
DELETE /api/todo/{id} | Delete an item | None | None |
ก่อนอื่นมาทำความรู้จักกับ Angular กันก่อน Angular เป็น Framework สำหรับสร้างแอปพลิเคชันในฝั่งไคลเอ็น โดยจะทำงานแบบ MVC/MVVM Framework โดยข้อดีของ Angular นั่นก็คือ มันเป็น Single Page Application (SPA) ซึ่งจะทำงานได้เร็วมาก และอีกทั้งเรายังสามารถพัฒนาได้หลายแพลตฟอร์มได้ เพราะฉะนั้นศึกษาไว้ก็ไม่เสียหายใช่ไหมครับ และเราจะตกแต่งหน้าตาเว็บแอปพลิเคชันของเราให้สวยสดงดงามได้ด้วย Angular Material โดย Angular Material นั้นจะมี Component มากมาย โดยที่เราจะนำมาใช้ในโปรเจคนี้ก็เช่น Textbox, Checkbox, Icon, Button เพื่อไม่ให้เป็นการเสียเวลา เรามาต่อกันเลยดีกว่า
Setup Development Environment
เปิด Command Prompt (CMD) ขึ้นมา เช็คว่าที่เครื่องเราได้ลง Node js รึยังโดย พิมพ์ node –v ถ้ามีแล้วก็จะขึ้นตามรูปข้างล่าง ถ้ายังไม่มีก็ให้ไปโหลด Node JS มา Install ไว้ที่เครื่อง
Install Angular CLI ซึ่งเป็นเครื่องมือแบบ command line interface ช่วยให้เราสามารถสร้างโปรเจค หรือเขียน Angular ได้ง่ายและเร็วขึ้น
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install –g @angular/cli |
Create Angular Project
เราจะมาสร้าง Angular Project ง่ายๆ ด้วยการใช้ Angular cli โดยเราจะตั้งชื่อแอปของเราว่า TodoListApp เมื่อเราพิมพ์ ng new ToListApp แล้วตัว cli ก็จะจัดการสร้างโปรเจคให้กับเรา โดยเราสามารถนั่งจิบกาแฟรอได้เลย
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ng new TodoListApp | |
mkdir TodoListApp | |
ng serve –open |
ส่วน ng serve –open ก็คือ คำสั่งสำหรับ run Angular App ของเรานั่นเอง โดย –open จะทำการ browseแอปพลิเคชันของเราให้อัตโนมัติแอปพลิเคชันแรกของเราหน้าตาก็จะประมาณนี้ เป็นเทพเพลทพื้นฐานที่ตัว cli สร้างขึ้นมาให้กับเรา

Step 1 Install Angular Material, Angular CDK and Angular Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install –save @angular/material @angular/cdk @angular/animations |
Step 2 Configure animations เพิ่ม code ข้างล่างในไฟล์ src\app\app.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; | |
@NgModule({ | |
… | |
imports: [BrowserAnimationsModule], | |
… | |
}) |
Step 3 Include a theme เพิ่ม code ข้างล่างในไฟล์ src\app\styles.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Step 5 Add Material Icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
ยินดีด้วย!! ตอนนี้เราก็มี To-do List Application ใช้กันแล้ว ส่วนรายละเอียดการสร้าง Component และการเรียก API ต่างๆ สามารถตามเข้าไปดูใน GitHub ได้นะครับ ถ้าเอามาเล่าในนี้เกรงว่าจะยาวเกินไป
ลองตามเข้าไปดู Code ต่อได้ที่
ASP.NET Core Web API TodoApi
Angular + Angular Material TodoListApp