AngularJS 2.0 From The Beginning - Http Module Part Two

I am here to continue the discussion around AngularJS 2.0. In my previous article, I have already discussed about the get method of http module and how to fetch data from a Web API in Angular 2.0. Now, in this article, we will discuss about http module or how to call Post method of external APIs in the Angular 2.0. In case you did not have a look at the previous articles of this series, go through the links mentioned below.

Http Post

Let’s imagine we received the username and password from a form the user submitted. We would call authenticate to log in the user. Once the user is logged in, we will proceed to store the token so we can include it in the following requests.

http.post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response>

The http.post signature above reads as follows. We need to provide a URL, a body, both strings, and then optionally an options object. In our example, we are passing the modified headers property. http.post returns an Observable, we use map to extract the JSON object from the response and subscribe. This will setup our stream as soon as it emits the result.

Differences between $http and angular/http

Angular 2 Http by default returns an Observable opposed to a Promise ($q module) in $http. This allows us to use more flexible and powerful RxJS operators, like switchMap (flatMapLatest in version 4), retry, buffer, debounce, merge or zip. By using Observables, we improve the readability and maintenance of our application, as they can respond gracefully to more complex scenarios involving multiple emitted values opposed to only a one-off single value.

Now, demonstrate the below concept. We first need to develop a Web API with POST method which accepts a model data from UI and stores it in the repository.

Now, for this, first we need to create a model class and then create the Controller.

Employee.cs (Employee Model Class)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SampleAPI.Models.Sample
{
public class Employee
{
public int Id { get; set; }
public string Code { get; set; }
public string Name { get; set; }
public DateTime DOB { get; set; }
public DateTime DOJ { get; set; }
public string Department { get; set; }
public string Designation { get; set; }
public double Salary { get; set; }
}
}

EmployeeController.cs

using SampleAPI.Models.Sample;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
namespace SampleAPI.Controllers.Sample
{
public class EmployeeController : ApiController
{
static List<Employee> lstData = new List<Employee>();
public EmployeeController()
{
}
[ResponseType(typeof(Employee))]
[HttpGet]
[Route("Employee/GetEmployee")]
public IHttpActionResult GetEmployee()
{
if (lstData.Count == 0)
this.FetchEmployee();
return Ok(lstData);
}
[ResponseType(typeof(Employee))]
[HttpPost]
[Route("Employee/AddEmployee")]
public IHttpActionResult AddEmployee(Employee objEmp)
{
return Ok(this.SaveEmployee(objEmp));
}
private List<Employee> FetchEmployee()
{
Employee objEmp = new Employee() { };
objEmp.Id = 1;
objEmp.Code = "A001";
objEmp.Name = "RABIN";
objEmp.DOB = Convert.ToDateTime("10-06-1980");
objEmp.DOJ = Convert.ToDateTime("01-09-2006");
objEmp.Department = "ACCOUNTS";
objEmp.Designation = "CLERK";
objEmp.Salary = 15000.00;
lstData.Add(objEmp);
objEmp = new Employee() { };
objEmp.Id = 2;
objEmp.Code = "A002";
objEmp.Name = "SUJIT";
objEmp.DOB = Convert.ToDateTime("12-22-1986");
objEmp.DOJ = Convert.ToDateTime("04-15-2010");
objEmp.Department = "SALES";
objEmp.Designation = "MANAGER";
objEmp.Salary = 35000.00;
lstData.Add(objEmp);
objEmp = new Employee() { };
objEmp.Id = 3;
objEmp.Code = "A003";
objEmp.Name = "KAMALESH";
objEmp.DOB = Convert.ToDateTime("03-22-1982");
objEmp.DOJ = Convert.ToDateTime("07-15-2006");
objEmp.Department = "ACCOUNTS";
objEmp.Designation = "CLERK";
objEmp.Salary = 16000.00;
lstData.Add(objEmp);
return lstData;
}
private bool SaveEmployee(Employee objEmp)
{
objEmp.Id = (lstData.OrderByDescending(s => s.Id).FirstOrDefault()).Id + 1;
lstData.Add(objEmp);
return true;
}
}
}

In the Web API Controller, we initially stored three records. And after it, when user fills up the employee form and clicks on Submit button, that particular record will be appened along with these three records.

