Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loiane/crud-angular-spring
🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end
https://github.com/loiane/crud-angular-spring
angular angular-material angularv16 java javascript spring spring-boot spring-mvc springboot springboot3 springframework
Last synced: about 1 month ago
JSON representation
🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end
- Host: GitHub
- URL: https://github.com/loiane/crud-angular-spring
- Owner: loiane
- License: mit
- Created: 2022-05-30T23:09:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T12:06:11.000Z (7 months ago)
- Last Synced: 2024-05-02T05:39:28.634Z (7 months ago)
- Topics: angular, angular-material, angularv16, java, javascript, spring, spring-boot, spring-mvc, springboot, springboot3, springframework
- Language: Java
- Homepage:
- Size: 6.46 MB
- Stars: 161
- Watchers: 4
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# REST API with Spring Boot and Angular
CRUD Angular + Spring demonstrating Has-Many relationship, with tests.
This API is to showcase, especially for beginners, what a basic CRUD API that's close to being Production-ready looks like.
## 💻 Tecnologies
- Java 21
- Spring Boot 3 (Spring 6)
- Maven
- JPA + Hibernate
- MySQL
- JUnit 5 + Mockito (back-end tests)
- Angular v18
- Angular Material
- Karma + Jasmine (front-end tests)
## ⌨️ Editor / IDE
- Visual Studio Code
- Java Extensions [link](https://marketplace.visualstudio.com/items?itemName=loiane.java-spring-extension-pack)
- Angular Extensions [link](https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack)
## Some functionalities available in the API
- ✅ Java model class with validation
- ✅ JPA repository
- ✅ JPA Pagination
- ✅ MySQL database (you can use any database of your preference)
- ✅ Controller, Service, and Repository layers
- ✅ Has-Many relationships (Course-Lessons)
- ✅ Java 17 Records as DTO (Data Transfer Object)
- ✅ Hibernate / Jakarta Validation
- ✅ Unit tests for all layers (repository, service, controller)
- ✅ Test coverage for tests
- ✅ Spring Docs - Swagger (https://springdoc.org/v2/)
### Not implemented (maybe in a future version)
- Security (Authorization and Authentication)
- Caching
- Data Compression
- Throttling e Rate-limiting
- Profiling the app
- Test Containers
- Docker Build
## Some functionalities available in the front end
- ✅ Angular Standalone components (Angular v16+)
- ✅ Angular Material components
- ✅ List of all courses with pagination
- ✅ Form to update/create courses with lessons (has-many - FormArray)
- ✅ View only screen
- ✅ TypedForms (Angular v14+)
- ✅ Presentational x Smart Components
- 🚧 Unit and Integration tests for components, services, pipes, guards
## Screenshots
Main Page with Pagination
Form with One to Many (Course-Lessons)
View Page with YouTube Player
## ❗️Executing the code locally
### Executing the back-end
You need to have Java and Maven installed and configured locally.
Open the `crud-spring` project in your favorite IDE as a Maven project and execute it as Spring Boot application.
### Executing the front-end
You need to have Node.js / NPM installed locally.
1. Install all the required dependencies:
```
npm install
```
2. Execute the project:
```
npm run start
```
This command will run the Angular project with a proxy to the Java server, without requiring CORS.
Open your browser and access **http://localhost:4200** (Angular default port).
#### Upgrading Angular
```
ng update
```
Then
```
ng update @angular/cli @angular/core @angular/cdk @angular/material @angular/youtube-player --force
```