{"id":18706104,"url":"https://github.com/andrehaguiar/spa-cursos","last_synced_at":"2026-04-11T12:05:36.846Z","repository":{"id":132709534,"uuid":"403402747","full_name":"AndrehAguiar/SPA-Cursos","owner":"AndrehAguiar","description":"Neste projeto foi desenvolvido um front-end no modelo SPA (Single Page Application) utilizando Angular e Java","archived":false,"fork":false,"pushed_at":"2021-09-05T20:08:00.000Z","size":207,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-28T06:42:51.534Z","etag":null,"topics":["angular","bootstrap","h2-database","java","jpa-hibernate","spring-boot","spring-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrehAguiar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-05T20:06:25.000Z","updated_at":"2021-09-05T20:21:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"b12d3f0e-d803-421b-96fe-14c66f5e4b8c","html_url":"https://github.com/AndrehAguiar/SPA-Cursos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrehAguiar%2FSPA-Cursos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrehAguiar%2FSPA-Cursos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrehAguiar%2FSPA-Cursos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrehAguiar%2FSPA-Cursos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrehAguiar","download_url":"https://codeload.github.com/AndrehAguiar/SPA-Cursos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239571542,"owners_count":19661164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap","h2-database","java","jpa-hibernate","spring-boot","spring-framework"],"created_at":"2024-11-07T12:12:57.478Z","updated_at":"2025-11-09T07:30:30.467Z","avatar_url":"https://github.com/AndrehAguiar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Desenvolvendo SPA com Angular\n\n#### DESCRIÇÃO\n\nNeste 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:\n\n##### AlunosTableComponent\n\n````typescript\n@Output() chkAlunoCourses = (curso:Course):boolean =\u003e {\n​\treturn this.aluno.courses.some((el) =\u003e el.id === curso.id);\n}\n````\n\n##### CursosTableComponent\n\n````typescript\n@Input() chkAlunoCourses = (curso:Course) =\u003e {    \n    //console.log(\"\u003c=== CHECKING ALUNO COURSES ===\u003e\");\n}\n````\n\n##### Disponibilizando o recurso na página HTML alunos-table.component.html\n\n````html\n\u003cspa-cursos-table *ngIf=\"showCourses\" [courses]=\"courses\" [newCourse]=\"newCourse\" [addToAluno]=\"addToAluno\" [chkAlunoCourses]=\"chkAlunoCourses\"\u003e\u003c/spa-cursos-table\u003e\n````\n\nComo pôde ser visto acima, foram utilizados os recursos de Data Biding e Diretivas como no exemplo abaixo:\n\n````html\n...\t\u003ctbody\u003e\n        \u003ctr scope=\"row\" *ngFor=\"let aluno of alunos\"\u003e // Diretivas\n            \u003ctd\u003e{{aluno.name}}\u003c/td\u003e\n            \u003ctd class=\"text-center\"\u003e{{aluno.age}}\u003c/td\u003e\n            \u003ctd\u003e{{aluno.email}}\u003c/td\u003e // Interpolação\n            \u003ctd\u003e\n                \u003cbutton class=\"btn btn-primary\" (click)=\"showHideCourses(aluno)\"\u003eView Courses\u003c/button\u003e  // Event Biding\n                \u003cbutton class=\"btn btn-outline-primary\" (click)=\"addAlunoCourse(aluno)\"\u003eAdd Course\u003c/button\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cbutton class=\"btn btn-warning\"\u003eEditar\u003c/button\u003e\n                \u003cbutton class=\"btn btn-danger\"\u003eExcluir\u003c/button\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n\t\u003c/tbody\u003e ...\n````\n\nO front-end consome uma API Rest desenvolvida em Java com Spring Framework no endpoint `http://localhost:8080/api/v1/\u003c PATH \u003e`\n\nTambém foi implementado o ServiceComponent, como no exemplo do CursoServiceComponent abaixo, com os seguintes métodos:\n\n````TypeScript\n...\n  private BASE_URL = \"http://localhost:8080/api/v1/course/\";\n  httpOptions = {\n      Headers: new HttpHeaders(\n          {'content-type':'application/json'}\n      )\n  }\n\n  constructor(private http:HttpClient) { }\n\n  getCursos = async ():Promise\u003cany\u003e =\u003e {\n    const response = this.http.get(`${this.BASE_URL}`);\n    return response;\n  }\n\n  createCurso = async (curso:Course):Promise\u003cany\u003e =\u003e {\n    const response = this.http.post(`${this.BASE_URL}`, curso);\n    return response;\n  }\n\n  updateCourse = async (curso:Course | undefined):Promise\u003cany\u003e =\u003e {\n    const response = this.http.put(`${this.BASE_URL}`, curso);\n    return response;\n  } ...\n````\n\n---\n\nO back-end retorna um objeto JSON do tipo PAGE para popular as tabelas, como no exemplo da lista de objetos do tipo Professores abaixo:\n\n````json\nretorno do getCursos();\n{\n    \"content\": [\n        {\n            \"id\": 1,\n            \"name\": \"Pardal\",\n            \"degree\": \"Master\"\n        },\n        {\n            \"id\": 2,\n            \"name\": \"Bujinganga\",\n            \"degree\": \"Doctor\"\n        },\n        {\n            \"id\": 3,\n            \"name\": \"Pascoale\",\n            \"degree\": \"Pos-Degree\"\n        },\n        {\n            \"id\": 4,\n            \"name\": \"Emmett\",\n            \"degree\": \"Doctor\"\n        }\n    ],\n    \"pageable\": \"INSTANCE\",\n    \"last\": true,\n    \"totalElements\": 4,\n    \"totalPages\": 1,\n    \"size\": 4,\n    \"sort\": {\n        \"sorted\": false,\n        \"unsorted\": true,\n        \"empty\": true\n    },\n    \"first\": true,\n    \"numberOfElements\": 4,\n    \"number\": 0,\n    \"empty\": false\n}\n````\n\nO back-end tem acesso a um banco de dados com \"schema\" relacional utilizando tabelas auxiliares para relações \"ManyToMany\", criado automaticamente pelo \"JPARepository\"\n\n---\n\nSendo assim é possível:\n\n1. Inserir novos Cursos, assim como novos Alunos e Professores utilizando respectivamente os métodos `createCurso(), createAlunos() e createTeacher()`;\n2. Listar todos os Cursos, Alunos e Professores utilizando respectivamente os métodos `getCursos(), getAlunos() e getTeachers()`;\n3. Alterar os Cursos, Alunos e Professores utilizando respectivamente os métodos `updateCourse(), updateAluno() e updateTeacher()`.\n4. Vincular cursos aos alunos e professores aos cursos.\n\n###### TODO: Implementar os formulários de alteração dos registros.\n\n---\n\n\u003cspan\u003eAngular\u003c/span\u003e\n\n\u003cspan\u003e**Full-Stack** | **Intermediário**\u003c/span\u003e\n\n##### Especialista\n\n\u003cimg  width=\"80px\" src=\"https://avatars.githubusercontent.com/u/26483361?v=4\" /\u003e\n\n### **Camila Ribeiro**\n\nEngenheira de software sênior, Avanade\n\n###### [Digital Innovation One](https://digitalinnovation.one/sign-up?ref=NL9EADWVZW)\n\n---\n\n\u003ca href=\"https://www.linkedin.com/in/camila-ferreira-ribeiro/\" target=\"_blank\"\u003e\n\u003cimg width=\"20px\" src=\"https://image.flaticon.com/icons/png/512/174/174857.png\"\u003e\u003c/a\u003e\n\u003cspan\u003e\u003ca href=\"https://github.com/cahferreira93\" target=\"_blank\"\u003e\n\u003cimg width=\"20px\" src=\"https://image.flaticon.com/icons/png/512/25/25657.png\"\u003e\u003c/a\u003e\u003c/span\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrehaguiar%2Fspa-cursos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrehaguiar%2Fspa-cursos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrehaguiar%2Fspa-cursos/lists"}