Let’s start to create the RESTful Http POST/GET/PUT/ DELETE API Calls using the
following steps.
1. CREATE
the app NgModule and import HttpClientModule with the help of '@angular/common/http'.
2. CREATE
CustomerComponent for GET, PUT, POST
and DELETE CALLS
3. CREATE
CustomerService - A RESTful APIs is used HttpClient
requests to GET, PUT, POST and DELETE data. All communication must be
stateless and cacheable.
4. Finally,
IMPORT the Customer Service in your
Customer Component and then call RESTful API methods as per your needs.
The following example -
app.module.ts –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';
@NgModule({
declarations: [
AppComponent,
CustomerComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{ path: 'customer-link', component: CustomerComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
customer.component.ts -
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {CustomerService} from '../api/apiservice.service';//
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
public postData;
public customers;
public baseURL ="http://localhost:55965/";
//public customerModel;
constructor( private _http: HttpClient, private _service: CustomerService) { }
ngOnInit() {
//Get Customer Load
this._service.getCustomer(this.baseURL +"api/Values/GetCustomer")
.subscribe(data => {
this.customers = data;
//console.log(this.customers);
});
//Get Cutomer
model.
//
this._service.getCustomerModel(this.baseURL
+"api/Values/GetCustomerData")
// .subscribe(data => {
// this.customerModel = data
// //console.log(this.customerModel);
// });
}
//Add Customer Action
public addCustomer(){
//Simple customer object is used for
post the data using RestFul API Post Call.
var customer = { Id:"11", name :"Anil", country: "India" }
this._service.addCustomer(this.baseURL +"api/Values/PostEmployee", customer)
.subscribe(data => {
this.postData = data;
//console.log(this.postData);
alert(JSON.stringify(this.postData));
});
}
}
customer.component.html –
<p>
Customer List
</p>
<table>
<th>Id</th> <th>Name</th> <th> Country</th> <th>Actions</th>
<tr *ngFor="let lst of customers; let i =
index" border="1">
<td>{{i+1}}</td><td>{{lst.name}}</td><td>{{lst.country}}</td> <td>Edit</td>
</tr>
</table>
<br/>
<form id="addCustomerForm" name="addCustomerForm">
Name - <input type="text"><br/>
Contry - <input type="text"><br/>
<button type="submit" class="btn
btn-primary" (click)="addCustomer()"> Add Customer - POST REST API Call</button>
</form>
apiservice.service.ts -
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CustomPromisify } from 'util';
import { observable } from 'rxjs';
import { catchError, map } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class CustomerService {
public httpOptions : any;
constructor(private _http : HttpClient) {
//Http Headers Options
this.httpOptions = {
headers: new HttpHeaders(
{ 'Content-Type': 'application/json;
charset=utf-8',
'BrowserToken' : 'auth_Token'})
}
}
//Get Customer API CALL
public getCustomer(baseUrl : string) {
return this._http.get(baseUrl);
};
//Get Customer Model
public getCustomerModel(baseUrl : string) {
return this._http.get(baseUrl);
};
//Add Customer API call.
public addCustomer (baseUrl : string, customer :any){
return this._http.post(baseUrl, customer, this.httpOptions);
}
}
apiservice.service.spec.ts –
import { TestBed, inject } from '@angular/core/testing';
import { CustomerService } from './apiservice.service';
describe('CustomerService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [CustomerService]
});
});
it('should be created', inject([CustomerService], (service: CustomerService) => {
expect(service).toBeTruthy();
}));
});
The RESTful APIs example –
using
System;
using
System.Collections.Generic;
using
Microsoft.AspNetCore.Mvc;
using
Newtonsoft.Json;
namespace
CoreAPI.Controllers
{
[Produces("application/json")]
[Route("api/Values")]
public class ValuesController
: Controller
{
// GET api/values
[HttpGet]
[Route("GetCustomer")]
public
IActionResult GetCustomer()
{
List<Customer> cust = new
List<Customer>();
cust.Add(new
Customer { Id = "1", name = "Anil
Bloggs1", country = "India" });
cust.Add(new
Customer { Id = "2", name = "Anil
Bloggs2", country = "India" });
cust.Add(new
Customer { Id = "3", name = "Anil
Bloggs3", country = "India" });
cust.Add(new
Customer { Id = "4", name = "Anil
Bloggs4", country = "India" });
return
Json(cust);
}
[HttpGet]
[Route("GetCustomerData")]
public
IActionResult GetCustomerData()
{
Customer cust = new
Customer();
cust.name = "Anil";
return
Json(cust);
}
// POST api/values
[HttpPost]
[Route("PostEmployee")]
//public IActionResult
Post([FromBody]Newtonsoft.Json.Linq.JObject customer) - Way 1
//public IActionResult
Post([FromBody]dynamic customer) - Way 2
public
IActionResult PostEmployee([FromBody]Object customer)
{
//if :
[FromBody]Newtonsoft.Json.Linq.JObject customer - Way 1
//var obj = JsonConvert.DeserializeObject<Customer>(customer.ToString());
//if [FromBody]dynamic
customer - Way 2
//var obj =
JsonConvert.DeserializeObject<Customer>(customer.ToString());
//if [FromBody]Object
customer - - Way 3
var
obj = JsonConvert.DeserializeObject<Customer>(customer.ToString());
//TODO your business
logic - insert in the database.
return
Json(obj);
}
}
//Customer property class
public class Customer
{
public string
Id { get; set; }
public string
name { get; set; }
public string
country { get; set; }
}
}
Let’s explore in
detail – Angular 6 and Angular 7