https://github.com/kauanaagostini/angular-9
Projeto Desenvolvido no curso da Cod3r, para aprendizagem dos conceitos básicos de Angular.
https://github.com/kauanaagostini/angular-9
angular css material-ui typescript
Last synced: about 2 months ago
JSON representation
Projeto Desenvolvido no curso da Cod3r, para aprendizagem dos conceitos básicos de Angular.
- Host: GitHub
- URL: https://github.com/kauanaagostini/angular-9
- Owner: kauanaagostini
- Created: 2021-06-13T20:03:17.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-28T17:53:57.000Z (about 5 years ago)
- Last Synced: 2025-09-22T18:52:20.979Z (9 months ago)
- Topics: angular, css, material-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 254 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Angular Front-End CRUD
## Índice
- [1. Introdução](#1-introdução)
- [2. Aplicação](#2-aplicação)
- [3. Estrutura e funcionalidades](#3-estrutura-e-funcionalidades)
- [4. Ferramentas Utilizadas](#4-ferramentas-utilizadas)
- [5. Considerações Finais](#5-considerações-finais)
---
## 1. Introdução
Aplicação Web desenvolvida para estudos do Framework `Angular`, promovida pela [Cod3r](https://www.cod3r.com.br/).
---
## 2. Aplicação
Desenvolvido para estudos de `Angular`, `Typescript` e `Material`, o projeto consiste em desenvolver uma aplicação Web para cadastro, consulta, alteração e exclusão de produtos dentro de uma SPA.
O servidor é estático e gerado através de `Json Server` - explicaremos mais abaixo, caso queira ver a aplicação rodando em seu computador, como instanciar a mesma.
Neste projeto podemos aprofundar um pouco os conhecimentos em `Angular`, onde através de chamadas de API conseguimos interagir com ela, cadastrando, alterando e excluindo produtos.
---
## 3. Estrutura e funcionalidades
O projeto consiste em apenas duas páginas desenvolvidas, a Home e a Produtos, e dentro da página produtos é que fica todo o procedimento de interação com a API.
Página Home
Página simples, apenas de Boas-vindas para quem for visualizar a aplicação.
Página Produtos
Inicialmente a página já traz a listagem de produtos que contém cadastrados na API.
Através dessa página você poderá cadastrar um novo produto, clicando no botão Novo Produto:
Poderá também, alterar um produto já existente, caso necessite, clicando no lápis na página de Produtos:
E por fim pode excluir um produto que não esteja mais necessitando, clicando na lixeira:
---
## 4. Ferramentas Utilizadas
As seguintes ferramentas foram usadas na construção do projeto:
- [x] Angular
- [x] TypeScript
- [x] CSS
- [x] Json Server
- [x] Material-ui
---
## 5. Considerações Finais
Desejar ver a aplicação rodando em seu computador, para isso você precisa:
- [x] Dar um Fork nesse repositório;
- [x] Faça um clone do mesmo;
Back-End
- [x] `npm install` para instalar todas as dependências;
- [x] `npm start` para iniciar o servidor back-end;
Front-End
- [x] `npm install` para instalar todas as dependências;
- [x] `npm start` para iniciar;
Pronto, agora é só codar!
Obrigada ao professor Leonardo Leitão por esse curso!
---
