loiane / crud-angular-spring

🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end

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 v17
• Angular Material
• Karma + Jasmine (front-end tests)

⌨️ Editor / IDE

• Visual Studio Code
• Java Extensions link
• Angular Extensions link

Some functionalities available in the API

• ✅ Java model class with validation
• ✅ JPA repository
• ✅ JPA Pagination
• ✅ MySQL database (can you 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

crud-angular-spring's Issues

Dúvidas de versões de NodeJS e Angular Cli

Tenho um projeto com Angular Cli na versão 1.4.5 e NodeJS esta na versão 10.15.3 e ao executar npm run start ocorre um erro solicitando atualização do NodeJS para versão superior a que tenho atualmente mas, tenho receio de atualizar pois, tenho um projeto de cliente em produção e ao atualizar o NodeJS para versão superior não vai fazer com meu Angular Cli 1.4.5 desse projeto pare de funcionar ?

Em anexo imagem do que tenho no note em Windows 8.1. 64 Bits e erro que ocorre. Aguardo uma ajuda para resolver o erro sem bagunçar o que já tenho.

Vai ter acesso ao micro servico ?

`const baseUrl = 'http://localhost:8080/api/tutorials';

@Injectable({
providedIn: 'root',
})
export class TutorialService {
constructor(private http: HttpClient) {}

getAll(): Observable<Tutorial[]> {
return this.http.get<Tutorial[]>(baseUrl);
}`