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.
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);
- Clique sobre o botão
Fork
no canto superior direito (pode demorar um pouco). Será criada uma espécie de “cópia” do repositório do professor para o seu próprio repositório; - Acesse o seu repositório e, na barra de endereços do navegador, coloque
gitpod.io/#/
ANTES da URL para iniciar um novo workspace no GitPod; - Acesse https://gitpod.io/access-control/ e libere o acesso
write public repos
na coluna do GitHub; - Em https://gitpod.io/settings/, crie as varáveis de ambiente
DB_USER
,DB_PASS
eDB_NAME
, com valores de acordo com as informações do seu cadastro no serviço MongoDB Atlas; - No terminal do GitPod, execute
cd back-end
e em seguidanpm start
para testar a conectividade ao banco de dados.
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:
npm run ng generate service nome-da-entidade/nome-da-entidade
NOTA: as palavras
generate
eservice
podem ser abreviadas pelas suas primeiras letras:
npm run 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 curso.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:
npm run ng generate component nome-da-entidade/nome-da-entidade-list
NOTA: as palavras
generate
ecomponent
podem ser abreviadas pelas suas primeiras letras:
npm run 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 curso-list.component.html
, curso-list.component.scss
e curso-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\main-menu\main-menu.component.html
, crie um item para acessar seu component de listagem, seguindo os exemplos já existentes nesse mesmo arquivo.
6. Execute o comando npm start
no front-end e, em outro terminal, o comando npm 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:
npm run 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 curso-form.component.html
, curso-form.component.scss
e curso-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 curso-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 npm start
no front-end e, em outro terminal, o comando npm 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. 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.
6. 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.