අපි කලින් ලිපි 2න් කතා කලා fontend එක සහ backend එක Design කරගන්න විදිය. මේ ලිපියෙන් කතා කරන්නේ මේ වෙන වෙනම හදා ගත්ත fontend එකයි Backend එකයි එකට Connect කරගන්නේ කොහොමද කියලා. කලින් ලිපි 2 බැලුවේ නැත්නම් මෙතනින් බලන්න
මුලින්ම frontend කියන folder එක ඇතුලට ගිහින් එතනින් command prompt එකක් open කරන්න. දැන් අපි කරන්න හදන්නේ font එකේ පොඩි වෙනස්කම් කිහිපයක් කරන්න.
cd frontend
දැන් අපි අලුතින් Issue Service එකක් හදා ගන්න ඕන. ඒ service එක හරහා තමයි අපි Backend එකෙන් අපිට ඕන Data ගන්න සහ දාන්න යන්නේ. මුලින්ම ඒක මේ විදියට Generate කරගමු.
ng g s services/Issue
මේ විදියට issue service එක generate කරගත්තාම services කියලා folder එකක් ඇතුලේ issue.service.ts කියන file එක generate වෙනවා. දැන් අපි මේ issue service එක app.module.ts එකට import කරගන්න ඕන.
import { IssueService } from './services/issue.service';
ඒ වගේම providers array එක ඇතුලටත් මේක දාගන්න.
providers: [IssueService]
මේකෙත් මේ issue Service එක අපේ components ඇතුලේ use කරන්න පුළුවන් වෙනවා.
Implementing IssueService
කලින් කිවුවා වගේ මේ issue Service එකේ අරමුණ තමයි backend එකත් එක්ක ගනුදෙනු කිරීම. ඒකට අපි http requests යොදා ගන්නවා. ඒක නිසා මේ විදියට මුලින්ම issue.service.ts file එකට httpClient එක import කරගන්න.
import { HttpClient } from '@angular/common/http';
ඒ වගේම Constructor එකට මේ http service එක inject කරගන්න මේ විදියට
constructor(private http: HttpClient) {}
Retrieving Issues
අපි දැන් බලමු කොහොමද Database එකේ save වෙලා තියෙන issue එකක් හෝ කිහිපයක් Backend එක හරහා Retrieve කරන්නේ කොහොමද කියලා.
මේකෙ වර්ග 2ක් තියෙනවා. ඒ කියන්නේ අපි issue ID එකක් දුන්නාම අදාල issue එක ගන්න එකයි තියෙන ඔක්කොම Issues ටික ගන්න එකයි. මේ method 2 හදා ගන්න විදිය බලමු.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class IssueService {
uri = 'http://localhost:4000';
constructor(private http: HttpClient) {
}
getIssues() {
return this.http.get(${this.uri}/issues);
}
getIssueById(id) {
return this.http.get(${this.uri}/issues/${id});
}
}
මේකෙදි අපි කරන්නේ http://localhost:4000/issues කියන backend එක response කරන url එකට get request එකක් යවලා json object එකක් විදියට result එකක් ගන්නවා. getIssueById method එකෙන් කරන්නෙත් ඒ වගේම issue id එක දුන්නම අදාල issue එක josn object එකක් විදියට එළියට ගන්නවා.
Adding Issues
මේකෙදි අපි post request එකක් විදියට අපිට add කරන්න ඕන issue එකේ Data ටික යවන්න ඕන. ඒක කරන්නේ මේ විදියට..
addIssue(title, responsible, description, severity) {
const issue = {
title: title,
responsible: responsible,
description: description,
severity: severity
};
return this.http.post(${this.uri}/issues/add, issue);
}
ඔයාලට පේනවා ඇති මෙතනදි අපි post request එකත් එක්ක issue කියලා අපි අලුතින් හදා ගත්ත object එකත් යවනවා. මේ request එක යැවුවට පස්සේ එතනින් එහාට Backend එක තමයි Database operations handle කරගන්නේ. මතක ඇති අපි කලින් මේ methods ටික backend එකේ implement කලා.
Updating Issues
කලින් කරපු addIssue එක වගේම post request එකක් යවනවා මේකෙත් Update වෙන්න ඕන dataත් එක්ක.
updateIssue(id, title, responsible, description, severity, status) {
const issue = {
title: title,
responsible: responsible,
description: description,
severity: severity,
status: status
};
return this.http.post(${this.uri}/issues/update/${id}, issue);
}
Deleting Issues
මේකෙදි අපි කරන්නේ අපිට Delete කරන්න ඕන issue එකේ id එක get request එකක් විදියට යනවනවා backend එකට
deleteIssue(id) {
return this.http.get(${this.uri}/issues/delete/${id});
}
මේ පහලින් තියෙන්නේ සම්පූර්ණ issue service file එකේ තියෙන code එක.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class IssueService {
uri = 'http://localhost:4000';
constructor(private http: HttpClient) {
}
addIssue(title, responsible, description, severity) {
const issue = {
title: title,
responsible: responsible,
description: description,
severity: severity
};
return this.http.post(${this.uri}/issues/add, issue);
}
getIssues() {
return this.http.get(${this.uri}/issues);
}
getIssueById(id) {
return this.http.get(${this.uri}/issues/${id});
}
updateIssue(id, title, responsible, description, severity, status) {
const issue = {
title: title,
responsible: responsible,
description: description,
severity: severity,
status: status
};
return this.http.post(${this.uri}/issues/update/${id}, issue);
}
deleteIssue(id) {
return this.http.get(${this.uri}/issues/delete/${id});
}
}
Injecting The Service
දැන් කරන්න තියෙන්නේ අපි හදපු issue Service එක inject කරගන්න එක. ඒකට අපි හදපු හැම component එකේම (list.component.ts, edit.component.ts and create.component.ts) මේ විදියට දාගෙන යන්න.
import { IssueService } from '../../services/issue.service';
ඒ වගේම මේ විදියට dependency injection එකක් කරන්නත් ඕන
constructor(private issueService: IssueService, private router: Router) { }
හැම component එකේම මේ විදියට හදා ගත්තාම අපේ components Design කරගන්න එකේ මූලික පියවර ඉවරයි.
අපි මේ ලිපියෙදි ඉගෙන ගත්තේ angular service එකක් හරහා backend එකත් එක්ක fontend එක connect කරන්නේ කොහොමද කියලා. ඊළඟ ලිපියෙන් අපි කතා කරමු front-end එක complete කරගන්නේ කොහොමද කියලා. මේ දක්වා මොනවා හරි අවුලක් තිබුණොත් comment එකක් දාන්න.
