Agora que você teve sua primeira introdução à Programação Reativa, RXJs,
e o uso do padrão observador e
como Angular alavanca o padrão observador e suporta Programação Reativa,
vamos passar para o nosso primeiro exercício para obter nossos pés
molhado usando os observáveis em Angular.
Neste exercício, vamos atualizar nossos serviços para fazer uso de observables,
porque quando passamos para o próximo módulo onde vamos olhar para o suporte HTTP em Angular,
vamos imediatamente entender que o suporte HTTP em Angular é baseado em torno de observáveis.
Então, é uma boa idéia para nós nos familiarizarmos
com o uso de observáveis nesta lição em si.
Então, vamos atualizar os serviços para exportar observables.
Posteriormente, dentro de nossos componentes,
nós subscreveremos esses observáveis e
obteremos os dados necessários para renderizar as exibições.
Vamos para o exercício a seguir.
Você deve estar se perguntando,
como fazemos uso de RXJs dentro Angular,
e já está disponível para nós?
Então o que você vai notar é que com o Angular CLI,
quando você andaime seu aplicativo Angular,
RXJs é automaticamente incluído lá.
Então, se você for para o arquivo package.json,
você notaria que dentro das dependências,
a biblioteca RxJS já está incluída em seu aplicativo.
Então, tudo o que você precisa usar a partir de RXJs já está disponível para você.
Assim, podemos ir em frente e usar a biblioteca RxJs imediatamente dentro da nossa aplicação Angular.
Se você está construindo seu aplicativo Angular do zero,
então você precisa fazer explicitamente uma instalação npm de RXJs.
Indo para o arquivo dish.service.js,
deixe-me primeiro importar o de
de nossos observáveis 'rxjs'.
Nós também vamos importar- Agora,
quando você usar RXJs dentro de seu aplicativo Angular,
toda a biblioteca não é incluído.
Você só pode importar as partes que você precisa da biblioteca RxJs,
e, em seguida, usá-la em seu aplicativo Angular.
Então, quando seu aplicativo Angular estiver finalmente preparado para implantação,
somente as partes de RXJs que são necessárias
serão incluídas dentro de seu aplicativo Angular.
O operador de atraso.
O operador de atraso nos permite atrasar a emissão do item de nosso observável.
Indo para os métodos,
vamos agora atualizar esses métodos para fazer uso de observáveis,
e vamos retornar uma promessa convertendo o observável
em sua promessa usando o operador ToPromise.
Então, se você já está tendo componentes que estão usando promessas,
e você quer não modificar os componentes,
você pode simplesmente converter um observável para sua promessa e, em seguida,
enviar a promessa para seus componentes.
Como percebemos, as promessas emitirão apenas um item,
enquanto você pode ver que os observáveis são baseados em fluxos.
Então, essa é a limitação que você obterá se você
apenas usar o operador de dois promessa em observables
e fazer uso dele porque o operador ToPromise
permitirá que seu observável emita apenas um valor.
Mas, por enquanto, vamos fazê-lo como o primeiro passo antes de
avançar para a implementação completa e observável de nossos serviços.
Então, indo para o método getDistes,
Eu vou devolver esses pratos.
Então, eu vou remover essa parte e, em seguida, dizer, retorno de.
Se você quiser emitir apenas um valor do seu observável,
você usará o método of,
e que tomará qualquer valor que você deseja emitir lá.
Isso é suficiente para a nossa aplicação atual no momento.
Então, vamos fazer uso disso,
e também queremos atrasar a emissão do valor por dois segundos.
Então, eu vou mudar esta parte do código para usar
o operador de atraso para o meu observável, usando pipe.
Preciso converter isso paraPromise e emitir a promessa.
Então, agora, meu método getDistes é atualizado para fazer uso de um observável,
e, em seguida, converter isso em uma promessa e, em seguida, enviar a promessa para o meu componente.
Portanto, não preciso fazer nenhuma atualização do componente.
Vamos usar a mesma abordagem para atualizar os dois métodos restantes do meu serviço aqui.
Então eu vou apenas copiar esta parte,
e, em seguida, atualizar essa parte,
em seguida, pegar a parte de atraso dela,
e, em seguida, atualizar esta parte para usar o delay
e converter este método ToPromise.
Então, com isso, meu método GetDish também é atualizado.
Deixe-me fazer a mesma coisa com o método getFeaturedDish.
Novamente, se você quiser,
você pode digitar tudo.
Eu estou apenas sendo preguiçoso para apenas cortar e colar e mudar as partes que
Quero alterar e converter este método ToPromise.
É isso. Meu serviço está agora atualizado para retornar promessas de um observável aqui.
Então, com esta atualização,
meu serviço de prato é atualizado para fazer uso de observáveis em vez
do que diretamente usando os valores.
Da mesma forma, vá em frente e atualize o serviço líder e o serviço de promoção.
Agora você notaria que eu já atualizei
o serviço líder para fazer uso de observáveis.
Da mesma forma, eu também atualizei o serviço de promoção para fazer uso de observáveis.
Salve as alterações e vamos dar uma olhada no nosso aplicativo.
Quando você vai para o navegador,
você notaria que seu aplicativo executa exatamente da mesma maneira que antes
e obtém os dados dos serviços exatamente como antes.
Portanto, não é muito de uma mudança dentro de seu aplicativo como tal.
Ele executa exatamente o mesmo.
Então, observe que ao substituir suas promessas por observáveis,
não houve muita mudança dentro de seu aplicativo como você espera.
Agora, vamos um passo adiante.
Vamos agora deixar nossos serviços retornar observables,
e vamos atualizar os componentes para fazer uso de observáveis.
A razão como mencionei,
é porque quando atualizamos nossos serviços para usar
o serviço HTTP para ir a um servidor para buscar os dados,
então nós notaríamos que em Angular os métodos HTTP retornarão observáveis.
Os serviços podem simplesmente passar os observáveis para os nossos componentes e deixar
os componentes subscrever estes observables e fazer uso
dos dados que eles obtêm assim.
Então, este seria um passo intermediário para chegarmos a esse estágio.
Vamos começar a olhar para HTTP no próximo módulo.
Retornando aos nossos serviços,
agora você pode remover o ToPromise primeiro removendo
o operador ToPromise porque não precisamos mais dele
e, em seguida, vamos simplesmente remover o ToPromise deste,
importação observável e, em seguida, deixar
nosso método retornar
observables em vez de promessas.
Então, como eu mencionei,
o que uma promessa pode fazer um observável também pode fazer.
Então, vamos atualizar todos estes para retornar observáveis.
Faça o mesmo com os dois serviços restantes.
Agora você notaria que eu também atualizei o serviço líder
para simplesmente retornar observáveis em vez de promessas,
e também o serviço de promoção foi correspondentemente
atualizado para retornar observável em vez de promessas.
Agora o que isso significa é que precisamos ir e atualizar nossos componentes
para fazer uso de observáveis em vez de promessas como fizemos anteriormente.
Agora, para promessa, vimos que precisamos usar o.then
para obter o resultado quando a resolução da promessa é executada.
Com um observável, o.then é convertido para.subscribe.
A maneira como você consome os dados permanecerá exatamente a mesma.
Então, com essa pequena alteração dentro de seus componentes,
os componentes agora serão capazes de lidar com observáveis em vez de promessas.
Então, indo para todos os quatro componentes que fazem uso dos serviços,
primeiro, vamos para o arquivo menu.component.ts.
No arquivo menu.component.ts,
você notaria imediatamente a linha vermelha rabiscada lá,
sob o então obviamente porque não estamos devolvendo uma promessa.
Em vez disso, estamos retornando um observável.
Então basta converter isso, em seguida, para se inscrever e é isso.
Seu componente de menu agora é capaz de
consumir os valores observáveis que estão sendo emitidos pelo observável.
Faça a mesma alteração no arquivo about.component.ts,
no arquivo dishdetail.component.ts e no arquivo home.component.ts.
Depois de atualizar os arquivos Tapscott componentes restantes,
vamos olhar para o comportamento do nosso aplicativo no navegador.
Vá para o navegador, você não vai notar nenhuma diferença no comportamento da nossa aplicação.
Esta versão do nosso aplicativo Angular é atualizada para usar
observables em vez de promessas.
Então, o componente home aqui,
sobre componente executa exatamente da mesma maneira que antes,
eo componente de menu faz exatamente a mesma coisa.
Além disso, o componente de detalhe do prato se comportará exatamente da mesma maneira que antes.
Com isso, completamos este exercício.
Neste exercício, demos nossos primeiros passos para usar
observáveis dentro de nossa aplicação Angular, atualizando
os serviços e correspondentemente os componentes para
fazer uso de observáveis em vez de promessas.
Este é um bom momento para você fazer um commit git com a mensagem RXJs parte um.