Web App Architecture - the Spring MVC - AngularJs stack
Spring MVC and AngularJs together make for a really productive and appealing frontend development stack for building form-intensive web applications.
In this blog post we will see how a form-intensive web app can be built using these technologies, and compare such approach with other available options. A fully functional and secured sample Spring MVC / AngularJs web app can be found in this github repository.
We will go over the following topics:
The architecture of a Spring MVC + Angular single page app
How to structure a web UI using Angular
How to build a REST API backend with Spring MVC
Securing a REST API using Spring Security
How does this compare with other approaches that use a full Java-based approach?
The architecture of a Spring MVC + Angular single page web app
Form-intensive enterprise class applications are ideally suited for being built as single page web apps. The main idea compared to other more traditional server-side architectures is to build the server as a set of stateless reusable REST services, and from an MVC perspective to take the controller out of the backend and move it into the browser:
The client is MVC-capable and contains all the presentation logic which is separated in a view layer, a controller layer and a frontend services layer. After the initial application startup, only JSON data goes over the wire between client and server.
How is the backend built?
The backend of an enterprise frontend application can be built in a very natural and web-like way as a REST API. The same technology can be used to provide web services to third-party applications - obviating in many cases the need for a separate SOAP web services stack.
From a DDD perspective, the domain model remains on the backend, at the service and persistence layer level. Over the wire only DTOs go by, but not the domain model.
How to structure the frontend of a web app using Angular
The frontend should be built around a view-specific model (which is not the domain model), and should only handle presentation logic, but no business logic. These are the three layers of the frontend:
The View Layer
The view layer is composed of Html templates, CSS, and any Angular directives representing the different UI components. This is an example of a simple view for a login form: