Building a Powerful Web Application with Angular and Spring Boot

Are you ready to take your web development skills to the next level? Look no further! In this article, we’ll show you how to build a robust and scalable web application using two of the most popular technologies in the industry: Angular and Spring Boot.

What You’ll Need

To get started, you’ll need to have the following tools installed on your machine:

• Node.js and npm (the package manager for Node.js)
• Java Development Kit (JDK) 8 or later
• Apache Maven or Gradle (for building and managing Spring Boot projects)
• Angular CLI (command-line interface for building and managing Angular projects)
• A code editor or IDE of your choice (e.g. Visual Studio Code, Eclipse, IntelliJ IDEA)

Setting Up the Project Structure

Let’s start by creating a new project structure for our application. We’ll create two separate projects: one for the frontend (Angular) and one for the backend (Spring Boot).

project/
frontend/
angular-app/
src/
app/
components/
services/
models/
index.html
angular.json
tsconfig.json
...
backend/
spring-boot-app/
src/
main/
java/
com/
example/
config/
controller/
entity/
repository/
service/
resources/
application.properties
pom.xml (or build.gradle)
...

Building the Backend with Spring Boot

First, let’s create a new Spring Boot project using your IDE or by using the Spring Initializr website. Choose the following dependencies:

• Web
• DevTools
• JPA (for database persistence)
• H2 (for an in-memory database)

Create a new Java class for the main application:

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootApp {
  public static void main(String[] args) {
    SpringApplication.run(SpringBootApp.class, args);
  }
}

Create a new controller class to handle HTTP requests:

package com.example.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
  @GetMapping("/hello")
  public String sayHello() {
    return "Hello from Spring Boot!";
  }
}

Start the Spring Boot application by running the main method or by using the Maven or Gradle command:

mvn spring-boot:run

or

gradle bootRun

Building the Frontend with Angular

Next, let’s create a new Angular project using the Angular CLI:

ng new angular-app

Create a new component for the main application:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to Angular and Spring Boot!</h1>
    <p><a [routerLink]="['/hello']">Say Hello!</a></p>
  `
})
export class AppComponent {
  title = 'angular-app';
}

Create a new service to handle HTTP requests to the backend:

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

@Injectable({
  providedIn: 'root'
})
export class HelloService {
  private apiUrl = 'http://localhost:8080/hello';

  constructor(private http: HttpClient) { }

  sayHello() {
    return this.http.get(this.apiUrl, { responseType: 'text' });
  }
}

Create a new component to display the response from the backend:

import { Component, OnInit } from '@angular/core';
import { HelloService } from './hello.service';

@Component({
  selector: 'app-hello',
  template: `
    <h1>{{ message }}</h1>
  `
})
export class HelloComponent implements OnInit {
  message: string;

  constructor(private helloService: HelloService) { }

  ngOnInit() {
    this.helloService.sayHello().subscribe(response => {
      this.message = response;
    });
  }
}

Update the routing configuration to include the new component:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HelloComponent } from './hello/hello.component';

const routes: Routes = [
  { path: '', redirectTo: '/hello', pathMatch: 'full' },
  { path: 'hello', component: HelloComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Communication Between the Frontend and Backend

Now that we have both projects set up, let’s connect them. In the Angular project, update the `hello.service.ts` file to make an HTTP request to the Spring Boot backend:

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

@Injectable({
  providedIn: 'root'
})
export class HelloService {
  private apiUrl = 'http://localhost:8080/hello';

  constructor(private http: HttpClient) { }

  sayHello() {
    return this.http.get(this.apiUrl, { responseType: 'text' });
  }
}

In the Spring Boot project, update the `HelloController` class to handle the HTTP request:

package com.example.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
  @GetMapping("/hello")
  public String sayHello() {
    return "Hello from Spring Boot!";
  }
}

Running the Application

Finally, let’s run the application. Start the Spring Boot backend by running the main method or by using the Maven or Gradle command:

mvn spring-boot:run

or

gradle bootRun

Start the Angular frontend by running the following command:

ng serve

Open a web browser and navigate to `http://localhost:4200` to see the application in action.

Conclusion

In this article, we’ve shown you how to build a powerful web application using Angular and Spring Boot. We’ve covered the project structure, setting up the backend with Spring Boot, building the frontend with Angular, and connecting the two projects using HTTP requests.

By following these instructions, you should now have a fully functional web application that showcases the strengths of both Angular and Spring Boot.

Technology	Description
Angular	A popular JavaScript framework for building single-page applications
Spring Boot	A popular Java framework for building web applications and microservices

Remember to explore the official documentation for both Angular and Spring Boot to learn more about their features and capabilities.

Resources

Here are some additional resources to help you further:

1. Angular Official Documentation
2. Spring Boot Official Documentation
3. Angular CLI GitHub Repository
4. Spring Boot GitHub Repository

We hope you enjoyed this article and learned something new. Happy coding!

Frequently Asked Question

Get ready to dive into the world of Angular and Spring Boot! Here are some frequently asked questions to get you started.