Primeira Single Page Application com Angular

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.

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.

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.

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.

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.

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.

Veremos nesta aula como instalar no projeto o Bootstrap para, a partir dele, determinarmos como será a apresentação do componente painel-simples.

Precisamos finalizar a criação do painel-simples, adicionando as classes do Bootstrap. Veremos como manipular o HTML com a sintaxe do Angular.

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.

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.