Angular 4 + Spring Boot CRUD ExampleAngular 4 + Spring Boot CRUD Example
Angular 4 through Angular-CLI(command line interface) is becoming popular and with spring boot lot of projects started fresh developments and started their migrations to these technologies.
Table of Contents
What are we going to achieve:
1. Angular 4 UI
2. Spring boot rest API
3. CRUD(Create,read,update,delete) Operations.
Requirements:
1. NPM should be installed.
2. Angular-CLI should be installed.
3. Spring STS for spring boot application development. (Eclipse is fine, but still spring sts make our job very easy!).
Module & Functionality:
Affiliate Network is the module and it will have basically
- affiliate network name,
- shop name identity,
- shop home url and
- shop home url affiliate link.
Functionality covered:
1. Inserting affiliate network pojo.
2. Fetching
3. Edit
4. Delete
5. Search
Angular JS Code snippets:
1. Module
2. Routing Module
3. Component
affiliate-urls.module.ts:
[html]
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { CommonModule } from ‘@angular/common’;
import { AffiliateUrlsRouterModule } from ‘./affiliate-urls.routing.module’;
import { AffiliateUrlsComponent } from ‘./affiliate-urls.component’;
import { AffiliateUrlAddEditComponent } from ‘./affiliate-url-add-edit/affiliate-url-add-edit.component’;
import {DataTableModule} from “angular2-datatable”;
@NgModule({
imports:[FormsModule,CommonModule,AffiliateUrlsRouterModule,DataTableModule],
declarations:[AffiliateUrlAddEditComponent,AffiliateUrlsComponent],
providers:[]
})
export class AffiliateUrlsModule{
}
[/html]
affiliate-urls.routing.module.ts:
[html]
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { AffiliateUrlsComponent } from ‘./affiliate-urls.component’;
import { AffiliateUrlAddEditComponent } from ‘./affiliate-url-add-edit/affiliate-url-add-edit.component’;
const routes: Routes =[
{
path:’add-affiliate-urls’,
component:AffiliateUrlAddEditComponent,
},
{
path:’urls’,
component:AffiliateUrlsComponent
},
{
path:’add-affiliate-urls/:affiliate-url-id’,
component:AffiliateUrlAddEditComponent
}
];
@NgModule({
imports:[RouterModule.forChild(routes)],
exports:[RouterModule]
})
export class AffiliateUrlsRouterModule{
}
[/html]
affiliate-urls.component.ts:
[html]
import { Component,NgZone } from ‘@angular/core’;
import { AffiliateUrl } from ‘./../../shared/models/affiliate_url’;
import { User } from ‘./../../shared/models/user’;
import { AffiliateUrlService } from ‘./../../shared/services/affiliate_url.service’;
import { UserService } from ‘./../../shared/services/user.service’;
@Component({
selector:’app-affiliate-url’,
templateUrl:’./affiliate-urls.component.html’,
styleUrls:[‘./affiliate-urls.component.css’]
})
export class AffiliateUrlsComponent {
affiliateUrls:AffiliateUrl[];
user:User;
affiliateUrlCD:AffiliateUrl;
searchParamAffiliateUrl:AffiliateUrl = new AffiliateUrl();
constructor(private ngZone: NgZone,private affiliateUrlService: AffiliateUrlService, private userService: UserService){
// I just want to enable this functionality only for the logged in users. you can comment if not needed.
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user => {
// logic to take the all the values
this.affiliateUrlService.getAllAffiliateUrls().subscribe(
affiliateUrls => {
this.affiliateUrls = JSON.parse(JSON.parse(JSON.stringify(affiliateUrls))._body);
}, error => console.log(error));
},
error => console.log(error));
}
deleteConfirm(name:string,affiliateUrlId:number){
if(confirm(“Are you sure to delete “+name)) {
// I just want to enable this functionality only for the logged in users. you can comment if not needed.
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user => {
this.affiliateUrlService.deleteById(affiliateUrlId).subscribe(
affiliateUrl => {
// if deletion is success
console.log(“Deletion success!”+affiliateUrlId);
/*
this.ngZone.run(()=>{
console.log(“ngzone called inside delete”);
this.affiliateUrls = this.affiliateUrls;
});
*/
},
error => console.log(error));
},
error => console.log(error));
}
}
onSearch(){
console.log(“search button clicked”);
console.log(this.searchParamAffiliateUrl.shop_home_url);
console.log(this.searchParamAffiliateUrl.affiliate_network_name);
this.searchParamAffiliateUrl.affiliate_shop_identity = “test”;
this.searchParamAffiliateUrl.shop_home_affiliate_url = “test”;
// I just want to enable this functionality only for the logged in users. you can comment if not needed.
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user =>
{
this.affiliateUrlService.searchByParams(this.searchParamAffiliateUrl).subscribe(
affiliateUrls =>
{
this.affiliateUrls = JSON.parse(JSON.parse(JSON.stringify(affiliateUrls))._body)
},
error => console.log(error));
}, error => console.log(error));
}
}
[/html]
affiliate-urls.component.html:
[html]
<div class=”container”>
<div class=”col-xs-12 col-md-offset-2″>
<div class=”card”>
<div class=”card-block”>
<div class=”text-center”>
<h4>Affiliate Url List</h4>
</div>
</div>
<form (ngSubmit)=”onSearch()” #searchAffiliateForm=”ngForm”>
<div class=”row”>
<div class=”offset-md-1 col-md-5″>
<div class=”form-group”>
<label for=”affiliateNetworkNameSrch”>Affiliate Network</label>
<select name=”affiliateNetworkNameSrch” id=”affiliateNetworkNameSrch” class=”form-control” ngControl=”affiliateNetworkNameSrch” [(ngModel)]=”searchParamAffiliateUrl.affiliate_network_name”>
<option value=”PAYOOM”>Payoom</option>
<option value=”DGPERFORM”>Dgperform</option>
</select>
</div>
</div>
<div class=”col-md-5 offset-md-right-1″>
<div class=”form-group”>
<label for=”shopHomeUrlSrch”>Home Url (Without https/http)</label>
<input type=”text” id=”shopHomeUrlSrch” name=”shopHomeUrlSrch” class=”form-control” ngControl=”shopHomeUrlSrch” [(ngModel)]=”searchParamAffiliateUrl.shop_home_url”>
</div>
</div>
<div class=”offset-md-1 col-md-10 offset-md-right-1″>
<button type=”submit” value=”Search” class=”btn btn-info btn-block”>Search</button>
</div>
</div>
</form>
<div class=”mb-5″></div>
</div>
<div class=”mt-5″></div>
<table class=”table table-striped” [mfData]=”affiliateUrls” #mf=”mfDataTable” [mfRowsOnPage]=”10″ >
<thead class=”thead-inverse”>
<tr>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”affiliate_network_name”>Affiliate Network</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”affiliate_shop_identity”>Store Identity</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”shop_home_url”>Shop Home URL</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”shop_home_affiliate_url”>Shop Home Affiliate Name</mfDefaultSorter>
</th>
<th scope=”row” style=”width:10%;”>
<mfDefaultSorter>Edit</mfDefaultSorter>
</th>
<th scope=”row” style=”width:10%;”>
<mfDefaultSorter>Delete</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor=”let affiliateUrl of mf.data”>
<td>{{affiliateUrl.affiliate_network_name}}</td>
<td>{{affiliateUrl.affiliate_shop_identity}}</td>
<td >{{affiliateUrl.shop_home_url}}</td>
<td>{{affiliateUrl.shop_home_affiliate_url | uppercase}}</td>
<td>
<button class=”btn” title=”edit” >
<a [routerLink]=”[‘/affiliate-urls/add-affiliate-urls’,affiliateUrl.affiliate_url_id]”>
<i class=”fa fa-edit”></i>
</a> </button>
</td>
<td>
<button class=”btn” title=”remove” (click)=”deleteConfirm(affiliateUrl.affiliate_shop_identity,affiliateUrl.affiliate_url_id)”>
<i class=”fa fa-trash-o”></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”6″>
<mfBootstrapPaginator [rowsOnPageSet]=”[10,50,100,500,1000]”></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
[/html]
affiliate-url-add-edit/affiliate-url-add-edit.component.ts:
[html]
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;
import { AffiliateUrl } from ‘../../../shared/models/affiliate_url’;
import { User } from ‘../../../shared/models/user’;
import { AffiliateUrlService } from ‘../../../shared/services/affiliate_url.service’;
import { UserService } from ‘../../../shared/services/user.service’;
@Component({
selector:’app-affiliate-url-add-edit’,
templateUrl:’./affiliate-url-add-edit.component.html’,
styleUrls:[‘./affiliate-url-add-edit.component.css’]
})
export class AffiliateUrlAddEditComponent{
newAffiliateUrl:AffiliateUrl = new AffiliateUrl();
user: User;
isNewAffiliateUrlAdded:boolean = false;
affiliateUrlId:number;
pageHeader:string = “Add Affiliate URL”;
buttonName:string = “Add Affiliate Url”;
responseTxt:string = “Affiliate URL Modified Successfully!”;
constructor(private activatedRoute:ActivatedRoute, private affiliateUrlService: AffiliateUrlService, private userService:UserService){
}
ngOnInit(){
this.affiliateUrlId = this.activatedRoute.snapshot.params[‘affiliate-url-id’]
// Edit flow begins
if( this.affiliateUrlId ){
this.pageHeader = “Update Affiliate URL”;
this.pageHeader = “Update Affiliate URL”;
this.buttonName = “Modify Affiliate URL”;
this.responseTxt = “Affiliate URL Modified Successfully!”;
// I just want to enable this functionality only for the logged in users. you can comment if not needed. this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe( user => {
this.affiliateUrlService.getByAffiliateId(this.affiliateUrlId).subscribe(
newAffiliateUrl =>
{
this.newAffiliateUrl = JSON.parse(JSON.parse(JSON.stringify(newAffiliateUrl))._body);
}, error => console.log(error)
);
}, error => console.log(error));
}
}
onAffiliateUrlAddEdit(){
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user => {
console.log(“till here fine”)
this.user = JSON.parse(JSON.parse(JSON.stringify(user))._body);
this.newAffiliateUrl.user = this.user;
this.affiliateUrlService.addEditAffiliateUrl(this.newAffiliateUrl).subscribe(
data => {
console.log(“till here also fine”)
this.isNewAffiliateUrlAdded = true;
this.newAffiliateUrl = new AffiliateUrl();
},
error => {
console.log(error);
}
)
}, error => {
console.log(error);
}
)
}
}
[/html]
affiliate-url-add-edit/affiliate-url-add-edit.component.html:
[html]
<div class=”container”>
<div class=”row” *ngIf=”!isNewAffiliateUrlAdded”>
<div class=”offset-md-2 col-md-8 offset-md-2″>
<div class=”card”>
<div class=”card-block”>
<div class=”text-center”>
<h4> {{pageHeader}} </h4>
</div>
</div>
</div>
<div class=”col-mt-3″></div>
<form *ngIf=”!isNewAffiliateUrlAdded” (ngSubmit)=”onAffiliateUrlAddEdit()” #addAffiliateUrlAddEdit=”ngForm”>
<div class=”form-group”>
<label for=”affiliateNetworkName” >Select Affiliate Network</label>
<select class=”form-control” id=”affiliateNetworkName” name=”affiliateNetworkName” [(ngModel)]=”newAffiliateUrl.affiliate_network_name” ngControl=”affiliateNetworkName”>
<option value=”PAYOOM”>Payoom</option>
<option value=”DGPERFORM”>Dgperform</option>
</select>
</div>
<div class=”form-group”>
<label for=”affiliateShopIdentity”> Shop Identity Texts (As per Affiliate Network(s))</label>
<input type=”text” class=”form-control” id=”affiliateShopIdentity” name=”affiliateShopIdentity” ngControl=”affiliateShopIdentity” [(ngModel)]=”newAffiliateUrl.affiliate_shop_identity”>
</div>
<div class=”form-group”>
<label for=”shopHomeUrl”>Shop/Site Home URL</label>
<input type=”text” class=”form-control” id=”shopHomeUrl” name=”shopHomeUrl” ngControl=”shopHomeUrl” [(ngModel)]=”newAffiliateUrl.shop_home_url”>
</div>
<div class=”form-group”>
<label for=”shopHomeAffiliateUrl”>Shop/Site Home Affiliate URL</label>
<input type=”text” class=”form-control” id=”shopHomeAffiliateUrl” name=”shopHomeAffiliateUrl” ngControl=”shopHomeAffiliateUrl” [(ngModel)]=”newAffiliateUrl.shop_home_affiliate_url”>
</div>
<button type=”submit” class=”btn btn-primary btn-block”>{{buttonName}}</button>
</form>
</div>
</div>
<div *ngIf=”isNewAffiliateUrlAdded”>
<div class=”card”>
<div class=”card-block”>
<div class=”text-center”>
<h4> {{responseTxt}}</h4>
</div>
</div>
</div>
</div>
</div>
[/html]
affiliate_url.service.ts:
[html]
import { Injectable } from ‘@angular/core’;
import { Http,Headers } from ‘@angular/http’;
import { AffiliateUrl } from ‘../models/affiliate_url’;
@Injectable()
export class AffiliateUrlService{
constructor(private http:Http){
}
addEditAffiliateUrl(affiliateUrl:AffiliateUrl){
let url=”http://localhost:8080/affiliate/addEditAffiliateUrl”;
let headers = new Headers({
“Content-Type”:”application/json”,
“Authorization”:”Bearer “+localStorage.getItem(“token”)
})
return this.http.post(url,JSON.stringify(affiliateUrl), {headers:headers})
}
getAllAffiliateUrls(){
let url = “http://localhost:8080/affiliate/getAllAffiliateUrls”;
let headers = new Headers({
“Content-Type”:”application/json”,
“Authorization”:”Bearer “+localStorage.getItem(“token”)
})
return this.http.get(url,{headers:headers});
}
deleteById(affiliateUrlId:number){
let url = “http://localhost:8080/affiliate/deleteAffiliateUrlById”;
let headers = new Headers ({
“Content-Type”:”application/json”,
“Authorization”:”Bearer “+localStorage.getItem(“token”)
});
console.log(this.http.post(url,JSON.stringify(affiliateUrlId),{headers:headers}));
return this.http.post(url,JSON.stringify(affiliateUrlId),{headers:headers});
}
getByAffiliateId(affiliateUrlId:number){
let url = “http://localhost:8080/affiliate/getAffiliateUrlById”;
let headers = new Headers({“Content-Type”:”application/json”,
“Authorization”:”Bearer “+localStorage.getItem(“token”) });
return this.http.post(url,JSON.stringify(affiliateUrlId),{headers:headers});
}
searchByParams(affiliateURL:AffiliateUrl){
console.log(“json value is ::”+JSON.stringify(affiliateURL));
let url = “http://localhost:8080/affiliate/searchByParams”;
let headers = new Headers({“Content-Type”:”application/json”,”Authorization”:”Bearer “+localStorage.getItem(“token”)});
console.log(“headers >> “+headers);
//console.log(“Before request pass updated 2:”+this.http.post(url, JSON.stringify(affiliateURL),{headers:headers}));
console.log(“I am here in searchbyparam()”);
console.log(this.http.post(url, JSON.stringify(affiliateURL),{headers:headers}));
return this.http.post(url, JSON.stringify(affiliateURL),{headers:headers});
}
}
[/html]
A
Apart from the above business logics I have added my entries in the main app module this way,
this below entry need to be added either in the main routing or layout kind of layout routing if any:
[html]
{ path: ‘affiliate-network-coupons’, loadChildren : ‘./affiliate-network-coupons/affiliate-network-coupons.module#AffiliateNetworkCouponsModule’},
{ path: ‘affiliate-urls’, loadChildren:’./affiliate-urls/affiliate-urls.module#AffiliateUrlsModule’},
[/html]
Spring Boot source codes:
AffiliateController.java:
[java]
package com.couponzcorner.controller;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.couponzcorner.models.AffiliateUrl;
import com.couponzcorner.service.AffiliateService;
@RestController
@RequestMapping(“/affiliate”)
public class AffiliateController {
@Autowired @Autowired private AffiliateService affiliateService; @RequestMapping(value=”/addEditAffiliateUrl”, method=RequestMethod.POST) public AffiliateUrl saveAffiliateUrl(@RequestBody AffiliateUrl affiliateUrl){ affiliateUrl.setCreated_date_time(new Date()); affiliateUrl.setLast_updated_date_time(new Date()); affiliateUrl.setCreated_user_id(String.valueOf(affiliateUrl.getUser().getUserId())); affiliateUrl.setLast_updated_user_id(String.valueOf(affiliateUrl.getUser().getUserId())); return affiliateService.saveNewAffiliateUrl(affiliateUrl);
}
@RequestMapping(value=”/getAllAffiliateUrls”, method=RequestMethod.GET)
public List<AffiliateUrl> getAllAffiliateUrls(){ return affiliateService.getAllAffiliateUrls();
}
@RequestMapping(value=”/getAffiliateUrlById”, method=RequestMethod.POST)
public AffiliateUrl getAffiliateUrlById(@RequestBody Long affiliateId){ return affiliateService.getByAffiliateId(affiliateId);
}
@RequestMapping(value=”/deleteAffiliateUrlById”, method=RequestMethod.POST)
public Long deleteAffiliateUrlById(@RequestBody Long affiliateId){ System.out.println(“Affiliate ID ::: “+affiliateId); //System.out.println(affiliateService.deleteByAffiliateId(affiliateId)); return affiliateService.deleteByAffiliateId(affiliateId);
}
@RequestMapping(value=”/searchByParams”, method=RequestMethod.POST)
public List<AffiliateUrl> searchByParams(@RequestBody AffiliateUrl affiliateUrl){ return affiliateService.searchByParams(affiliateUrl); }
}
[/java]
AffiliateService.java:
[java]package com.couponzcorner.service;
import java.util.List;
import com.couponzcorner.models.AffiliateUrl;
public interface AffiliateService {
public AffiliateUrl saveNewAffiliateUrl(AffiliateUrl affiliateUrl);
public List<AffiliateUrl> getAllAffiliateUrls();
public AffiliateUrl getByAffiliateId(Long affiliateId);
public Long deleteByAffiliateId(Long affiliateId);
public List<AffiliateUrl> searchByParams(AffiliateUrl affiliateUrl);}
[/java]
AffiliateServiceImpl.java:
[java]package com.couponzcorner.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.couponzcorner.dao.AffiliateDao;
import com.couponzcorner.models.AffiliateUrl;
@Servicepublic class AffiliateServiceImpl implements AffiliateService {
@Autowired private AffiliateDao affiliateDao;
@Override public AffiliateUrl saveNewAffiliateUrl(AffiliateUrl affiliateUrl) {
return affiliateDao.save(affiliateUrl);
}
@Override public List<AffiliateUrl> getAllAffiliateUrls() {
return affiliateDao.findAll();
}
@Override public AffiliateUrl getByAffiliateId(Long affiliateId) {
return affiliateDao.findByAffiliateId(affiliateId);
}
@Override public Long deleteByAffiliateId(Long affiliateId) {
return affiliateDao.deleteByAffiliateId(affiliateId);
}
@Override public List<AffiliateUrl> searchByParams(AffiliateUrl affiliateUrl) {
return affiliateDao.find(affiliateUrl.getAffiliate_network_name(), affiliateUrl.getShop_home_url());
}
}
[/java]
AffiliateDao.java:
[java]
package com.couponzcorner.dao;
import java.util.List;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.CrudRepository;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.couponzcorner.models.AffiliateUrl;
@Repositorypublic interface AffiliateDao extends CrudRepository<AffiliateUrl, Long> { static final long serialVersionUID = 5088960286161030648L;
public AffiliateUrl save(AffiliateUrl affiliateUrl);
public List<AffiliateUrl> findAll();
//(@Param(value = “affiliate_url_id”) Long affiliateId)
public AffiliateUrl findByAffiliateId(Long affiliateId);
@Transactional
public Long deleteByAffiliateId(Long affiliateId) ; @Query(nativeQuery=true,value=”select * from affiliate_url where affiliate_network_name = :affNtwrkName and shop_home_url = IFNULL(:homeUrl,”)”)
public List<AffiliateUrl> find(@Param(“affNtwrkName”) String affNetworkName, @Param(“homeUrl”) String shopHomeUrl); }
[/java]
AffiliateUrl.java:
[java]
package com.couponzcorner.models;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Transient;
import com.fasterxml.jackson.annotation.JsonInclude;
@Entitypublic class AffiliateUrl {
@Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name=”affiliate_url_id”) private Long affiliateId;
private String affiliate_network_name;
private String affiliate_shop_identity;
private String shop_home_url;
private String shop_home_affiliate_url;
private String created_user_id;
private String last_updated_user_id;
private Date created_date_time;
private Date last_updated_date_time;
@JsonInclude(JsonInclude.Include.NON_NULL)
@Transient
private User user;
public String getAffiliate_network_name() {
return affiliate_network_name;
}
public void setAffiliate_network_name(String affiliate_network_name) {
this.affiliate_network_name = affiliate_network_name;
}
public String getAffiliate_shop_identity() {
return affiliate_shop_identity;
}
public void setAffiliate_shop_identity(String affiliate_shop_identity) { this.affiliate_shop_identity = affiliate_shop_identity;
}
public String getShop_home_url() {
return shop_home_url;
}
public void setShop_home_url(String shop_home_url) {
this.shop_home_url = shop_home_url;
}
public String getShop_home_affiliate_url() {
return shop_home_affiliate_url;
}
public void setShop_home_affiliate_url(String shop_home_affiliate_url)
{
this.shop_home_affiliate_url = shop_home_affiliate_url;
}
public String getCreated_user_id() {
return created_user_id;
}
public void setCreated_user_id(String created_user_id) {
this.created_user_id = created_user_id;
}
public String getLast_updated_user_id() {
return last_updated_user_id;
}
public void setLast_updated_user_id(String last_updated_user_id) { this.last_updated_user_id = last_updated_user_id;
}
public Date getCreated_date_time() {
return created_date_time;
}
public void setCreated_date_time(Date created_date_time) {
this.created_date_time = created_date_time;
}
public Date getLast_updated_date_time() {
return last_updated_date_time;
}
public void setLast_updated_date_time(Date last_updated_date_time) { this.last_updated_date_time = last_updated_date_time;
}
public Long getAffiliate_url_id() {
return affiliateId;
}
public void setAffiliate_url_id(Long affiliate_url_id) {
this.affiliateId = affiliate_url_id;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
[/java]
Screenshots:
Editing:
