Nesta etapa, você adicionará miniaturas e alguns links para a lista de telefones, mas esses links ainda não funcionarão. Em seguida, você usará esses links para exibir informações adicionais em seu telefone nas categorias.
Reinicie o diretório de trabalho:
checkout git -f Etapa 6
Agora você deve ver as fotos e os links do seu telefone na lista.
As diferenças mais importantes entre a Etapa 5 e a Etapa 6 estão listadas abaixo. Você pode ver a completa diferença no Github.
dados
Observe que o arquivo Phones.json agora contém um identificador exclusivo e um link de imagem para cada telefone. Esses URLs agora apontam para o aplicativo/img/telefones/diretório.
App/telefones/telefones.json (fragmento de amostra)
[{... "ID": "Motorola-Defy-With-Motoblur", "ImageUrl": "IMG/Phones/Motorola-Defy-With-MOTOBLUR.0.JPG", "Nome": "Motorola Defy/U2122 com Motoblur/U2122", ...}, ...]modelo
app/index.html
... <ul> <li ng-repeat = "Telefone em telefones | filtro: Query | orderby: orderProp"> <a href = "#/telefones/{{Phone.id}}"> <img ng-src = "{{Phone.imageurl}}"> </a) <a href = "#/telefones/{{Phone.id}}"> {{Phone.name}} </a> <p> {{Phone.snippet}} </p> </li> </ul> ...Esses links apontarão para a página de detalhes de cada telefone no futuro. No entanto, para gerar esses links, usamos a ligação de dados de duplo backet que já estamos familiarizados no atributo HREF. Na Etapa 2, adicionamos a ligação {{Phone.name}} como conteúdo do elemento. Nesta etapa, usamos a ligação {{phone.id}} no atributo elemento.
Também adicionamos imagens de telefone celular a cada registro, basta usar a diretiva NGSRC em vez da tag de atributo <iMG> SRC. Se usarmos apenas um atributo SRC normal para Bind (<img src = "{{phone.imageurl}}">), o navegador interpretará diretamente os angularjs {{Expression}} e iniciará uma solicitação ilegal UrlHttp: // localHost: 8000/App/{{Phone.image.image.image. Porque quando o navegador carrega a página, ele também solicita carregar a imagem, o AngularJS apenas inicia a compilação quando a página é carregada - quando o navegador solicita carregar a imagem {{Phone.imageurl}} ainda não foi compilada! Essa situação será evitada com esta diretiva NGSRC, e o navegador usará a diretiva NGSRC para impedir uma solicitação a um endereço ilegal.
teste
teste/e2e/cenarios.js
... ele ('deve renderizar links específicos do telefone', function () {input ('Query'). enter ('nexus'); elemento ('. telefones li a'). click (); espera (navegador (). localização (). url ()). Tobe ('/telefones/nexus-s');};);Adicionamos um novo teste de ponta a ponta para verificar se o aplicativo gera o link correto para a visualização móvel e acima é a nossa implementação.
Agora você pode atualizar o navegador e usar um testador de ponta a ponta para observar os testes em execução, ou pode executá-los em um servidor AngularJS.
prática
Altere a diretiva NG-SRC para o atributo SRC normal. Usando ferramentas como FireBug, Chrome Web Inspector ou OU OLHANDO diretamente para o log de acesso do servidor, você descobrirá que seu aplicativo envia uma solicitação ilegal para /pp/%7b%7bphone.imageurl%7d%7D (ou /pp/ {(phone.imageurl}}).
Esse problema é porque o navegador enviará imediatamente uma solicitação para o endereço da URL que ainda não foi compilado ao encontrar a tag IMG. O AngularJS só começará a compilar a expressão depois que a página for carregada para obter o endereço URL da imagem correto.
Resumir
Agora que você adicionou fotos e links do seu telefone, vá para a Etapa 7, aprenderemos sobre os modelos de layout do AngularJS e como o AngularJS pode facilmente fornecer várias visualizações para o seu aplicativo.
O exposto acima é uma compilação das informações sobre os links do AngularJS e os modelos de imagem. Continuaremos a adicionar conhecimento relevante no futuro. Obrigado pelo seu apoio a este site!