Front-end para CRUD com Angular

Prof. Fausto Cintra/ novembro 8, 2019/ Desenvolvimento front-end/ 0 comments

1. Tirando uma cópia do projeto de exemplo do professor

Se você acompanhou todas as aulas e fez o projeto de exemplo juntamente com o professor, PARABÉNS! Você está pronto para prosseguir no desenvolvimento do seu próprio projeto. Recomenda-se, no entanto, que você faça uma cópia do projeto front-end trabalhe nessa cópia de agora em diante.

No entanto, se seu código estiver desatualizado em relação àquele do professor ou com erros, não se preocupe. Siga os passos a seguir:

1. Acesse o repositório do professor correspondente à sua turma (matutino ou noturno);
2. No botão verde Clone or download à direita, escolha Download ZIP;
3. Descompacte o arquivo baixado em um caminho do sistema operacional que não tenha espaços nem acentos (importante!);
4. Abra a pasta do projeto no Visual Studio Code e, no terminal, execute yarn install para reconstruir as dependências do projeto na pasta node_modules.

2. Criando os services

Os services são os responsáveis por fazer a comunicação entre a aplicação Angular e a API (back-end). Para criar um service do Angular, execute o comando exemplificado mais abaixo.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

• Use sempre letras minúsculas no nome da entidade;
• Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.

No terminal:

ng generate service nome-da-entidade/nome-da-entidade

NOTA: as palavras generate e service podem ser abreviadas pelas suas primeiras letras:

ng g s nome-da-entidade/nome-da-entidade

Isso irá criar um arquivo chamado nome-da-entidade.service.ts na pasta src\app\nome-da-entidade. Isso ajuda muito na organização do código.

Copie o código do service professor.service.ts do repositório do professor e cole no arquivo gerado, substituindo o conteúdo. Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

É recomendável que você crie TODOS os services necessários agora no início, para que eles estejam disponíveis quando forem necessários.

3. Criando um componente de listagem simples

1. Para começar, escolha uma entidade simples e que não tenha nenhuma referência. No seu diagrama, essas entidades aparecem nas extremidades.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

• Use sempre letras minúsculas no nome da entidade;
• Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.
• Não se esqueça do -list no final do comando!

2. Escolhida a entidade, execute no terminal:

ng generate component nome-da-entidade/nome-da-entidade-list

NOTA: as palavras generate e component podem ser abreviadas pelas suas primeiras letras:

ng g c nome-da-entidade/nome-da-entidade-list

O comando executado irá criar os seguintes arquivos:

• src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.html
• src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.scss
• src/app/nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component.ts

Em seguida, copie o código dos arquivos professor-list.component.html, professor-list.component.scss e professor-list.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.

Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

Você também precisará adaptar os nomes dos atributos da sua entidade nas colunas da tabela (arquivo .html) e na listagem da variável displayedColumns do arquivo .ts.

3. Abra o arquivo src/app/app-routing.module. No início do arquivo, importe o seu componente de listagem.

import { NomeDaEntidadeListComponent } from './nome-da-entidade/nome-da-entidade-list/nome-da-entidade-list.component';

4. Mais abaixo, no mesmo arquivo, acrescente a rota para o seu componente:

const routes: Routes = [
  // Pode haver outras rotas antes
  {
    path: 'nome-da-entidade',
    component: NomeDaEntidadeListComponent
  }
  // Pode haver outras rotas depois
}

5. No arquivo src\app\ui\menu-principal\menu-principal.component.html, crie um item para acessar seu component de listagem, seguindo os exemplos já existentes nesse mesmo arquivo.

6. Execute o comando ng serve no front-end e, em outro terminal, o comando yarn start no back-end. Você deve ser capaz de ver seus dados na listagem, caso os tenha cadastrado corretamente.

4. Criando um componente de formulário simples

1. Um componente de formulário simples fará par com um componente de listagem simples que você já criou. Portanto, só gere componentes de formulário se você já tiver gerado o respectivo componente de listagem.

SUBSTITUA nome-da-entidade pelo nome da sua entidade no back-end. Fique atento às seguintes recomendações:

