Subscribe On YouTube

DemoCode

Part 1: Front-end Project Setup And Routing

Part 2: Implementing The Back-end

Part 3: Connecting Front-end To Back-end

Part 4: Completing The User Interface



This is part three of the Angular 6 MEAN Stack Crash Course. In the first part of this series you’ve learned how to create the Angular 6 front-end application, set up the basic project structure by creating components and configuring the client-side routing.

In the second part we’ve covered the back-end project of the MEAN stack application. We’ve implemented a Node.js / Express server which is connected to a MongoDB database instance. We’ve implemented server end points accepting HTTP request for creating, updating, deleting, and retrieving issue data.

If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!



In this part we’ll now implement an Angular service class in our front-end project which is used to connected to the back-end. This service is then used in the various components of our front-end application. Implementing an Angular service for accessing the back-end helps us to keep our code DRY by encapsulating the logic which is needed for accessing the REST back-end in one single class.

Let’s again take a quick look at the MEAN stack overview:

Adding A Service

Adding a service to the Angular project is easy by using Angular CLI again. First change into the frontend project folder

$ cd frontend

Then execute the following Angular CLI command within that folder:

$ ng g s Issue

Executing this command is adding a new file issue.service.ts to the application with a new default service implementation included. This command is also making sure that this new service class is imported in app.module.ts:

import { IssueService } from './issue.service';

and added to the array which is assigned to the providers property of the @NgModule decorator:

providers: [IssueService]

This is needed to be able to use IssueService in the component’s of our application.

Implementing IssueService

Let’s start to implement the service class. Because the service should be able to access the back-end by sending HTTP request we first need to include Angular’s HttpClient in issue.service.ts by adding the following import statement:

import { HttpClient } from '@angular/common/http';

Then make sure to inject HttpClient into the constructor of the service class:

constructor(private http: HttpClient) {}

Retrieving Issues

The service should contain service methods to retrieve issue data from the back-end:

a method for retrieving all available issues

a method for retrieving a single issue entry by ID

Let’s add methods getIssues and getIssueById in the following way to class IssueService:

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}`); } }

By using the HttpClient instance available via http the complete list of issues is retrieved by executing:

this.http.get(`${this.uri}/issues`);

Herewith we’re sending an HTTP GET request to the /issues end point of back-end server. The list of issues is retrieved from the MongoDB database and then returned in JSON format.

The getIssueById method is working in the same way. In addition it accepts a parameter (the ID of the issue which should be retrieved) and is handing over the parameter value to the endpoint /issues/:id.

Adding Issues

For adding new issues the addIssue service method is added:

addIssue(title, responsible, description, severity) { const issue = { title: title, responsible: responsible, description: description, severity: severity }; return this.http.post(`${this.uri}/issues/add`, issue); }

This method is accepting four parameters (title, responsible, description and severity). With the values available in those parameter a new issue object is created. By using the http.post method a HTTP POST request is initiated to end point /issues/add and the new issue object is passed into the request’s body data.

Updating Issues

Tp update existing issues we need to send a POST request to /issues/update/${id} and make sure to pass the updated issue object as body 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

Providing a service method for deleting issues is also straight forward:

deleteIssue(id) { return this.http.get(`${this.uri}/issues/delete/${id}`); }

In the following listing you can find the complete code of file issue.service.ts once again:

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

Because the three components which have been created in our Angular application already should use the service to access the back-end we need to inject IssueServices in ListComponent, EditComponent and CreateComponent. First of all add the following import statements to files list.component.ts, edit.component.ts and create.component.ts.

import { IssueService } from '../../issue.service';

Then we can use dependency injection to make an instance of the service class available within our components:

constructor(private issueService: IssueService, private router: Router) { }

What’s Next

Now that we’ve created a connection between back- and front-end by implementing a data service in our Angular application we’re able to further complete the front-end implementation in the next part.

ONLINE COURSE: Angular & NodeJS - The MEAN Stack Guide Check out the great online course Angular & NodeJS – The MEAN Stack Guide with thousands of students already enrolled: Angular & NodeJS – The MEAN Stack Guide Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

Connect any Angular Frontend with a NodeJS Backend

Use ExpressJS as a NodeJS Framework

Improve any Angular (+ NodeJS) application by adding Error Handling

Understand how Angular works and how it interacts with Backends

Use MongoDB with Mongoose to interact with Data on the Backend Go To Course