Curso Angular 2 – Aula 11: Projeto final (Desafio)

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 11 é praticar todos os conceitos estudados durante o curso de Angular 2.

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você terá praticado e recapitulado todos os conceitos estudados durante o curso de Angular 2.

1. Introdução

Parabéns!

Você chegou na reta final do curso básico de Angular 2, e agora chegou a hora de colocar tudo o que foi aprendido durante o curso em prática em um único projeto!

2. Projeto

O projeto deverá utilizar como base o último código utilizado na aula 10 (link no final do artigo), e a seguir segue um roteiro com sugestões do que você deverá implementar nele.

Fique a vontade para criar sua própria implementação, o roteiro abaixo é só uma sugestão que aborda todos os tópicos estudados durante o curso de Angular 2.

  1. Crie um novo model no StrongLoop/LoopBack, por exemplo Professor, e adicione alguns campos para ele como id, nome, data de nascimento, salário, telefone, etc…
  2. Crie a model no projeto do Angular 2 conforme a definição escolhida no item anterior.
  3. Crie um serviço para o model acima para persistir os dados na API do StrongLoop/LoopBack.
  4. Crie o componente e rotas de navegação para o model escolhido.
  5. Crie as views para as telas de listagem, visualização, cadastro, edição e exclusão de professores.
  6. Adicione validação para todos os campos dos formulários de cadastro e edição de professores.
  7. Utilize filtros para aplicar estilo ao exibir os dados do professor na tela, como por exemplo para formatar o salário, telefone, ou exibir a data de nascimento.

Ao seguir os passos acima você terá criado uma aplicação completa utilizando os principais recursos do Angular 2, e terá recordado e aprendido como utilizar todos os recursos aprendidos durante o curso!

3. Próximos passos

O aprendizado do Angular 2 vai além do que foi estudado aqui, e apesar de agora você ser capaz de criar uma aplicação completa com o Angular 2, muitas coisas ainda podem ser adicionadas ao seu ciclo de desenvolvimento para tornar a aplicação melhor organizada e escalável, conforme alguns tópicos citados a seguir:

  • Automação e otimização do build do sistema para produção.
  • Testes unitários e de integração.
  • Versionamento do código fonte com o Git por exemplo.
  • Documentação do sistema com o JsDoc.
  • Validação do código fonte com o JsHint.

Para continuar aprendendo sobre os tópicos citados acima, assine nossa newsletter ou nosso canal no YouTube para ser notificado sobre novos materiais que serão lançados periodicamente!

Clique para fazer o download dos arquivos do template base da aula 11.

8 comentários em “Curso Angular 2 – Aula 11: Projeto final (Desafio)

  1. De todos os tutoriais ou cursos que assisti este foi o melhor mas com as novas versoes do angular 2 ele ficou desactualizado por isso eu queria saber que alteracoes devo fazer para o codigo ficar de acordo com o RC6 do angular 2

    Obrigado

    1. Olá Rui,

      o recomendado é sempre seguir o código encontrado no próprio site do Angular 2, pois somente lá que conseguimos obter os pacotes com os nomes das últimas versões lançadas.

  2. Oi Marcio,

    Primeiramente, muito obrigado pelo material excelente!

    Eu já havia ouvido falar de Angular e até havia seguido um tutorial para criar um tema em WordPress pra Angular 1, mas me pareceu muito confuso, já que meus conhecimentos de desenvolvimento são básicos. Porém seu material me ajudou muito a entender melhor o funcionamento, agora do Angular 2. Ainda estou engatinhando, tentando dar meus próprios passos e confesso que tenho tropeçado bastante, mas quero continuar tentando.

    Atualmente estou na aula 11, já completei quase todos os ítens do projeto e me deparei com uma dificuldade: como fazer o input do tipo “date” mostrar a data (Date Object), usando two-way binding. Procurei bastante na internet e encontrei algumas soluções. Entre elas, selecionei duas:

    A. uma que me parece ser a maneira mais correta (não consegui fazer funcionar):
    https://github.com/JohannesHoppe/angular-date-value-accessor

    B. outra que me parece ser uma solução paleativa (consegui fazer funcionar), que é adicionar algumas linhas de script ao arquivo “http-util-service.ts”:
    extrairDados(response: Response) {
    let data = response.json();
    if (data.datanascimento){
    let dateString : string = data.datanascimento.toString();
    let days : number = parseInt(dateString.substring(8, 10));
    let months : number = parseInt(dateString.substring(5, 7));
    let years : number = parseInt(dateString.substring(0, 5));
    let goodDate : Date = new Date(years + “/” + months + “/” + days);
    data.datanascimento = goodDate.toISOString().substring(0, 10);
    }
    return data || {};
    }

    Eu gostaria mesmo é de fazer funcionar a opção A, mas meus conhecimentos nesse momento não me permitem. Por acaso você ja havia visto esta solução e conseguiu fazer funcionar? Ou então tem alguma outra maneira, que seja mais adequada?

    Muito obrigado e novamente parabéns pelo excelente material!

    1. Olá Luiz Henrique,

      Obrigado!

      Sim, o date value accessor é a melhor forma de criar a máscara, irei postar nos próximos dias uma aula de como implementar máscaras de entrada de aulas utilizando ele…

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

3 + treze =