• Use sempre letras minúsculas no nome da entidade;
• Caso o nome da sua entidade tenha mais de uma palavra, mantenha-as todas em minúsculas e separe as partes com hífen.
• Não se esqueça do -form no final do comando!

2. Escolhida a entidade, execute no terminal:

ng generate component nome-da-entidade/nome-da-entidade-form

O comando executado irá criar os seguintes arquivos:

• src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.html
• src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.scss
• src/app/nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component.ts

3. Em seguida, copie o código dos arquivos professor-form.component.html, professor-form.component.scss e professor-form.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.

Faça as adaptações e substituições necessárias para o nome de sua entidade, com cuidado para preservar as letras maiúsculas e minúsculas de acordo com o padrão do Angular.

Você precisará trabalhar o arquivo .html do formulário de acordo com os atributos e tipos de atributos da sua própria entidade. No exemplo do professor-form.component.html, o atributo exemplificado é do tipo string, e, portanto, é utilizado um <input matInput> para capturá-lo. Se esse não for o seu caso, você encontrará mais exemplos de componentes de formulário para outros tipos de dados em turma-form.component.html.

4. Abra o arquivo src/app/app-routing.module. No início do arquivo, importe o seu componente de formulário.

import { NomeDaEntidadeFormComponent } from './nome-da-entidade/nome-da-entidade-form/nome-da-entidade-form.component';

5. Mais abaixo, no mesmo arquivo, acrescente a rota para o seu componente:

const routes: Routes = [
  // Pode haver outras rotas antes
  {
    path: 'nome-da-entidade/novo',
    component: NomeDaEntidadeFormComponent
  },
  {
    path: 'nome-da-entidade/:id',
    component: NomeDaEntidadeFormComponent
  }
  // Pode haver outras rotas depois
}

6. Execute o comando ng serve no front-end e, em outro terminal, o comando yarn start no back-end. A partir do componente de listagem, você deverá ser capaz de acesar o formulário pelo botão Nova entidade ou pelo botão de edição de cada uma das linhas da listagem.

5. Quando você cria uma nova entidade não retorna automaticamente para a listagem?

Calma. Seu objeto foi criado no servidor, mas a mensagem enviada pelo back-end foi entendida pelo Angular como um erro.

Para resolver isso, siga as etapas:

1. No back-end, abra o arquivo correspondente ao controller da sua entidade.
2. Localize o método novo().
3. Nesse método, troque a linha

res.sendStatus(201).end();

por

res.status(201).send('');

Salve o arquivo. Se o back-end estiver no ar, não se esqueça de derrubar o servidor e executar yarn start novamente.

Cadastre um novo objeto na sua aplicação front-end. Após o salvamento, você deverá ser redirecionado automaticamente de volta para a listagem.

6. Criando componentes de listagem mais complexos

Os componentes de listagem para entidades mais complexas seguem o mesmo princípio do componente de listagem simples, conforme explicado no item 10. A única diferença é que a tabela, provavelmente, terá mais colunas e a variável displayedColumns deverá ser ajustada para que elas sejam corretamente exibidas.

7. Criando componentes de formulário mais complexos

1. Siga os passos 1 e 2 do item 4.
2. No passo 3, utilize o código dos arquivos turma-form.component.html, turma-form.component.scss e turma-form.component.ts do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo.
3. Continue com o passo 3 do item 4.
4. No arquivo nome-da-entidade-form.component.ts, você precisará importar, além do service correspondente a NomeDaEntidade, os services de todas as outras entidades relacionadas (para preencher os comboboxes).
5. Verifique as variáveis da classe (logo acima do constructor). Deve haver:
   • uma variável de objeto vazio para a entidade principal do formulário;
   • uma variável de vetor vazio, com o nome no plural, para cada entidade relacionada.
6. Edite os parâmetros do constructor para injetar apenas os serviços importados anteriormente.
7. Edite a função ngOnInit() para carregar corretamente as variáveis de vetor das entidades relacionadas.
8. Continue com os passos 4, 5 e 6 do item 4.