Last updated: 2024-11-25

1. Learn
2. ›
3. Frontend
4. ›
5. Angular Best Practices

Best Practices for Angular and Spring Boot

Angular is a first-class framework for creating complex browser applications. Spring Boot's popularity is unbroken and can provide all the necessary services for the backend. What best practices can we follow when using these two frameworks together?

#1 Consistent folder structure

Both frameworks already come with their own best practices and standards, which should be followed as closely as possible. Only with a significant advantage an adaptation is justified - as it is the case here with the folder structure.

When we create a new Angular application with the CLI, the client code is normally directly under the root folder under /src. We should rename this folder to /src/main/webapp so that the entire code of our application follows a consistent structure.

Common folder structure for Angular and Spring Boot

#2 Development server and build process

During frontend development, we use the development server, as it is recommended for Angular. For this additionally we need a CORS config in our Spring application, which only becomes active during development for the local profile. Otherwise our browser would block all API calls.

Our Angular client should be built automatically during the build process of our Spring application and integrated into our fat jar. For this, there is the gradle-node-plugin for Gradle and the frontend-maven-plugin for Maven. When our final jar is then executed, the index.html from Angular should be rendered for all requests so that our frontend can display the relevant content. To do this, we also add an AngularForwardController to our application.

The details about the plugins and the forward can be found here.

#3 InputRowComponent for form elements

Angular offers a flexible way to modularize our browser application with components. We can simplify form handling for our reactive forms with the help of our own InputRowComponent.

Our component contains the recurring logic, such as the fixed HTML structure with its classes. In addition, an empty user input can be automatically converted to null.

We can freely extend our component with additional attributes, which we can then use in any form of our client. We should always take care to remove functions that are no longer required so that the code remains maintainable in the long term.

#4 Localization and error handling

Both Angular and Spring Boot offer their own approaches to localization. Since the vast majority of texts can be found in the frontend, it makes sense for the backend to only return error codes. With this their mappings and all translations can be handled centrally by Angular - as described here.

To centralize error handling in the backend, we can use the Error Handling Spring Boot Starter. This useful library ensures that all exceptions and field validation errors are returned in a standardized structure. In the frontend, we can then provide an ErrorHandler and other utility methods to handle them with a common logic.

#5 Keep your versions up-to-date

The libraries used in the frontend and backend should be regularly upgraded to their latest version. If you let this slide, problems with old versions will be more difficult to fix and the migration efforts will increase.

The migrations should not only include the version updates, but also code changes to follow all current recommendations. For Angular 17, for example, this means to use standalone components and the new template syntax. With Angular 19, every component is standalone by default. Bootify can support updating your applications with the automatic Git integration, so all neccessary code changes are contained in a separate commit.

Bootify can be used to generate customized Spring Boot apps with Angular frontend - directly in the browser without registration. All the best practices described are fully applied so that the two frameworks work together perfectly.

Start Project
No registration required