Curso
Primeira Single Page Application com Angular
Neste curso você aprenderá a criar uma Single Page Application com o Angular, um dos frameworks JavaScript para criação de aplicações client-side mais utilizados. Para isso, usaremos como cenário um Dashboard, que apresenta um resumo das consultas marcadas, assim como do faturamento de uma clínica médica. Esta aplicação cliente receberá os dados com os quais trabalhará de uma Web API em produção, publicada na internet, e os apresentará em painéis criados para este fim. Ao longo deste curso você aprenderá como trabalhar com o a Angular CLI para iniciar um projeto, criar componentes que manipulam o DOM e conversam entre si através de eventos, bem como a se comunicar com web services por meio de serviços. Com isso você também conhecerá o funcionamento da navegação por meio de rotas no Angular, um dos recursos fundamentais deste framework, muito utilizado neste tipo de aplicação.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
25 horas
Conteúdo do Curso de Angular (10 aulas)
Aula 1 - Introdução
Apresentamos nesta aula a aplicação em execução que construímos ao longo do curso. Trata-se de um Dashboard que apresenta um resumo das consultas marcadas, bem como do faturamento de uma clínica médica, em painéis.
Aula 2 - Criando o projeto
Um projeto Angular possui diversos arquivos, em grande parte destinados a criação da infraestrutura necessária para que a aplicação funcione. Para que não seja necessário criá-los manualmente utilizamos uma ferramenta chamada Angular CLI.
Aula 3 - Executando o projeto
Agora que criamos o projeto podemos executá-lo para vê-lo em funcionamento no navegador. Com isso seremos apresentados a um componente e ao seu papel dentro de uma aplicação Angular, bem como ao mecanismo que permite exibir conteúdo HTML.
Aula 4 - Criando um componente Olá Mundo
Antes de criarmos componentes mais complicados, iniciaremos com um que contém apenas um parágrafo com uma cor de texto personalizada, conhecendo assim a sua estrutura. Veja como criá-lo nesta aula.
Aula 5 - Ng serve
Na última aula vimos que a aplicação foi iniciada com o comando ng serve e, com isso, conseguimos visualizar o componente App no navegador. Agora entenderemos o que aconteceu durante este processo.
Aula 6 - Criando um componente com a Angular CLI
Criar um componente manualmente é um processo repetitivo e que envolve cuidado com certos detalhes. Uma vez que uma aplicação pode conter inúmeros componentes podemos facilitar sua criação automatizando os passos com a Angular CLI.
Aula 7 - Adicionando o Bootstrap
Veremos nesta aula como instalar no projeto o Bootstrap para, a partir dele, determinarmos como será a apresentação do componente painel-simples.
Aula 8 - Conhecendo o Input e o ng-content
Precisamos finalizar a criação do painel-simples, adicionando as classes do Bootstrap. Veremos como manipular o HTML com a sintaxe do Angular.
Aula 9 - Módulos
Veremos aqui um conceito fundamental na criação de componentes: por que declará-los em módulos? Com isso falaremos também sobre as motivações do Angular em adotar este mecanismo.
Aula 10 - Adicionando a Barra de Navegação
Em muitos casos precisamos construir a aplicação sobre um template pronto, que já contém algum HTML/CSS, porém ainda sem funcionalidade. Vamos iniciar a criação da interface do Dashboard, partindo da sua barra de navegação.
Veja outros cursos de Angular
Laboratório Angular: Criando uma Tooltip
Preparando o ambiente para programar com Angular
O que é Angular?