Agora que temos uma compreensão de aplicativos de página única,
vamos continuar trabalhando em
nossa aplicação angular que temos trabalhado nos exercícios até
agora e desenvolvê-lo em
o aplicativo de página única usando o suporte do módulo de roteador angular.
Nós já incluímos vários componentes como parte de
nossa aplicação angular no exercício anterior e já temos
configurado para nossa aplicação angular para ser capaz de rotear
entre dois componentes diferentes.
Agora, vamos integrar mais em nossa aplicação angular e
desenvolvê-lo na aplicação angular de pleno direito juntamente com
a navegação entre os vários pontos de vista
renderizados pelos vários componentes da nossa aplicação.
Continuando com a nossa aplicação como está agora,
temos a casa sendo renderizada quando você navega para a nossa aplicação
agora e, em seguida, o modelo Home tem
foi mostrado entre o cabeçalho eo rodapé e, em seguida, quando você vai para o Menu,
o menu está sendo mostrado entre o cabeçalho e o rodapé na vista aqui.
Agora, obviamente, precisamos integrar os outros componentes que
incluímos em nossa aplicação angular
para desenvolver isso como uma aplicação angular de pleno direito.
Neste exercício, vamos integrar o ContactComponent,
atualizaremos o modelo para o ContactComponent,
também atualizaremos o modelo para o HomeComponent e daremos este
um passo em frente em direção à nossa aplicação angular de página única.
Vamos começar com o ContactComponent.
Para começar, primeiro copie o modelo para
o ContactComponent que lhe dei nas instruções de exercício e, em seguida,
colá-lo no arquivo contactcomponent.html para que possamos liberar
para fora a visão real do nosso ContactComponent com um pouco mais de detalhes aqui.
Agora, você pode ver que eu cortei e colado o código para
o arquivo de modelo das instruções em meu ContactComponent.
Nós vamos completar a integração de
o ContactComponent em nosso aplicativo e, em seguida, vamos olhar para
como o ContactComponent parece e, em seguida, voltar
e rapidamente olhar para este código um pouco mais tarde.
Agora, para integrar o ContactComponent em nossa aplicação angular,
precisamos incluir um caminho para o ContactComponent em nossas rotas.
Então, indo para o arquivo routes.ts logo após o Menu,
Eu vou incluir outro caminho para o ContactComponent Vou usar
o URL como entre em contato conosco e
o componente correspondente é ContactComponent aqui.
Então, com isso, temos agora integrado nosso ContactComponent
em nosso aplicativo e vamos salvar as alterações para
isso e, em seguida, também vamos precisar atualizar o componente de cabeçalho e atualizar
o um link no componente de cabeçalho para nos ajudar a navegar para o ContactComponent.
Então, eu só vou copiar isso do menu um link na barra de ferramentas
meu componente de cabeçalho lá e, em seguida, copiar isso para
o ContactComponent e, em seguida, atualizá-lo como entre em contato conosco.
Vamos salvar as alterações em todos os arquivos e
então dar uma olhada no aplicativo resultante.
Indo para o aplicativo em nosso navegador,
se agora navegar para o ContactComponent,
podemos ver que os detalhes do ContactComponent são exibidos
aqui entre o cabeçalho e o rodapé como esperamos.
Então, dentro do ContactComponent,
temos o título ContactUs
lá e, em seguida, algumas informações de localização onde eu exibia o endereço.
Então, isso é semelhante ao endereço que
temos no rodapé, então eu não vou explicar que no detalhe
, então temos outra parte aqui onde incluímos o Mapa da nossa Localização.
Nós não vamos fazer isso no momento,
vamos apenas deixá-lo em branco e, em seguida, também você vê que eu tenho
três botões que eu incluí aqui para Chamada, Skype e E-mail.
Estes três botões são ativados em nosso aplicativo
e eu estou usando o botão levantado tapete para renderizar esses três botões.
Então, você pode ver que esses botões parecem diferentes de
os outros botões que você incluiu em seu aplicativo lá.
Então, este é um componente de botão elevado do nosso material angular lá.
Então, tendo visto o ContactComponent e
o fato de que somos capazes de navegar para o ContactComponent.
Agora, a partir dos outros componentes,
vamos dar uma olhada rápida em
o código HTML que incluímos para o modelo para o nosso ContactComponent.
Indo para contactcomponent.html, você verá que temos
o título para esta página incluído usando este div
aqui e o segundo div dentro aqui com FxFlex
inclui as informações de localização e, em seguida, este dentro desta informação de localização,
Estou novamente definindo outra div que me permitirá
incluir várias visualizações neste outro div aqui.
Então, dentro desta, eu estou definindo
outra div com coluna de layout de efeitos e linha de camada de efeitos.
Então, esta é uma maneira aninhada de definir minhas visualizações CSS Flex aqui.
Então, dentro disso novamente,
Eu estou usando uma visualização Flex div com FxFlex 50 para que
ocupa metade e, em seguida, FxFlex offset 20 pixels.
Então, esta visão CSS será deslocada para a direita por 20 pixels então eu
tem alguma margem lá e, em seguida, temos
o endereço incluído aqui e, em seguida, abaixo aqui,
você pode ver que dentro de outra div,
Eu tenho uma tag com tapete levantado botão associado com ele.
Isso é o que faz com que os botões levantados que
têm na parte inferior da página Contato lá.
Então, três deles aqui.
Um para o número de telefone.
Um para o Skype e outro para o e-mail aqui e também note que eu estou fazendo uso de
os ícones Font Awesome para cada um deles e, em seguida, o
mapa de sua localização em outra div aqui.
Então, ambos estes encerram dentro deste div externo que é fechado novamente dentro do div.
Então, maneira aninhada de definir os layouts flexíveis para nossas diferentes partes aqui.
Então, isso é sobre isso para o ContactComponent.
Nós agora integramos isso em nosso aplicativo de página única.
Agora, indo para o DishService.
Agora, no DishService junto com o método getDishDishService,
Vou introduzir mais dois métodos.
Um método chamado getDish,
um prato específico e, em seguida, vou identificar o prato com um id especificado aqui.
Então, o id seria
e que especificaria me dar o prato com o id correspondente a este número.
Então isso será mais um método que eu vou adicionar
e também adicionar em outro método chamado getFeaturedDish.
Então, este prato em destaque usará
a propriedade em destaque que adicionamos
e, em seguida, retornar o prato para o qual o recurso é definido como verdadeiro.
Então, essa é a maneira que você pode selecionar um prato específico e, em seguida, torná-lo disponível.
Agora, a razão pela qual eu tenho essa bandeira em destaque é que quando o recurso é definido como verdadeiro,
esse prato específico será renderizado no HomeComponent.
Agora, como selecionamos esses pratos?
Então, vamos adicionar o código para isso.
Então, para o GetDish,
Eu preciso devolver algo da constante de pratos que eu já tenho lá.
Então, a partir da constante de pratos,
Eu vou usar a maneira do JavaScript de fazer filtragem de um array.
Então, a filtragem de uma matriz me ajudará a selecionar
para fora apenas os elementos da matriz que
correspondem a um critério específico que será especificado
dentro do filtro aqui e, em seguida, entre eles, eu retornarei apenas o primeiro.
Agora, acontece que quando eu especificar um id,
ele selecionará apenas um item, mas então isso se tornará um array.
Então, a partir dessa matriz, eu preciso extrair esse elemento nessa matriz.
Então, é por isso que eu estou usando dentro de chaves zero lá.
Então, isso vai me ajudar a identificar.
Então, como faço para filtrar meus pratos?
Então, para cada prato na minha lista de pratos,
então este é o lugar onde eu vou usar
outro recurso de tipescript chamado como funções de seta.
A função de seta é uma forma abreviada de escrever uma função.
Então, se você está acostumado a escrever funções,
em vez de escrever a função elaboradamente dizendo
função e, em seguida, dentro de parênteses prato e assim por diante,
eu posso simplesmente escrevê-lo nos casos em que a função é muito simples,
é muito fácil escrever isso como uma função de seta aqui.
Então, aqui, eu vou especificar dizendo id prato é igual ao id.
Então, o que eu estou especificando aqui é filtrar a matriz de pratos e extrair
apenas os itens da matriz para os quais o id do prato.
Então, cada item aqui está sendo identificado por este prato parâmetro aqui.
Então, para o qual o id do prato corresponde ao ID
que foi fornecido como um parâmetro para o prato.
Então, desta forma você vai extrair esse prato específico de
esta matriz e, em seguida, retornar esse prato a partir deste método GetDish.
As funções de seta me ajudaram a escrever código de uma maneira mais simples.
Se você não gosta de funções de seta
então você pode escrevê-lo da maneira mais convencional dizendo,
“prato de função”, e então a partir disso, então você vai retornar dish.id triplo igual a id,
então isso vai retornar um booleano.
Quando o filtro encontrar um verdadeiro aqui dentro,
esses elementos dos pratos serão selecionados na matriz.
Então, é aqui que seu conhecimento em JavaScript vem a sua vantagem.
Então, você precisa saber como um filtro JavaScript
funciona para ajudá-lo a entender como isso é feito.
Ok, agora da mesma forma para o prato em destaque,
Eu vou usar um método semelhante para extrair dos meus pratos
matriz usando um filtro aqui, mas o filtro que
eu vou definir aqui seria novamente uma função de seta aqui.
Você vai se acostumar com funções de seta e, em seguida, uma vez que você se acostumar com eles,
então você vai perceber o quão simples eles são muito certos.
Então, aqui o caminho para me selecionar
é a propriedade dish.featured porque este dish.feature já é um booleano lá.
Então, isso vai me ajudar a devolver o prato em destaque.
Então, para qualquer que seja o prato,
a característica do prato é verdadeira.
Esse prato em particular será filtrado de
a matriz de pratos e, em seguida, haverá apenas um dia.
De qualquer forma, você deve ter certeza de que
para que você vai definir destaque apenas para verdadeiro para um desses,
e então eu uso isso porque este filtro vai retornar uma sub-matriz da matriz de pratos,
então eu preciso selecionar esse elemento.
Haverá um único elemento lá no índice zero.
Então, eu estou usando o índice zero para selecionar esse elemento e retornar
que do método prato get destaque aqui.
Então, que completa a atualização para o serviço de pratos.
Para construir o nosso modelo de casa,
vamos apresentar na vista de casa um prato selecionado,
uma promoção atual selecionada pelo restaurante,
e um líder corporativo selecionado da lista de leitores.
O líder corporativo que está em destaque na primeira página vai
fazer parte de sua tarefa que segue esta lição em particular.
Mas vamos agora incluir,
temos um prato em destaque e a promoção em destaque na primeira página.
Então, o que significa que eu preciso de um serviço de promoção que retorna
o conjunto de promoções que estão sendo conduzidas por este restaurante em particular.
Então, deixe-me adicionar um serviço de promoções para o meu aplicativo.
Então, para fazer isso, na pasta compartilhada,
Vou criar um novo arquivo chamado promotion.ts.
Na promotion.ts, criarei uma promoção de classe,
classe e devolverei esta promoção aqui.
Então, o que essa classe de promoção contém?
Contém uma propriedade id,
em seguida, contém o nome para a promoção do restaurante.
Assim, por exemplo, a promoção poderia ser como buffet de fim de semana.
Ou 10% de todos os dias na hora do almoço
e coisas assim podem ser destaque na primeira página dos seus restaurantes.
Então, nome então eu também vou incluir uma imagem,
que é para ser do tipo string a URL da imagem,
então rótulo que será uma string.
Preço também uma string.
Agora, o trabalho implica,
você não me vê usando-os no momento,
vamos trazê-los para uso em um dos exercícios posteriores apresentados Boolean.
Então, você vê o sinalizador em destaque novamente aparecendo na promoção também,
e, em seguida, string de descrição.
Então, você vê que a promoção estruturada é praticamente
semelhante à estrutura do prato que vimos anteriormente.
Então, esta é a aula de promoção aqui.
Agora, junto com a classe de promoção,
Eu preciso criar outra classe que
exporta o conjunto de promoção dizer constante com promoções aqui.
Então aqui, eu vou importar
a classe de promoção
do arquivo promotion.ts,
e então eu exportaria uma constante chamada promoção.
Então, você vê que eu estou usando uma estrutura muito semelhante aos pratos aqui.
Então, você começa a ver que,
essa estrutura que usamos anteriormente para
as promoções para os pratos também é útil para declarar promoções.
Se você tem uma estrutura diferente,
você verá que com os líderes a estrutura será um pouco
diferente para o objeto JavaScript aqui. As promoções.
Agora, os detalhes de uma promoção específica que eu dei nas instruções,
então eu sugiro que você copie e cole de
lá em vez de eu digitar a coisa toda aqui.
Então, deixe-me ir em frente e copiar e colar
esse objeto JavaScript nesta matriz de objetos JavaScript aqui,
então lá vai você.
A promoção tem apenas um único objeto no momento.
No futuro, podemos adicionar mais.
Neste ponto, eu tenho apenas um então eu acabei de adicioná-lo lá,
e eu vou usar isso e que é a promoção destaque para o meu restaurante lá.
Isso é apenas promoção,
então deixe-me atualizar que promoções,
isso é o que eu preciso.
Então, eu vou apenas salvar as alterações no arquivo promotion.ts.
Em seguida, criarei outro serviço chamado serviço de promoção.
Então, para fazer isso, vamos para a linha de comando no prompt de comando digite
ng gerar serviços de pesquisas.
Então, o serviço de promoção sendo criado lá.
Então, agora o PromotionService está no lugar.
Então, vamos adicionar os recursos para o PromotionService.
Então, indo para o PromotionService,
você vê que o PromotionService agora está incluído em sua pasta de serviços aqui,
então precisamos preparar um PromotionService.
Então, no PromotionService,
Eu vou importar
promoção de compartilhado/promoção,
a classe de promoção, e também importar promoções
da classe compartilhada/promoções lá.
As promoções constantes de lá.
Agora, assim como tínhamos para o serviço de prato,
precisamos criar três métodos dentro do PromotionsService.
Então, o que eu vou fazer é me poupar do trabalho,
Eu vou para o dish.service,
e então apenas copiar estes três,
e depois colá-lo em meu serviço de promoção,
em seguida, basta editar o código.
Ok, então a partir do serviço de promoção,
Eu preciso devolver GetPromotions e
este é do tipo de promoção e então isso retornará PROMOÇÕES,
e então obter o segundo seria promoção
que novamente recebe o id da promoção,
então eu vou devolver
PROMOÇÕES.filter promo.id é id.
Em seguida, a promoção getFeatured.
Então, você pode ver que a estrutura do Serviço de Promoção é muito semelhante a
o serviço de pratos e isso não seria do tipo de promoção,
e isso retornará
promotions.Filter promo e isso será promo.featured e é isso.
Meu PromotionService está pronto.
Agora, eu vou para o componente de casa, e preparar isso,
para que no meu componente de casa,
eu vou exibir um prato em destaque e uma promoção em destaque.
O característica/prato e característica/promoção será exibido em
o componente de casa usando o componente de cartão de material angular.
Então, precisamos primeiro obter os dados em nosso componente inicial,
de modo que é isso que vamos fazer no arquivo de script do tipo de componentes home lá.
Então, indo para os componentes home type file script, home component.ts.
Aqui, eu preciso importar o prato
do compartilhado/prato e também o
correspondente dish.service de serviços/dish.service.
Ok, agora eu vou também fazer a mesma coisa para promoções,
então eu vou apenas copiar isso e colá-lo aqui,
e depois editar este,
então isso seria promoção,
isso seria PromotionService,
e depois promoção, e então isso seria PromotionService.
Então, com isso, temos tanto os serviços de prato e
prato e serviço de promoção disponíveis para nós,
dentro do nosso componente de casa.
Chegando agora ao construtor.
Vamos agora injetar os dois serviços aqui,
e torná-los disponíveis para nossas aplicações ou serviço de prato,
eo serviço de promoção injetado aqui.
Então, com isso, temos acesso a ambos os serviços.
Então, agora dentro do método NGoninit,
Eu vou buscar os dois pratos em destaque.
Então, eu diria This.DisishService.GetFeaturedDish
e também promoção,
PromotionService e GetFeaturedPromotion.
Só para ser completo,
deixe-me declarar o prato aqui a partir de
tipo de prato e a promoção a partir do tipo Promoção aqui.
Então, isso deve esclarecer todos os valores que estamos usando aqui dentro.
Então, com isso, concluímos a atualização para o nosso arquivo de digitação de componentes domésticos.
Vamos agora mudar para o arquivo de modelo,
e, em seguida, adicionar os dois cartões para exibir o prato em destaque e a promoção em destaque.
Agora, para isso, eu lhe dei o código nas instruções.
Então, eu só vou copiar esse código e colá-lo aqui.
Você já sabe como criar cartões,
para que você possa facilmente seguir o código que eu colar aqui.
Então, o modelo de componentes domésticos também é atualizado,
para que você possa ver que ele tem dois cartões aqui.
Para um, exibindo o prato e o outro exibindo a promoção aqui,
e fechado dentro de um div FxLayout aqui.
Então, vamos salvar as alterações e, em seguida, dar uma olhada rápida em nosso aplicativo.
Depois de criar o serviço de promoção,
também precisamos incluir o serviço de promoção no AppModule,
e disponibilizá-lo para a nossa aplicação.
Então, eu vou entrar aqui,
e, em seguida, importar
o serviço de promoção aqui.
Em seguida, declarou o serviço de promoção
como um dos provedores
no meu arquivo AppModule.ts aqui.
Então, no arquivo AppModule,
Eu estou exigindo essas alterações,
e, em seguida, salvando as alterações.
Indo para o navegador,
agora você pode ver que no navegador,
o componente inicial agora mostra os dois cartões,
um para o prato em destaque e outro para a promoção em destaque aqui.
Então, você pode ver que os dois carros são exibidos aqui.
Agora eu posso navegar para a página Menu,
e, em seguida, também para a página Contato.
A página Sobre ainda não está lá,
você vai preencher a página Sobre como parte da sua segunda atribuição.
Olhando para o mesmo aplicativo em um tamanho de tela menor,
então esta é uma tela do iPhone 6 Plus.
Vejamos o componente principal e a tela do iPhone 6 Plus.
Você pode ver o prato em destaque e a promoção em destaque na página inicial lá.
Em seguida, o menu que vimos anteriormente,
e também a página Contato sendo exibido aqui.
Então, você pode ver que agora nosso aplicativo de página única está muito mais configurado.
Exceto para o Sobre,
que faremos na segunda atribuição.
Mais uma pequena alteração que você pode fazer em seu arquivo HTML componentes de cabeçalho,
é que, juntamente com a diretiva de link do roteador,
a Rota Angular também suporta mais uma diretiva chamada RouteLinkActive.
Isso nos permite aplicar algumas classes ao elemento particular aqui.
Então, neste caso,
se este link se tornar ativo do que o que eu especificar aqui,
será aplicado como uma classe para este item em particular lá.
Então, eu vou especificar uma classe chamada ativa.
Então aqui, estou especificando RouterLinkActive com ativo.
Então, se eu definir uma classe CSS chamada active,
então a classe será aplicada a este link,
sempre que esta visão particular está sendo mostrada na página de aplicativos aqui.
Vou copiar a mesma coisa e aplicá-la a todos os botões restantes,
onde já defini o link do roteador.
Então, eu vou aplicar a classe RouterLinkActive,
para o Início, o Menu e o Fale Conosco.
Agora, isso também significa que eu deveria definir uma classe CSS ativa.
Então, para fazer isso, eu vou para o arquivo SESS componentes de cabeçalho,
e, em seguida, definir uma classe ativa aqui,
então eu vou definir a classe ativa ali.
Para definir a classe ativa,
Vou adicionar mais uma variável de cor aqui chamada background-moredark.
Em seguida, a cor correspondente é 4527A0,
esta é uma versão mais escura desta cor escura de fundo, 4527A0.
Então, para o meu ativo,
o que eu vou fazer é, da classe ativa,
Eu vou deixar a classe definir um fundo,
definir o fundo de
esse elemento para a cor de fundo mais escura.
Então, quando essa visão particular é selecionada e mostrada na página,
então esta classe ativa será aplicada a
que particular Uma tag
lá pela diretiva ativa do link do roteador que aplicamos aqui.
Agora, que mudança isso causa em nossa página web.
Agora, indo para a nossa página web,
vamos ver o que isso introduz em nossa página web.
Indo para a nossa aplicação,
agora você vê que quando estamos em
a vista inicial no componente de casa sendo exibido aqui, sua visão correspondente.
Em seguida, o botão Home aqui tem uma cor de fundo diferente que é
aplicada porque a classe ativa foi adicionada em porque nós
definimos o RouterLinkActive para ativo aqui.
Então, essa classe é aplicada.
Da mesma forma, quando você seleciona o menu,
então você vê que o menu é destacado no cabeçalho,
e a exibição de menus é mostrada aqui,
e de forma semelhante para o conteúdo.
Agora, isso nos permite ver em um relance em que pagar determinada visualização VR,
em nosso aplicativo de página única.
Então, este é um pouco adicional de oferta de bits para a interface do usuário,
que nos permite ver algumas características interessantes.
Embora, ele não adiciona muito à funcionalidade do aplicativo,
mas basta adicionar algum pequeno recurso que será uma adição útil ao seu aplicativo.
Então, com isso, completamos este exercício.
Neste exercício, trabalhamos para integrar
o componente de contato em nosso aplicativo de página única.
Nós também projetamos alguns cartões que incluímos no componente inicial,
e adicionamos alguns novos recursos para nossa aplicação.
Este é um bom momento para você salvar as alterações no seu repositório Git com a mensagem
Página Única Parte 1 do Aplicativo.