การพัฒนา Angular เพื่อ Call API จาก ASP.NET Core Web API

หลังจากที่เราได้สร้างโปรเจ็ค Angular with ASP.NET Core กันมาแล้ว บทความนี้เราจะมาต่อกันด้วยการที่ให้ Angular ไปเรียก API จาก ASP.NET Core แล้วจะให้มันใช้ ADO.NET ไปดึง ฐานข้อมูลมาจาก Azure Database แล้ว Return กลับไปเป็น Json นะครับ ส่งไปให้ Angular แสดงผลนะครับ

สิ่งที่จำเป็นก่อนเริ่มทำ ต้องไปทำตามบทความนี้ก่อนนะครับ

  1. คลิ๊กขวาที่ Controller แล้วเลือก Add => Controller

  1. เลือก API Controller - Empty แล้วกดปุ่ม Add

  1. ตั้งชื่อว่า ProductsController

2018-06-06_13-32-49

  1. เข้าไปที่ https://portal.azure.com ไปสร้าง SQL Database มา 1 ตัว (ตัวอย่างนี้ผมใช้ฐานข้อมูล Northwind)

  1. แก้ไขไฟล์ ProductsController.cs

เพิ่ม Using Namespace

using System.Data;
using System.Data.SqlClient;

เพิ่ม GetProducts เมททอดดังนี้

[HttpGet]
public IActionResult GetProducts()
{
    using (var con = new SqlConnection("Server=codebangkok.database.windows.net; Database=Northwind; User ID=xxx; Password=xxx"))
    {
        var com = con.CreateCommand();
        com.CommandText = "select ProductId, ProductName from Products";

        var products = new DataTable();
        var da = new SqlDataAdapter(com);
        da.Fill(products);
        return new JsonResult(products);
    }
}
  1. เข้าไปที่ Command Prompt ที่ Project Directory แล้วพิมพ์คำสั่ง
dotnet watch run

  1. เข้าไปที่เวป https://localhost:5001/api/products จะได้ข้อมูลดังนี้

  1. เปิด Command Prompt อีก 1 ตัว เข้าไปที่ Project Directory แล้วพิมพ์คำสั่ง

เข้าไปใน Client App Directory

cd ClientApp

ใช้ Angular สร้าง Product Class

ng g class Product

ใช้ Angular สร้าง Product Service

ng g service Product

  1. แก้ไขไฟล์ app.module.js

เพิ่ม Import ดังนี้

import { HttpClientModule } from '@angular/common/http'

ที่ @NgModule เพิ่ม Imports - HttpClientModule ดังนี้

imports: [
  BrowserModule,
  HttpClientModule
],

  1. แก้ไขไฟล์ product.ts
export class Product {
  productId: number;
  productName: string;
}

  1. แก้ไขไฟล์ product.service.ts

เพิ่ม Import ดังนี้

import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Product } from './product';

แก้ไข ProductService Class

export class ProductService {

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>("api/Products");
  }
}

  1. แก้ไขไฟล์ app.component.ts

เพิ่ม Import ดังนี้

import { ProductService } from './product.service';
import { Product } from './product';

แก้ไข AppComponent Class

export class AppComponent {
  products: Product[];

  constructor(private service: ProductService) {
    this.service.getProducts().subscribe(p => this.products = p);
  }
}

  1. แก้ไขไฟล์ app.compoent.html ดังนี้
<table border="1">
  <thead>
    <tr>
      <td>Id</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of products">
      <td>{{product.productId}}</td>
      <td>{{product.productName}}</td>
    </tr>
  </tbody>
</table>

  1. เปิด Browser แล้วเข้าไปที่ https://localhost:5001 ผลลัพธ์ที่ได้เป็นผลดังนี้

ติดตามบทความเกี่ยวกับ Angular ต่อไปได้ที่ CodeBangkok นะครับ


บริจาค (Donate) ด้วย Crypto Currency ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/angular-i223898871-s342278978.html?spm=a2o6z.10453683.17.3.77ba3002QFHWOq&mp=3