Documentação

Neste curso conheceremos aspectos fundamentais da programação com

Angular, um dos frameworks JavaScript mais utilizados atualmente para
a criação de aplicações cliente, que recebem/enviam dados para um
servidor remoto, tendo seu próprio código completamente separado da
implementação deste serviço.

Como cenário para a criação desta aplicação considere as necessidades

do setor administrativo de uma clínica médica, que necessita visualizar
rapidamente um resumo das consultas marcadas, assim como o seu
faturamento em um determinado período.

Um Dashboard é o tipo de aplicação ideal neste caso, pois permite o

agrupamento dos dados, permitindo serem facilmente visualizados e,
portanto, será este o tipo de aplicação que criaremos.

Esta aplicação terá o comportamento de uma SPA que significa Single

Page Application. Se você já utilizou o Facebook ou Gmail já sabe como
funciona uma SPA, pois são aplicações cuja funcionalidade está
concentrada em uma única página. Ao invés de carregar toda a página
ou redirecionar o usuário para uma nova, apenas o conteúdo principal é
atualizado dinamicamente, mantendo toda a estrutura ao seu redor
estática.

Em nossa aplicação oferecemos um menu de navegação lateral, a partir

do qual o usuário poderá escolher o conteúdo a ser apresentado na área
principal da página.
As telas do projeto são apresentadas nos slides a seguir:
Ao longo deste curso veremos que o Angular fornece toda a
infraestrutura necessária para navegação através de rotas, manipulação
do DOM, recebimento e processamento de documentos em formato
JSON através da web, sendo uma opção perfeitamente adequada para
este tipo de cenário.

Conhecendo a Web API

Conforme mencionamos anteriormente, é comum que uma aplicação
cliente necessite receber os dados a serem apresentados de um serviço
remoto. Neste curso usaremos uma Web API que estará acessível a
todos através da internet. Os links para o obter os dados relacionados a
cada tela do Dashboard são estes:

o Resumo -http://projeto.devmedia.com.br/php/api-
dashboard/api/resumo
o Consultas -http://projeto.devmedia.com.br/php/api-
dashboard/api/consultas
o Faturamento -http://projeto.devmedia.com.br/php/api-
dashboard/api/faturamento

Por uma questão de praticidade esta Web API fornece apenas dados
estáticos, ou seja, que não mudam entre as requisições e não requerem,
portanto, que parâmetros sejam enviados. Ainda assim esta Web API é
suficiente para entendermos como é criada uma aplicação cliente com o
Angular.

Sugestão de conteúdo
o DevCast Já ouviu falar em Single Page Applications?
o Curso Primeiros passos com Angular

Para saber mais

o Curso O que é TypeScript?
o Curso TypeScript