Spring MVC and Angular 6 Example

Date: 2019-01-15

Building a Collaborative Web Application: Integrating Spring MVC and Angular

This article explores the development of a web application integrating Spring MVC as the backend framework and Angular as the frontend. This combination leverages the strengths of each technology: Spring MVC handles server-side logic, data persistence, and RESTful API creation, while Angular provides a robust and dynamic user interface. The application demonstrates fetching data from a backend server using Angular's HTTP client module. The result is a streamlined, efficient, and modern web application.

The architecture is straightforward. The Angular application, running in the user's browser, acts as the client. It communicates with the Spring MVC application, hosted on a server, via HTTP requests. Spring MVC receives these requests, processes them using its controllers and services, interacts with a database (the specifics of which are detailed later), and sends responses back to the Angular application as JSON data. This data is then displayed to the user in the Angular interface.

The Development Process

The development utilizes several technologies and tools. The backend, built using Spring MVC, requires a Java Development Kit (JDK), a build tool like Maven (used here for dependency management), and an IDE such as Eclipse. The frontend, built with Angular, necessitates Node.js and npm (Node Package Manager) for project setup and dependency management. The chosen IDE is not critical; other options are perfectly viable. The example uses Eclipse, but IntelliJ IDEA or similar Java IDEs are equally suitable. The specific versions (JDK 8, Angular 6 in this case) are largely for illustrative purposes; later versions are compatible with minor adjustments.

Setting up the Spring MVC Backend

The Spring MVC backend is structured in a conventional manner. A core component is the pom.xml file, a Maven project object model file that lists project dependencies. This file specifies all the necessary libraries, including Spring framework modules (responsible for dependency injection, Inversion of Control and other core functionalities), Jackson (for JSON data handling), and potentially others for database interaction. Maven automatically resolves these dependencies, fetching the required JAR files.

Configuration files play a crucial role. The web.xml file, a standard deployment descriptor for web applications, defines the dispatcher servlet—the central component in Spring MVC that intercepts all requests and routes them to the appropriate controllers. The dispatcher servlet essentially acts as a central traffic controller within the web application. Another key file, mydispatcher-servlet.xml (or a similarly named file depending on the project structure), defines the beans (essentially objects managed by Spring’s IoC container) and configurations for the MVC framework itself. This file bridges Java classes with the external environment, mapping requests to controllers and configuring various aspects of the application’s behavior.

The Java code consists of several key components:

• Controller: The EmployeeCtrl.java (or similarly named) class acts as the primary interface between incoming HTTP requests and the backend logic. It handles request mapping, processes data, and interacts with the service layer. It receives requests from the Angular application, processes them (e.g., getting a list of employees), and returns a JSON response.
• Service: The EmployeeServImpl.java (or similarly named) class handles business logic related to employee data. It acts as an intermediary between the controller and the data access object. It provides a layer of abstraction and ensures that the controller doesn't deal directly with database access specifics.
• Data Access Object (DAO): The EmployeeDaoImpl.java (or similarly named) class is responsible for interacting directly with the database. It retrieves, inserts, updates, and deletes data from the database. This class handles all database interactions and hides implementation details from the service layer.
• Model: The Employee.java class defines the data structure representing an employee. This class usually contains attributes like employee ID, name, and other relevant details, which are used for data transfer between layers of the application. These attributes are then mapped to the database columns.

Setting up the Angular Frontend

The Angular frontend is built using the Angular CLI (command-line interface). The ng new spring-angular command generates a new project, setting up the necessary files and configurations.

The core components include:

• Module: The app.module.ts file declares the components, services, and other modules of the Angular application. It acts as a container for the various parts of the application, configuring the interactions between these components. In this module, the HTTP client module is imported, enabling communication with the backend.
• Component: The app.component.ts file contains the application logic. This class would handle user interactions, sending HTTP requests to the Spring MVC backend, and receiving and processing responses.
• Template: The app.component.html file defines the user interface. This file displays the data retrieved from the Spring MVC backend. This typically uses Angular's template syntax to dynamically render the data.

Connecting the Frontend and Backend

The Angular application uses the HttpClient module to send HTTP requests (likely GET requests) to the Spring MVC backend to fetch employee data. The responses, formatted as JSON, are then processed and displayed in the Angular application’s user interface. Crucially, the URL used in the HTTP requests should point to the correct location of the Spring MVC application. In a local development environment, this might be localhost:8080 (or a similar port), but for deployment, this will need to be the remote server's address. The base URL can be configured programmatically in Angular using environment variables or interceptors to manage different deployment scenarios, enabling flexible use between development and production environments.

Deployment and Testing

Once the Spring MVC project is compiled, it can be deployed on a suitable server (such as Tomcat). The Angular application is then compiled and launched using ng serve. Accessing the Angular application's URL (usually http://localhost:4200) in a browser will display the application. The button to fetch the employee list will initiate the HTTP request to the Spring MVC backend, and the retrieved data should be displayed.

Conclusion

This approach showcases a common and effective way to create web applications by combining the power of Spring MVC for backend logic and data management, and Angular for a dynamic and user-friendly frontend experience. The separation of concerns improves maintainability and scalability, making this a robust and versatile solution for various web application needs. Remember that database details (name and table names) are specific to the implemented application and are not inherent to this architecture. Deployment considerations, such as managing the backend URL across different environments, are critical aspects for production-ready applications.

Read more