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:
- Acesse o repositório do professor correspondente à sua turma (matutino ou noturno);
- No botão verde
Clone or download
à direita, escolhaDownload ZIP
; - Descompacte o arquivo baixado em um caminho do sistema operacional que não tenha espaços nem acentos (importante!);
- Abra a pasta do projeto no Visual Studio Code e, no terminal, execute
yarn install
para reconstruir as dependências do projeto na pastanode_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
eservice
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
- 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
ecomponent
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
- 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:
- No back-end, abra o arquivo correspondente ao controller da sua entidade.
- Localize o método
novo()
. - 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
- Siga os passos 1 e 2 do item 4.
- No passo 3, utilize o código dos arquivos
turma-form.component.html
,turma-form.component.scss
eturma-form.component.ts
do repositório do professor e cole nos arquivo gerados, de acordo com seus tipos, substituindo o conteúdo. - Continue com o passo 3 do item 4.
- No arquivo
nome-da-entidade-form.component.ts
, você precisará importar, além do service correspondente aNomeDaEntidade
, os services de todas as outras entidades relacionadas (para preencher os comboboxes). - 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.
- Edite os parâmetros do constructor para injetar apenas os serviços importados anteriormente.
- Edite a função
ngOnInit()
para carregar corretamente as variáveis de vetor das entidades relacionadas. - Continue com os passos 4, 5 e 6 do item 4.