app.component.employee.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'employee-add',
templateUrl: 'app.component.employeeadd.html'
})
export class AddEmployeeComponent implements OnInit {
private _model: any = {};
@Output() private onHide: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(private http: Http) {
}
ngOnInit(): void {
}
private onCancel(): void {
this._model = {};
this.onHide.emit(false);
}
private submit(): void {
if (this.validate()) {
let self = this;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post("http://localhost:5201/employee/AddEmployee", this._model, { headers: headers })
.subscribe((res: Response) => {
self.onCancel();
});
}
}
private reset(): void {
this._model = {};
}
private validate(): boolean {
let status: boolean = true;
if (typeof (this._model.code) === "undefined") {
alert('Alias is Blank');
status = false;
return;
}
else if (typeof (this._model.name) === "undefined") {
alert('Name is Blank');
status = false;
return;
}
else if (typeof (this._model.dob) === "undefined") {
alert('dob is Blank');
status = false;
return;
}
else if (typeof (this._model.doj) === "undefined") {
alert('DOJ is Blank');
status = false;
return;
}
else if (typeof (this._model.department) === "undefined") {
alert('Department is Blank');
status = false;
return;
}
else if (typeof (this._model.designation) === "undefined") {
alert('Designation is Blank');
status = false;
return;
}
else if (typeof (this._model.salary) === "undefined") {
alert('Salary is Blank');
status = false;
return;
}
return status;
}
}

app.component.employee.html

<div class="panel panel-default">
<h4>Provide Employee Details</h4>
<table class="table" style="width:60%;">
<tr>
<td>Employee Code</td>
<td><input type="text" [(ngModel)]="_model.code" /></td>
</tr>
<tr>
<td>Employee Name</td>
<td><input type="text" [(ngModel)]="_model.name" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="date" [(ngModel)]="_model.dob" /></td>
</tr>
<tr>
<td>Date of Join</td>
<td><input type="date" [(ngModel)]="_model.doj" /></td>
</tr>
<tr>
<td>Department</td>
<td><input type="text" [(ngModel)]="_model.department" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type="text" [(ngModel)]="_model.designation" /></td>
</tr>
<tr>
<td>Salary</td>
<td><input type="number" [(ngModel)]="_model.salary" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Submit" (click)="submit()" />
<input type="button" value="Cancel" (click)="onCancel()" />
</td>
</tr>
</table>
</div>

app.component.homepage.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'home-page',
templateUrl: 'app.component.homepage.html'
})
export class HomePageComponent implements OnInit {
private data: Array<any> = [];
private showDetails: boolean = true;
private showEmployee: boolean = false;
constructor(private http: Http) {
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
debugger;
this.loadData();
}
private loadData(): void {
let self = this;
this.http.request('http://localhost:5201/employee/getemployee')
.subscribe((res: Response) => {
debugger;
self.data = res.json();
});
}
private addEmployee(): void {
this.showDetails = false;
this.showEmployee = true;
}
private onHide(args: boolean): void {
this.showDetails = !args;
this.showEmployee = args;
this.loadData();
}
}

app.component.homepage.html

<div>
<h3>HTTP Module Sample - Add and Fetch Data</h3>
<div class="panel panel-default" *ngIf="showDetails">
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Srl No</th>
<th>Alias</th>
<th>Employee Name</th>
<th>Date of Birth</th>
<th>Join Date</th>
<th>Department</th>
<th>Designation</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td>{{item.Id}}</td>
<td>{{item.Code}}</td>
<td>{{item.Name}}</td>
<td>{{item.DOB | date :'shortDate'}}</td>
<td>{{item.DOJ | date :'mediumDate'}}</td>
<td>{{item.Department}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Salary |currency:'INR':true}}</td>
</tr>
</tbody>
</table>
<p>
<button class="btn btn-primary" (click)="addEmployee()">
Add Employee
</button>
</p>
</div>
</div>
<div class="panel panel-default" *ngIf="showEmployee">
<employee-add (onHide)="onHide($event);"></employee-add>
</div>
</div>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpModule } from '@angular/http';
import { HomePageComponent } from './src/app.component.homepage';
import { AddEmployeeComponent } from './src/app.component.employeeadd';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [HomePageComponent, AddEmployeeComponent],
bootstrap: [HomePageComponent]
})
export class AppModule { }

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular2 - HTTP Module (POST & GET) </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../resources/style/bootstrap.css" rel="stylesheet" />
<link href="../resources/style/style1.css" rel="stylesheet" />
<script src="../resources/js/jquery-2.1.1.js"></script>
<script src="../resources/js/bootstrap.js"></script>
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body>
<home-page>Loading</home-page>
</body>
</html>

Now, run the code in browser and you will see the below result.