Angular
Posted By Sebastian

Angular 6 – MEAN Stack Crash Course – Part 3: Connecting Front-end To Back-end


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

ONLINE COURSE: Angular - The Complete Guide

Check out the great Angular – The Complete Guide with thousands of students already enrolled:

Angular – The Complete Guide

  • This course covers Angular 6
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Use their gained, deep understanding of the Angular  fundamentals to quickly establish themselves as frontend developers
  • Fully understand the architecture behind an Angular application and how to use it
  • Create single-page applications with on of the most modern JavaScript frameworks out there

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.