https://github.com/andrehaguiar/spa-cursos
Neste projeto foi desenvolvido um front-end no modelo SPA (Single Page Application) utilizando Angular e Java
https://github.com/andrehaguiar/spa-cursos
angular bootstrap h2-database java jpa-hibernate spring-boot spring-framework
Last synced: 3 months ago
JSON representation
Neste projeto foi desenvolvido um front-end no modelo SPA (Single Page Application) utilizando Angular e Java
- Host: GitHub
- URL: https://github.com/andrehaguiar/spa-cursos
- Owner: AndrehAguiar
- Created: 2021-09-05T20:06:25.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-05T20:08:00.000Z (almost 5 years ago)
- Last Synced: 2024-12-28T06:42:51.534Z (over 1 year ago)
- Topics: angular, bootstrap, h2-database, java, jpa-hibernate, spring-boot, spring-framework
- Language: TypeScript
- Homepage:
- Size: 202 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Desenvolvendo SPA com Angular
#### DESCRIÇÃO
Neste projeto foi desenvolvido um front-end no modelo SPA (Single Page Application) utilizando Angular com injeção de dependências com o EventEmitter `@Input()` e `@Output` para transitar variáveis e funções entre os componentes como nos exemplos abaixo:
##### AlunosTableComponent
````typescript
@Output() chkAlunoCourses = (curso:Course):boolean => {
return this.aluno.courses.some((el) => el.id === curso.id);
}
````
##### CursosTableComponent
````typescript
@Input() chkAlunoCourses = (curso:Course) => {
//console.log("<=== CHECKING ALUNO COURSES ===>");
}
````
##### Disponibilizando o recurso na página HTML alunos-table.component.html
````html
````
Como pôde ser visto acima, foram utilizados os recursos de Data Biding e Diretivas como no exemplo abaixo:
````html
...
// Diretivas
{{aluno.name}}
{{aluno.age}}
{{aluno.email}} // Interpolação
View Courses // Event Biding
Add Course
Editar
Excluir
...
````
O front-end consome uma API Rest desenvolvida em Java com Spring Framework no endpoint `http://localhost:8080/api/v1/< PATH >`
Também foi implementado o ServiceComponent, como no exemplo do CursoServiceComponent abaixo, com os seguintes métodos:
````TypeScript
...
private BASE_URL = "http://localhost:8080/api/v1/course/";
httpOptions = {
Headers: new HttpHeaders(
{'content-type':'application/json'}
)
}
constructor(private http:HttpClient) { }
getCursos = async ():Promise => {
const response = this.http.get(`${this.BASE_URL}`);
return response;
}
createCurso = async (curso:Course):Promise => {
const response = this.http.post(`${this.BASE_URL}`, curso);
return response;
}
updateCourse = async (curso:Course | undefined):Promise => {
const response = this.http.put(`${this.BASE_URL}`, curso);
return response;
} ...
````
---
O back-end retorna um objeto JSON do tipo PAGE para popular as tabelas, como no exemplo da lista de objetos do tipo Professores abaixo:
````json
retorno do getCursos();
{
"content": [
{
"id": 1,
"name": "Pardal",
"degree": "Master"
},
{
"id": 2,
"name": "Bujinganga",
"degree": "Doctor"
},
{
"id": 3,
"name": "Pascoale",
"degree": "Pos-Degree"
},
{
"id": 4,
"name": "Emmett",
"degree": "Doctor"
}
],
"pageable": "INSTANCE",
"last": true,
"totalElements": 4,
"totalPages": 1,
"size": 4,
"sort": {
"sorted": false,
"unsorted": true,
"empty": true
},
"first": true,
"numberOfElements": 4,
"number": 0,
"empty": false
}
````
O back-end tem acesso a um banco de dados com "schema" relacional utilizando tabelas auxiliares para relações "ManyToMany", criado automaticamente pelo "JPARepository"
---
Sendo assim é possível:
1. Inserir novos Cursos, assim como novos Alunos e Professores utilizando respectivamente os métodos `createCurso(), createAlunos() e createTeacher()`;
2. Listar todos os Cursos, Alunos e Professores utilizando respectivamente os métodos `getCursos(), getAlunos() e getTeachers()`;
3. Alterar os Cursos, Alunos e Professores utilizando respectivamente os métodos `updateCourse(), updateAluno() e updateTeacher()`.
4. Vincular cursos aos alunos e professores aos cursos.
###### TODO: Implementar os formulários de alteração dos registros.
---
Angular
**Full-Stack** | **Intermediário**
##### Especialista
### **Camila Ribeiro**
Engenheira de software sênior, Avanade
###### [Digital Innovation One](https://digitalinnovation.one/sign-up?ref=NL9EADWVZW)
---
