The Dev World – Sergio Lema

When creating Fullstack applications, I can’t just focus on the Backend or on the Frontend. As I must deliver a project where both part work together.

Recently, I’ve created a Spring Boot application where I’ve configured the CORS to accept an external Frontend. Now, it’s time to turn into the Frontend project.

I will create an Angular project to communicate with an existing Spring Boot Backend.

Content:

• Install the Angular CLI
• Create the Angular project
• Configure the HTTP Module
• Request the Backend

Install the Angular CLI

All the commands to generate components, services, or run the project are done with the Angular CLI. Still, it’s very easy to install it.

First, I make sure that I have Node 18 installed. If not, I can use NVM to install it.

When ready, I can install the Angular CLI.

npm install -g @angular/cli

On Windows, I need to first allow scripts on PowerShell with this command:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Now, I’m ready to create my first project.

Create the Angular Project

As said before, everything must be done with the Angular CLI.

ng new frontend

This will create a template project. With a single component, app, where I can see the main commands of Angular.

What’s inside?

- frontend/
  - angular.json
  - node_modules/
  - package-lock.json
  - package.json
  - src/
    - app/
      - app.component.css
      - app.component.html
      - app.component.ts
      - app.module.ts
    - assets/
    - favicon.ico
    - index.html
    - main.ts
    - styles.css
  - tsconfig.app.json
  - tsconfig.json

• angular.json: this file contains the metadata of the project its name, where to find each configuration file, how to build the project…);
• node_modules/: this folder contains all the added dependencies of the project;
• package-lock.json: this file indicates which specific version of all the dependencies was installed in the project;
• package.json: this file indicates which dependencies are required for the project with a range of versions number;
• src/app/: in this folder will be located all the source code;
• src/assets/: this folder will contain all the static assets needed by the project;
• src/index.html: this is the initial file of the project, it should contain nothing but the call to the root component;
• src/main.ts: this file indicates how to start the project;
• src/styles.css: this file contains the generic style of the project;
• tsconfig.app.json and tsconfig.json: those are files which indicate the compilation information to pass from TypeScript to JavaScript.

Configure the HTTP Module

To be able to request the Backend, I need to add the HttpClient module to my project.

The HttpClient module is an Angular module which allows me to perform HTTP requests.

To add the HttpClient module, I must edit the src/app/app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I must first import the module at line 3, then add it to the imports of the project at line 13.

Request the Backend

I will now use the HttpClient to request my backend. I will do it from the already created app component, and I will do it when the app component loads.

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

import { BackendContent } from './backend-content';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  response: string = 'empty';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<BackendContent>('http://localhost:8080/greetings').subscribe(data => {
      this.response = data.content;
    });
  }

}

At line 2, I’ve imported the HttpClient. Which is then injected into my app component within the constructor at line 15.

At line 17, I create the ngOnInit method, which is the method called on the initialization of the component. Inside, at line 18, I use the HttpClient to request my backend at the endpoint http://localhost:8080/greetings. The response from the backend is of type BackendContent.

I’ve created an object BackendContent, imported at line 4, which reflects the structure of the backend’s response.

Finally, at line 19, in the subscribe method, I store the backend’s response into the internal variable response. Let’s use this variable in the HTML template to display it.

<div>
  <h1>Message received from the backend</h1>
  <p>{{response}}</p>
</div>

Conclusion

In this post, I’ve created a simple Angular project which is now able to communicate with a backend. For this purpose, I’ve added the HttpClient module.

But in the backend side, I need the CORS to be correctly configured if I want my fullstack application to work.

You can find the project used in my Github repository.