Curso de MEAN - Sessão 5: Exemplo prático
Aula de exemplo prático. Vamos criar uma aplicação real com o MEAN Stack! Aperte o cinto e prepare-se!
O trabalho Workshop de Desenvolvimento com Stack MEAN de Cleuton Sampaio de Melo Jr está licenciado com uma Licença Creative Commons - Atribuição-CompartilhaIgual 4.0 Internacional.
Isso inclui: Textos, páginas, gráficos e código-fonte.
É isso ai, pessoal! Chegou a hora de fazer um exercício final, para pôr em prática tudo o que vimos aqui.
O exercício é incremental, ou seja, você vai reutilizar o que fez na sessão anterior. Se não fez, busque a resposta lá.
Vamos criar uma aplicação que, além de mostrar a lista de artistas, e mostrar detalhes de um artista selecionado, permita incluir novos artistas.
A inclusão de novos artistas, por enquanto, só precisa ter: “nome” e “estilo”, sendo que o estilo deverá ser selecionado a partir de uma ComboBox, preenchida como os dados do esquema “Estilo”.
Deixe as músicas de lado, por enquanto. A aplicação deverá ser SPA - Single Page Application, com uma “div” oculta para incluir novos artistas, invocada a partir de um botão:
Ao clicar no botão “Novo artista...” a “div” oculta aparece:
Ela já vem com a “ComboBox” de estilos preenchida. Você deve informar o nome e selecionar um estilo, caso contrário, mensagens de alerta devem aparecer. Você não deve deixar o usuário tentar incluir um Artista se o nome ou o estilo não estiverem preenchidos, ou tiverem tamanho zero.
Após a inclusão bem-sucedida, a “div” oculta deve desaparecer e a lista de artistas deve ser atualizada para conter o novo artista recém incluído.
Parte 2
Assim que a inclusão de artistas estiver funcionando, você deve tentar fazer a mesma coisa para incluir músicas de um artista selecionado.
Resposta
A respota está na “sessao5/codigo”. Porém, só tem a primeira parte, que é a inclusão de novos artistas. Eu acho que você deve tentar fazer a segunda parte sem ajuda alguma, afinal de contas, já deve ter conhecimento para isso. Eu sei que vai demorar, mas não é esperado que você faça a segunda parte agora.
Dicas
A primeira dica é rever tudo o que já fizemos. Para “div” oculta, usamos o “ng-show”, que pode ser utilizado com variáveis lógicas, ou para testar tamanho de campos. Exemplos:
html(ng-app=”modulo”,ng-init=”togglediv=false”)
…
div(ng-show=”togglediv”)
Outro exemplo, baseado em tamanho de campos:
html(ng-app=”modulo”,ng-init=”txt1=''”)
…
span(ng-show=”txt1.length==0”) mensagem
Você deve criar Rotas na parte
servidora para:
- Obter a página inicial;
- Obter a lista JSON de artistas (ela também será chamada quando você incluir um novo artista);
- Obter a lista JSON de estilos;
- Receber um novo Artista, usando POST;
Como deve ter notado, existe um botão
“Cancelar” na “div” oculta. Se ele for clicado, você deve
zerar os campos (afinal, são modelos que estão no escopo), e
ocultar novamente a “div”.
Após incluir um novo Artista, deve
fazer a mesma coisa, porém deve também invocar novamente a lista de
artistas, de modo que o recém incluído apareça.
O botão “Novo artista...”, depois
de clicado, deve ficar oculto, somente aparecendo se o usuário
cancelar ou incluir o novo artista.
Reveja as sessões anteriores,
especialmente a de inclusão de documentos com Mongoose, e aquela
sobre Angular.js.
Nenhum comentário:
Postar um comentário