Esta é a segunda parte do exemplo de upload de arquivo usando NestJS e Angular 11 — Parte 1 . Neste artigo, falarei sobre como criar um aplicativo cliente usando o Angular 11.

Crie um novo aplicativo Angular usando Angular CLI

• Como mencionei no artigo anterior, o Angular CLI precisa ser instalado.
• Em seguida, pressione o comando abaixo para criar um novo aplicativo Angular.
• automóvel-frontend é o nome do meu aplicativo.

Executar aplicativo angular

• Entre no diretório de front-end do automóvel.
• Em seguida, pressione o comando abaixo para executar o aplicativo.

• Agora seu aplicativo cliente será executado na porta 4200 e a página padrão será mostrada.

• Eu estarei usando uma barra de navegação fixa básica, o componente navbar lidará com isso.
• O componente home será usado como componente pai para roteamento

• Vou criar alguns componentes para esta aplicação.

• Vou criar três componentes, chamados home, navbar e upload.
• Crie o componente inicial .

• Criar o componente de upload

• Crie o componente navbar

• Eu pulei os testes ao criar os componentes acima.

• A captura de tela acima mostra todos os componentes que criamos e seus seletores (o nome do seletor pode ser alterado. Mas usarei os seletores padrão.
• app-home
• barra de navegação de aplicativos
• app-upload

• Estou usando um modelo simples de Bootstrap neste aplicativo.
• Então, precisamos instalar o Bootstrap.
• Você pode instalar o Bootstrap ou usar o ng-bootstrap também. Mas estou usando o Bootstrap 3, antigo mas simples de usar. Você pode usar qualquer versão preferida.

• Em seguida, adicione @import “~bootstrap/dist/css/bootstrap.css”; no arquivo styles.css
• Eu não vou adicionar jquery para este projeto.

• Vou usar um modelo básico de barra de navegação bootstrap.

• No futuro, adicionarei mais a esta barra de navegação.
• Como você pode ver, usei routerLink para rotear o componente de upload
• Aqui está o arquivo app-routing.module.ts
• Neste arquivo, criei uma rota para o componente de upload.
• Em seguida, /upload será roteado para o componente de upload.

• O componente home será usado para roteamento.
• Todos os outros componentes, exceto a barra de navegação, estarão dentro do componente inicial.
• As alterações não são necessárias para o arquivo home.component.ts.
• A única coisa que você precisa fazer é adicionar a seguinte linha ao arquivo home.component.html

Adicionar funcionalidade de upload

• Assim que o usuário clicar no arquivo de upload na barra de navegação, o componente de upload levará o usuário.
• No componente de upload, vou lidar com o formulário de upload de arquivos e suas funcionalidades.
• Veja o arquivo upload.component.html

• Aqui estou usando um formulário reativo simples.
• Agora verifique a aparência do arquivo upload.component.ts .

• O HttpClient é usado para chamar nossa API de back-end para upload de arquivos e nosso serviço de back-end também precisa ser iniciado. O serviço de back-end será executado na porta 3000 (http://localhost:3000/api/vehicles/upload)
• Para fazer isso funcionar, você precisa importar os módulos usados ​​no app.module.ts

• Agora estamos todos prontos para o lançamento.
• Se você tiver alguma dúvida ou faltar peças, verifique o link do Github fornecido no final deste artigo.

• Pressione ng serve -o para iniciar o aplicativo.
• Agora a interface do usuário ficará assim.

• Agora você pode selecionar um arquivo CSV (já compartilhei um arquivo CSV no repositório GIT) e carregá-lo para verificar se está tudo bem.
• Você pode verificar os consoles em busca de erros e, se estiver recebendo algum erro, verifique seu código com o meu código.
• Aqui está o link para o repositório Github para o projeto completo.

Exemplo de upload de arquivo usando NestJS e Angular 11 — Parte 2