Como usar a pilha MEAN: crie um aplicativo web do zero

neste vídeo você aprenderá qual é a pilha média vamos configurar um novo projeto construir o back-end e o front-end e conectar ao MongoDB se você quiser acompanhar há um escrito versão deste tutorial e o código completo está disponível no Github há um link na descrição do vídeo então qual é a pilha média bem a pilha refere-se a uma combinação de tecnologias a pilha média consiste em MongoDB Express Angular e node.js e há outras semelhantes variações como o M Stack, que troca Angular por React agora na pilha média, usamos o MongoDB para criar a camada de banco de dados node.js e Express para compor a camada intermediária ou do aplicativo e Angular para implementar a camada de apresentação neste tutorial de pilha média nós Vamos utilizar essas quatro tecnologias para desenvolver um aplicativo básico que seja capaz de registrar as informações dos funcionários e, em seguida, exibi-las usando um front-end Angular , implementaremos todas as operações CRUD básicas de criação, leitura, atualização e d eleger nós poderemos visualizar todos os funcionários adicionar novos funcionários atualizar os funcionários existentes e excluir funcionários existentes então, para começar, vamos usar o node.js versão 20 plus e um editor de código para isso usará o visual Studio e ambos são downloads gratuitos, além de que você também precisará de um MongoDB Atlas cluster gratuito O Atlas é nosso serviço de banco de dados baseado em nuvem nosso cluster de camada gratuita nunca expira e não exige um cartão de crédito se você ainda não tiver configuração do seu cluster, temos um vídeo para orientá-lo sobre isso também, então pause esse vídeo Go assistir a esse e volte aqui quando terminar agora a pilha média permite-nos criar uma solução completa e para este projeto nós vamos criar o back-end e o front-end o front-end que vamos implementar usando o Angular e o back-end que vamos implementar usando o MongoDB node.js e o Express e, por isso, vamos chamar o cliente front-end e servidor de backend. Usarei comandos shell para criar diretórios e arquivos, mas você pode usar qualquer método que seja adequado para você primeiro, criarei um novo diretório chamado exemplo de pilha média e, em seguida, moverei para esse diretório dentro desse diretório Farei outro diretório chamado servidor e criarei outro diretório nesse diretório chamado SRC de origem agora mudar-se-á para o diretório do servidor e, em seguida, executará npm e o nit para inicializar um JSON de pacote, então agora, se observarmos nossa estrutura de diretório, temos o exemplo da pilha que temos servidor dentro dessa pasta de origem e nosso pacote JSON a seguir, instalaremos nossas dependências e instalaremos os núcleos EMV Express e MongoDB agora, como o Angular usa Typescript , Go usar o Typescript como backend também, então instalaremos o Typescript junto com os tipos necessários como dependências de desenvolvimento agora vamos criar alguns arquivos, vamos criar um arquivo de configuração Typescript e um arquivo EnV para nossas variáveis de ambiente em seguida, vamos ao CD em nosso diretório de origem e criar um banco de dados. Arquivo Typescript que um funcionário roteia. Funcionário do arquivo Typescript . Typescript e servidor. Typescript agora vemos em nossa estrutura de pastas que temos nosso pacote JSON Typescript config nosso arquivo EnV e, em Fonte, temos nosso banco de dados que nosso funcionário roteia funcionário e servidor, Go primeiro entrar em nosso arquivo de configuração Typescript e colaremos nossa configuração para que nosso configuração básica estamos monitorando nosso diretório de origem e tudo dentro dele e nossa saída vai estar em disco estamos usando commonjs e Es 2016 coisas muito padrão para Typescript então salve isso e feche-o e da próxima vez trabalharemos em nossa interface de funcionário, então se Go aqui para funcionário. Typescript e eu colará isso, então vamos importar o MongoDB e criar nossa interface de funcionário, então todos os nossos funcionários devem ter um nome que seja uma posição de string que seja um nível de string que possa ser júnior médio ou sênior e, opcionalmente, terá um campo ID de sublinhado D que é um ID de objeto do MongoDB isto é opcional porque é gerado pelo MongoDB portanto, quando criarmos um novo funcionário, inicialmente não teremos este campo, mas quando recuperarmos um funcionário do banco de dados ele terá o campo que podemos ver que isso é opcional no ponto de interrogação aqui, então Go em frente, salve e feche-o em seguida, trabalharemos no banco de dados. Typescript então aqui vamos usar o MongoDB novamente e, em seguida, vamos trazer a interface de funcionário que acabamos de criar, exportaremos nossas coleções que podem ter funcionários que são de um funcionário do tipo de coleção Tobe temos nosso conecte-se à função de banco de dados que aceitará uma string de caracteres de urri aqui criaremos nosso Monga para ser o cliente usando esse URI e nos conectaremos ao nosso cliente essa é uma função assíncrona O8 então estamos aguardando essa conexão e então vamos obter nosso banco de dados, que é o exemplo de pilha média agora, se esse banco de dados ainda não estiver em nosso cluster, ele será criado automaticamente para nós agora, em seguida, vamos aplicar a validação do esquema agora isso vai garantir que todos os nossos os documentos seguem a forma da nossa interface de funcionário vamos ver como isso funciona abaixo aqui temos nossa função de aplicação de validação de esquema que aceita nosso banco de dados e aqui estamos usando um JSON schema se você quiser saber mais sobre a validação de JSON schema há um link no vídeo d descrição mas isso vai aplicar essa validação de esquema em nosso banco de dados então isso vai garantir que isso seja do tipo objeto que os campos obrigatórios são posição e nível do nome e as propriedades a seguir podem estar lá sublinhado posição e nível do nome ID agora esta validação é feito no nível do banco de dados e esta é uma boa prática para garantir que não armazenemos acidentalmente dados que não correspondem à forma do nosso modelo. Então, depois disso, de volta para cima, criaremos uma coleção de funcionários que será em nosso banco de dados e, em seguida, a coleção é chamada de funcionários agora novamente, se ainda não tivermos essa coleção, ele a criará para nós em seguida, adicionaremos isso à nossa coleção. funcionários, vamos fazer isso como uma coleção igual a funcionários novamente é o que estamos exportando aqui no topo, estamos exportando nossas coleções, então Go em frente e salvaremos isso e fechá-lo em seguida, vamos abrir nosso arquivo nossov e precisamos Defina nosso URI Atlas para que o seu seja semelhante, mas um pouco diferente deste agora, aqui você especificará seu nome de usuário e sua senha e, em seguida, seu cluster você pode obter sua string de conexão a partir da UI do Atlas e aqui está o que parece como no banco de dados, você pode Go para conectar e, em seguida, drivers e esta é a minha connection string novamente, temos que colocar seu nome de usuário e senha agora, certifique-se de salvar esse arquivo e, em seguida, passaremos para o servidor. Arquivo Typescript aqui, vamos usar o pacote EnV para que possamos ler nossas variáveis de ambiente, vamos usar Express e núcleos e, em seguida, usar a função de conexão ao banco de dados que criamos em nosso banco de dados. Typescript então aqui estamos carregando nossas variáveis de ambiente executando a configuração EnV em seguida, estamos obtendo nossa variável de ambiente Atlas URI se não tivermos o Atlas URI definido, consoleremos o erro e a mensagem e saiamos do aplicativo em seguida vamos executar a conexão ao banco de dados em nosso URI do Atlas e, depois disso, iniciaremos nosso aplicativo Express , usaremos núcleos e diremos para ouvir na porta 5200 e então consolemos registre que o servidor está sendo executado nessa porta do host local e, é claro, se houver um erro, nós o detectaremos e, em seguida, console o erro esse erro Go em frente, salve isso e feche este arquivo tudo bem agora que devemos ser capazes de executar isso e certifique-se de que funcione, então para isso, vamos usar o nó Typescript , executaremos o nó npx Typescript e depois esse servidor. Arquivo Typescript em nosso diretório de origem, se tudo correr bem, você deverá ver o servidor API em execução no host local 5200 tudo bem, ótimo trabalho. então vamos fazer isso em nossos funcionários. route. Arquivo Typescript e, para começar, vamos importar Express o ID de objeto do MongoDB e nossas coleções do nosso arquivo de banco de dados, vamos implementar um roteador de funcionário que será um roteador Express e vamos contar para usar JSON , nossa primeira rota será shard e será uma solicitação de obtenção . Vamos fazer isso assíncrono e, em seguida, envolver tudo em uma captura tri, é claro, e primeiro vamos aguardar nossos funcionários da coleção . encontre e transforme isso em uma array para que o theind com chaves vazias vai encontrar tudo, então isso vai obter todos os funcionários do nosso banco de dados se tudo correr bem, enviaremos um status de 200 e enviaremos os funcionários de volta para o front end agora observe esses símbolos de ponto de interrogação aqui são operadores de encadeamento opcionais, isso nos permite ler o valor de uma propriedade agrupada sem lançar um erro se a propriedade não existir se não existir, apenas retornará indefinido isso é vai nos ajudar a manter o Typescript satisfeito e, se algo não estiver lá, ele retornará indefinido depois disso, teremos outro endpoint de obtenção de que será o ID do slon isso nos permitirá obter um registro individual, então o ID aqui podem ser passados como paims para nossa função, então vamos obter esse ID aqui a partir de nossa solicitação ps. ID novamente, se não estiver lá, usaremos o encadeamento opcional para torná-lo indefinido e, em seguida, definiremos nossa consulta aqui, que vai procurar o ID sublinhado que é igual ao ID que passamos por nossos filhos e, finalmente, nosso funcionário é vai para AWA nossas coleções. funcionário. encontre um e passe essa query para que ela encontre um funcionário. Se tivermos um funcionário, retornaremos um status de 200 e enviaremos esse funcionário de volta para o front-end, caso contrário, enviaremos um 404 e Digamos que não consigamos encontrar o funcionário com esse ID específico e, se mais alguma coisa acontecer, nós a detectaremos em nossa tentativa de captura aqui, retornaremos um 404 e diremos que não foi possível encontrar o funcionário logo após isso. Definiremos nossa rota do post que nos permitirá salvar um novo funcionário então o post será para reduzir nosso funcionário será passado para esse endpoint por meio da solicitação. body, então aguardaremos as coleções. funcionários. insira um e insira o funcionário que foi passado para nós para que os resultados estejam aqui se reconhecido é verdadeiro, retornaremos um status de 2011 e diremos que criamos o funcionário, caso contrário, enviaremos um status de 500 falhou ao criar um novo funcionário e, é claro, temos uma tentativa de captura para tudo e, se ocorrer outro erro, retornaremos esse erro logo em seguida, temos nossa rota de atualização, que será um coloque em um ID de barra então isso atualizará um registro individual então, novamente, obteremos esse ID de nossos compartimentos e obteremos as novas informações de nossa solicitação. corpo, criaremos nossa consulta que selecionará esse ID específico e, em seguida, nossos resultados serão coleções. funcionários. atualizar um passaremos em nossa consulta para identificar esse ID de objeto e, em seguida, passaremos em nosso novo objeto, então vamos dizer definir funcionário, então isso atualizará todos os campos de funcionário existentes com os campos que passamos a esse endpoint, portanto, se tivermos um resultado e uma contagem correspondente de resultados, retornaremos um status de 200 e enviaremos a mensagem atualizada de um funcionário, caso contrário, se não tivermos uma contagem correspondente de resultados, o que significa que não correspondemos qualquer coisa, enviaremos um 404 falha em encontrar o funcionário e, se algo mais acontecer, apenas enviaremos um status de 304 falha em atualizar o funcionário e, é claro, novamente cercando tudo em um tri catch e nós basta retornar um erro desconhecido se isso acontecer e, em seguida, nossa última rota será nossa rota de exclusão, então temos nossa exclusão para/ ID novamente escolhendo um único ID aqui, vamos obter isso de nossos pams nossa consulta vai identificar esse documento com esse ID e depois chamaremos as collections. funcionários. exclua uma passagem em nossa query e tivermos nossos resultados aqui; portanto, se tivermos resultados e a contagem excluída, retornaremos um status de 202 e diremos removido um funcionário se não tivermos um resultado que enviaremos um 400 falha ao remover um funcionário se não tivermos uma conta excluída em 404 falha ao encontrar um funcionário e tentará novamente capturar com um erro desconhecido se mais alguma coisa acontecer, então Go em frente e salve este arquivo e feche agora próximo precisamos instruir o servidor Express a usar as rotas que definimos então em nosso servidor. Arquivo de Typescript na parte superior, Go em frente e importe nosso roteador de funcionário e, em seguida, logo antes do aplicativo. ouça, digamos app.use roteador de funcionário do SL, então aqui estamos informando que o caminho do funcionário do SL deve usar esse roteador de funcionário e seria a raiz desse roteador de funcionário, então vamos salvar isso e então precisamos reiniciar nosso servidor para que controle C e vamos executar isso de novo demais, então é isso para o servidor. O próximo passo é construir nosso aplicativo da Web Angular para interagir com ele agora para criar nosso aplicativo da Web Angular , vamos usar a Angular CLI do para estruturar o aplicativo primeiro, vamos abrir um novo terminal, precisamos manter nosso servidor em execução neste terminal e Go em frente e abra um novo, se você ainda não tiver a Angular CLI instalada, execute este comando npm install DB na Angular CLI isto instalará a Angular CLI globalmente agora Preciso ter certeza de que estou na pasta de exemplo de média pilha, então vamos para o CD e depois executarei este comando ing novo cliente-- modelo inline D- estilo inline D- mínimo D- roteamento O estilo D- é igual a CSS, então o que é isso goi ng de fazer é criar um novo diretório de clientes e instalar nosso aplicativo Angular neste diretório o modelo inline e o estilo inline estão informando que queremos manter tudo em um arquivo em vez de criar um arquivo HTML separado e um arquivo CSS separado o o sinalizador mínimo dirá para pular qualquer configuração de teste, já que não vamos cobrir testes neste tutorial, vamos mantê-lo mínimo o sinalizador de roteamento gerará um módulo de roteamento e o estilo é igual a CSS significa apenas que queremos usar CSS então vamos executar isso agora, dependendo do tipo de aplicativo que você está construindo, você pode ou não querer habilitar o SSR e o Go , então depende de você agora a instalação dessas dependências pode demorar um pouco. em seguida, vamos navegar até nosso diretório de clientes e, em seguida, só para ter certeza de que está tudo funcionando, podemos dizer NG server - O the- O vai abrir automaticamente isso em nosso navegador e lá Go nós está funcionando e está sendo executado no Local Host Po rt 4200 a última coisa que vamos instalar antes de começarmos a construir o aplicativo é material Angular , então temos nosso servidor em execução e temos nosso cliente em execução, vamos abrir outro terminal e vamos CD em nosso exemplo de pilha média e diretório do cliente em seguida, vamos ao ngad no material Angular slm ele vai instalar o pacote, diremos que sim, e isso nos permitirá usar o material Angular para nosso estilo e você pode selecionar qualquer tema de cor que quiser quando se você deseja usar os Angular de Angular lado do cliente agora o Angular CLI torna isso superfácil podemos executar esse comando NG gerar interfaceEmployee e ver o que acontece ele criou esse funcionário. Typescript para nós, então se navegarmos aqui para o cliente e, em seguida, para o aplicativo Source e agora temos esse funcionário. Arquivo de Typescript com uma interface pronta para definirmos, assim como fizemos no lado do servidor, definiremos o nível de posição do nome e, em seguida, o ID opcional Go em frente e salve o próximo que vamos criar um serviço de funcionário Angular recomenda separar sua lógica de negócios da lógica de apresentação, então é por isso que vamos criar um serviço que lida com toda a comunicação com nosso endpoint de funcionário uh da API esse serviço será usado por todos os componentes em nosso aplicativo então, novamente nós vamos usar o Angular C e vamos executar NG gerar ServiceEmployee, então agora ele criou esse serviço de funcionário e preparou isso para nós, então Go substituir esse andaime e examinaremos isso código então do núcleo Angular que vamos usar injetado e Signal agora os sinais são a nova maneira de fazer as coisas e, se você quiser saber mais sobre sinais, há um link na descrição do vídeo que vamos usar o cliente HTTP do Angular comm em HTTP e, em seguida, nossa interface de funcionário que acabamos de criar agora injetado define onde isso será usado e isso será usado em nossa rota e então temos nossa classe de serviço de funcionário dentro dessa classe temos nosso URL então agora mesmo temos estamos em desenvolvimento local, então estamos usando o host local 5200 para o nosso servidor e, em seguida, vamos criar alguns sinais que podemos acessar dentro dessa classe para funcionários e funcionários em nosso construtor, vamos use nosso cliente HTTP e, em seguida, temos uma função privada aqui que atualiza nossos funcionários, então isso vai uh usar o cliente HTTP para obter e, em seguida, no URL funcionários do SL lembram em nosso servidor Os funcionários do SL vão obter todos os nossos funcionários e nós Go em frente e nos inscrevermos nisto e definirmos nossos funcionários de modo que isso seja definido como uma variável aqui funcionários e, em seguida, temos uma função pública aqui que vai obter funcionários que vai executar essa atualização e depois retornar funcionários na próxima nós Definir como funcionário o isso vai conseguir um único funcionário, então temos um ID aqui de novo isso vai usar o cliente HTTP e, em seguida, os funcionários da URL , mas definir um ID então lembre-se em nosso servidor que vai retornar um funcionário individual, vamos assinar isso e definiremos nosso funcionário aqui e, em seguida, a devolvemos temos outra função uh aqui que cria um funcionário, então passamos nosso funcionário para essa função novamente ela usa nosso cliente HTTP para publicar em nossa rota de funcionários do slm passamos o funcionário e a resposta tipo é texto, temos nossa rota de atualização e nossa rota de exclusão assim como as outras, então novamente estamos definindo esse serviço para manter toda a nossa lógica separada então Go em frente, salve isso e feche-o em seguida, vamos fazer algumas alterações em nosso app.config Go em frente e abri-lo, precisamos adicionar a isso nosso cliente HTTP fornecido e, com a busca, isso ativará o cliente HTTP em nosso aplicativo já temos nossos provedores padrão uh aqui, mas precisamos adicionar nosso cliente HTTP provedor também para ela e estamos adicionando nosso cliente HTTP fornecido e estamos ALS Al passando com fetch para usar a API de fetch padrão e vamos salvar isso e fechar isso e agora podemos começar a gerar nossos componentes em Angular um componente é um pedaço de código reutilizável que pode ser usado para exibir uma visualização então de volta ao nosso terminal novamente, vamos usar a Angular CLI Angular , diremos componente de geração de NG e o nome do componente será funcionários Das lista para criar uma pasta aqui lista de funcionários sob aplicativo dentro do qual temos nossa lista de funcionários components.ts e temos um andaime básico aqui que vamos substituir, então vamos percorrer isso a partir do núcleo Angular que estamos usando o componente on anit e o sinal gravável que estamos extraindo nossa interface de funcionário, nosso serviço de funcionário, nosso módulo roteador e, em seguida, alguns componentes materiais para que tenhamos nossa tabela de materiais, nosso botão e nosso cartão e, é claro, vamos usar todos eles em nossas importações aqui para garantir que eles reutilizáveis, temos alguns estilos básicos em Adicionei aqui para fazer a largura da tabela 100% e então uh o primeiro botão de tipo adicionará um pouco de borda à direita, então apenas alguns estilo básicos aqui o resto é cuidado pelo material Angular então aqui está nosso modelo, nossa marcação então, novamente, em vez de ter arquivos separados para eles, o que é totalmente possível, vamos incluir nossos estilos e nossa marcação HTML bem aqui neste arquivo de componente, então temos um cartão aqui em nosso modelo é o a primeira coisa que temos nosso cabeçalho lista de funcionários e, em seguida, temos o conteúdo do cartão dentro do conteúdo do cartão que temos uma tabela e essa é uma coisa legal que o material nos ajuda com que fornecemos uma fonte de dados nossa fonte de dados é funcionários estes são nossos funcionários sinal que criamos em nosso serviço de funcionários, então a seguir vamos Definir nossas colunas, temos um nome, uma posição, um nível e uma coluna de ação e, em seguida, o conteúdo delas, então temos o nome do elemento, que é proveniente de funcionários, aqui temos a nossa posição de elemento o nosso elemento t e a última coluna é a nossa coluna de ação é aqui que teremos alguns botões, teremos um botão de edição e um botão de exclusão o botão de edição usará o link do roteador e nos enviará para editar barra e, em seguida, estamos definindo o ID do elemento, então isso nos permitirá incluir as informações desse elemento nessa rota e, em seguida, excluir, vamos ter um clique aqui que vai chamar a exclusão do funcionário que passa pelo ID do elemento configuração realmente básica e, no final, aqui estamos definindo nossa linha de cabeçalho e o restante de nossas linhas regulares na parte inferior do cartão, temos nossas ações de cartão, temos um último botão que é adicionar um novo funcionário e, novamente, estamos vai usar o link do roteador para nos enviar para a nova rota então Shard novo tudo bem depois que temos nossa classe de componente de lista de funcionários que implementa em um nit estamos criando nossa variável de funcionários inicialmente está em branco como um sinal gravável que estamos definindo nossas colunas exibidas é para nós passarmos para Angular Material para contar quais colunas queremos exibir em nosso construtor temos serviço de funcionários em um nit vamos buscar funcionários, então vamos ver que está aqui em baixo funcionários privados, então isso. funcionários vai igualar isso. serviço de funcionários. funcionários, então, novamente, estamos extraindo de nosso serviço de funcionários nossa variável de funcionários e estamos chamando nosso serviço de funcionários obter funcionários, então isso vai dizer para Go em frente e buscar todos os nossos funcionários, temos nossa função de exclusão de funcionário aqui, que é chamado do nosso botão de exclusão acima e isso vai usar novamente nosso serviço de funcionários e chamar a função de exclusão de funcionários adicionando o ID que vamos assinar e, depois disso, vamos buscar nossos funcionários novamente para fazer Certifique-se de obter os dados atualizados, então essa é a lista inteira, Go salvar isso e Go em frente e feche isso agora, antes de irmos ver isso, precisamos adicionar algumas coisas aqui que Go ao nosso aplicativo. rotas. Typescript e precisamos definir nossas rotas primeiro, vamos extrair nosso componente de lista de funcionários que acabamos de criar e não temos rotas no momento, então vamos adicionar uma nova rota para que o caminho fique em branco, que é o nosso caminho raiz para o qual vamos para dizer a ele para exibir esse componente neste caminho e esse é um título opcional, diremos que o título desse caminho é lista de funcionários, então Go salvar isso e fechar o arquivo e, em seguida, acessaremos nosso aplicativo. components.ts, vamos importar nosso componente de lista de funcionários aqui e um módulo de barra de ferramentas de material que precisamos adicionar às nossas importações, vamos incluir alguns estilos básicos aqui e vamos substituir esse modelo para que tenhamos nossa barra de ferramentas que vai dizer sistema de gerenciamento de funcionários e, em seguida, em nosso principal, vamos ter nossa saída de roteador agora, a saída do roteador vai exibir o que quer que a rota o tenha enviado, então Go salvar isso, fechá-lo e agora, se voltarmos ao nosso navegador devemos ver algo temos nossa barra de ferramentas do sistema de gerenciamento de funcionários na parte superior e, em seguida, temos nosso cartão com uma tabela e uma tabela em branco, é claro, como ainda não temos nenhum dado, temos nosso botão de adição de um novo funcionário, mas esse ainda não funciona, mas estamos chegando a algum lugar vamos passar para a próxima etapa tudo bem em seguida vamos criar uma página para adicionar funcionários, então vamos precisar de um formulário para preencher o nome posição e nível para criar esse novo funcionário e, para editar funcionários, vamos g precisa de um formulário semelhante, então primeiro vamos criar o formulário do funcionário, então novamente vamos usar o formulário de funcionário do Angular CLI NG GS, então o G é uma abreviação de gerar C é uma abreviação para componentes, então vamos gerar um novo componente chamado formulário de funcionário Das, então é adicionado que aqui formulário de funcionário e componente de formulário de funcionário vamos substituir esse andaime básico e Go -lo para que tenhamos um emissor de evento de efeito de componente entrada e saída do núcleo Angular Angular Angular Angular Angular ID ID ID ID ID ID Go Typescript ID Go Go Go Go Go então temos nosso validador de construtor de formulário e módulo de formulário reativo a partir de formulários temos alguns módulos de material nossa entrada nosso botão de opção de campo de formulário botão regular e, é claro, precisamos de nossa interface de funcionário, vamos garantir a importação de todos os módulos necessários aqui, temos alguns muito básicos Estilos ocorrendo aqui e, em seguida, nosso modelo, começando com nosso grupo de formulários, será chamado de formulário de funcionário e, em seguida, para nosso envio, temos nossa função de formulário de envio que examinaremos em apenas um minuto nosso primeiro t para o campo é o nosso nome e então temos alguma validação ocorrendo aqui, então um se é a maneira de dizer se o nome. inválido então, se isso for verdade, vamos exibir este erro o nome deve ter pelo menos três caracteres nosso próximo campo de formulário é a nossa posição então aqui vamos fazer outra validação aqui e dizer que a posição precisa ser em pelo menos cinco caracteres e isso também é definido como obrigatório, bem como a entrada do nome também é definido como obrigatório em seguida, temos nosso grupo de opção de comando, então temos nossas opções de júnior médio e sênior e depois temos nosso botão para adicionar o funcionário que vamos desabilitar esse botão se o formulário do funcionário for inválido e, em seguida, vamos dar uma olhada em nossa classe nossa classe de componente do formulário de funcionário uh vamos ter um estado inicial, então novamente esse formulário será reutilizado se estivermos atualizando ou adicionando um novo funcionário para que possamos ter um estado inicial se houver um funcionário, vamos criar uma saída para os valores do nosso formulário alterados, então se eles tiverem mudado, vamos emitir um evento e a mesma coisa que o formulário é enviado emitirá um evento definiremos nosso funcionário O formulário aqui é este. grupo de cães do construtor de formulários, então estamos agrupando essas entradas como nosso formulário de funcionário, então temos nosso nome o valor inicial está em branco e depois temos nossos validadores aqui é obrigatório e o comprimento mínimo é três iguais para a posição o valor inicial está em branco é necessário que o comprimento mínimo seja cinco e, em seguida, o nível inicial será júnior e é necessário para o nosso construtor que tenhamos nosso construtor de formulários e vamos ter um efeito aqui, pois estamos usando sinais para o formulário de funcionário. O valor de conjunto será definido toda vez que um efeito for executado, de modo que o nome seja igual ao estado inicial. nome ou espaço em branco se não houver posição de estado inicial posição da mesma coisa ou link em branco e então nível o estado inicial ou júnior próximo vamos obter nossa posição de nome e nível que será do nosso formulário de funcionário. pegue o nome da posição e do nível que nos permitirá usá-los em nosso modelo Por último, temos nosso formulário de envio, então, quando o formulário for enviado, vamos emiti-lo. formulário de funcionário. valor como funcionário então o valor de todas as nossas entradas dentro do nosso formulário de funcionário será então emitido tudo bem vamos salvar isso e fechá-lo e, em seguida, de volta ao nosso terminal, vamos criar nosso componente de funcionário do anúncio então, novamente, vamos NG gerar um componente chamado adicionar funcionário então aqui temos nosso funcionário do anúncio e vamos substituir esse andaime e aqui temos nosso componente nosso roteador nosso componente de formulário de funcionário que acabamos de criar nossa interface de funcionário nosso serviço de funcionário e nosso módulo de cartão de material então usaremos nosso funcionário componente de formulário e nosso módulo de cartão aqui como Importações e aqui está nosso modelo bem básico nós temos nosso cartão nosso cabeçalho do cartão é adicionar um novo funcionário e então o conteúdo do nosso cartão será o nosso formulário de funcionário dform de formulário de funcionário é o componente de formulário que nós acabou de criar agora o formulário enviado quando for executado vamos executar o funcionário do anúncio com o evento que obtemos então aqui está como isso se parece em nossa classe nosso componente de funcionário do anúncio classe temos nosso construtor que temos nosso roteador e nosso serviço de funcionário que estamos usando e aqui está nossa função de adição de funcionário, então ela aceita o funcionário que será os valores que obteremos desse formulário e então vamos executar o Serviço de Funcionários lembrar nosso serviço que criamos vamos executar a função de criação de funcionário dentro dela e passá-la ao nosso funcionário, vamos assinar isso e, em seguida, navegaremos para a barra então, depois de criada, navegaremos de volta para a lista se houver um erro, alertaremos isso e console o erro o erro e, por último, vamos buscar funcionários do nosso serviço de funcionários para atualizar nossos funcionários vamos salvar isso, fechá-lo e, em seguida, de volta ao nosso terminal, vamos para criar nosso componente de edição do funcionário, então vamos abri-lo perto do terminal e substituiremos o conteúdo de lá desta vez estamos usando o componente em um sinal gravável do núcleo temos nosso formulário de funcionário novamente do roteador vamos usar o aacti rota e roteador avaliadas nós temos nossa interface de funcionários nosso serviço de funcionários e nosso módulo de cartão do material tudo bem, garantiremos a importação de nosso componente de formulário e nosso módulo de cartão e aqui está nosso modelo novamente temos um cartão um cabeçalho de editar um funcionário, nosso conteúdo será nosso formulário de funcionário e, em seguida, o estado inicial aqui que estamos passando em nosso sinal de funcionários, obteremos isso um pouco abaixo aqui e, em seguida, no formulário enviado, vamos chamar editar funcionário com isso evento, então vamos dar uma olhada no código disso, então nossa classe de componente de edição funcionário implementa em um nit, vamos Definir funcionário como um objeto em branco primeiro como um sinal gravável em nosso Construtor temos nosso roteador nossa rota e nosso funcionário serviço agora em um nit, vamos obter nosso a partir de nossos parâmetros, se não tivermos um , alertaremos que não há fornecido e, em seguida, obteremos nosso funcionário que vamos usar isso Serviço de funcionários para obter o uh do funcionário usando esse a nd então vamos dizer isto. funcionário é igual a isso. serviço. funcionário, então agora o funcionário aqui em cima tem um registro se o foi encontrado, então chamamos novamente nossa função de edição de funcionário, que aceita esses parâmetros atualizados do formulário então isso. serviço de funcionários. atualizar funcionário chamamos essa função de passar por isso. funcionário que é um sinal, porque é um sinal que temos que chamá-lo de uh nós, então estamos passando o desse sinal ou em branco e, em seguida, estamos passando os valores atualizados contidos em nosso objeto de funcionário que assinaremos isso uma vez feito isso, vamos navegar de volta para a rota e, se houver um erro, é claro que consoleremos o erro, então salvar e fechar que a última coisa que precisamos fazer é entrar em nosso aplicativo. rotas. e precisamos importar nossos novos componentes, nosso componente de adição de funcionário e nosso componente de edição de funcionário e, em seguida, adicionaremos mais dois caminhos aqui está nosso caminho raiz, então teremos um novo caminho que é SL novo e para esse caminho nós deseja exibir o componente de adição de funcionários Adicionaremos um caminho que é editar slth e, para isso, exibiremos o componente de edição de funcionário, então vamos salvá-lo e fechá-lo Testá-lo, não devemos fazer isso reiniciar qualquer coisa basta ao navegador e vamos testá-lo adicionar um novo funcionário dizer que a posição de Jesse Hall é desenvolvedor Advogado diremos meio e adicionar e lá nós podemos editá-lo vamos alterá-lo para adição sênior e agora é pai e se eu excluí-lo, ele deve excluir outro sucesso para poder criar seu primeiro aplicativo de pilha média agora para obter mais ideias e conceitos avançados para o nosso centro de desenvolvedores há um link na descrição do vídeo e, se tiver alguma dúvida, os fóruns da nossa comunidade novamente há um link no vídeo o descrição agora se este vídeo foi útil dê um joinha E se inscreva para mais conteúdo do MongoDB