Este é um projeto de formulário de atualização de usuários desenvolvido com Angular 17, Tailwind CSS e Angular Material. O objetivo deste projeto é demonstrar o uso de vários conceitos avançados do Angular, incluindo requisições HTTP, formulário reativo, RxJS, Observables, além da aplicação de todas as boas práticas de criação de componentes reutilizáveis e utilização dos principais recursos do Angular, como criação de pipes, diretivas e códigos reutilizáveis.
Este aplicativo permite a atualização dos dados dos usuários, permite realizar operações de CRUD (Create, Read, Update, Delete) em uma base de dados de usuários. Além disso, utiliza Angular 17 para proporcionar uma experiência de usuário dinâmica e eficiente.
Formulário Reactivo
: Utiliza formulários reativos do Angular para gerenciar a entrada de dados e validação do formulário.Requisições HTTP
: Utiliza o módulo HttpClient do Angular para realizar requisições HTTP para um backend.Tailwind CSS
: Framework CSS utilizado para estilização do aplicativo, fornecendo uma abordagem baseada em classes para criação de estilos.Angular Material
: Componentes de interface de usuário do Angular Material são integrados para fornecer uma interface moderna e responsiva.RxJS e Observables
: Utiliza o Reactive Extensions for JavaScript (RxJS) e observables para lidar com streams de dados assíncronos de forma eficiente.Rotas
: Utiliza o roteamento do Angular para navegação entre diferentes componentes da aplicação.Componentes Reutilizáveis
: Todas as boas práticas de criação de componentes reutilizáveis são aplicadas para promover a modularidade e a manutenibilidade do código.Códigos Reutilizáveis em Utils
: Utilização de módulos Utils para armazenar códigos reutilizáveis, promovendo a organização e a reutilização de funcionalidades.Enums
: Criação de enums para representar constantes e melhorar a legibilidade e manutenibilidade do código.Máscaras de Entrada com ngx-mask
: Utiliza a biblioteca ngx-mask para aplicar máscaras de entrada em campos de formulário, como CPF, telefones, entre outros, garantindo que os dados sejam inseridos em um formato específico e padronizado.API CountriesNow
: O projeto consome a API CountriesNow para obter dados relacionados a países, como lista de países e suas cidades.
Para executar a aplicação localmente, siga os passos abaixo:
- Clone este repositório:
git clone https://github.com/JoneilsonLima/angular-user-update-form.git
cd reactive-forms
- Instale as dependências
npm install
- Inicie a aplicação
ng serve