Nesta etapa, você implementará a exibição de detalhes do telefone, que será exibida quando o usuário clicar em um telefone na lista de telefone.
Reinicie o diretório de trabalho:
checkout git -f etapa 8
Agora, quando você clica em um telefone na lista, a página de informações detalhada do telefone será exibida.
Para implementar a visualização de detalhes do telefone celular, usaremos o $ HTTP para obter os dados e também adicionaremos um modelo de visualização por telefone .html.
As diferenças mais importantes entre a Etapa 7 e a Etapa 8 estão listadas abaixo. Você pode ver a completa diferença no Github.
dados
Além do Phone.json, o App/ telefones/ diretório também contém o arquivo JSON para obter informações sobre cada telefone celular.
App/telefones/nexus-s.json (fragmento de amostra)
{"Adicionaisfetuas": "Display de contorno, Comunicações de campo próximo (NFC), ...", "Android": {"OS": "Android 2.3", "Ui": "Android"}, ... "Images": ["img/nexus-s.0.jpg", "img/telefones/nexs.1. "img/telefones/nexus-s.2.jpg", "img/telefones/nexus-s.3.jpg"], "armazenamento": {"flash": "16384MB", "ram": "512MB"}}Cada um desses arquivos descreve diferentes propriedades de um telefone usando a mesma estrutura de dados. Exibimos esses dados na exibição de detalhes do telefone.
Controlador
Utilizamos o serviço $ http para obter dados para expandir nosso PhoneListCtrl. É da mesma maneira que o controlador de lista telefônico anterior funciona.
app/js/controllers.js
Função Tenente PhoneDetailCtrl ($ SCOPE, $ ROUTEPARAMS, $ HTTP) {$ http.get ('telefones/' + $ routeParams.phoneid + '.json'). Sucesso (Data) {$ scope.phone = dados;});} // 'PhoneneTAlC. '$ http'];Para construir o URL da solicitação HTTP, precisamos extrair $ routeparams.phoneid da rota atual fornecida pelo Serviço de Rota $.
modelo
A linha de espaço reservado original do TBD no arquivo telefone-detail.html foi substituído pela lista e a encadernação que constitui as informações detalhadas do telefone. Observe que aqui usamos as tags {{Expression}} de AngularJS e NGREPEAT para renderizar o modelo de dados na visualização.
App/parcials/telefone-detail.html
<img ng-src = "{{Phone.images [0]}}"> <h1> {{Phone.name}} </h1> <p> {{Phone.Description}} </p> <ul> <li ng-repeat = "img em telefone.images"> <Gera </li> </ul> <ul> <li> <mpan> Disponibilidade e redes </span> <dl> <dt> disponibilidade </dt> <dd ng-repeat = "Disponibilidade em telefone.Availability"> {{Disponibilidade}}} </dd> </dl> </li> ... </spanlebility} <DD> {{Phone.additionAfeatures}} </dd> </li> </ul>teste
Vamos escrever um novo teste de unidade, muito semelhante ao que escrevemos para o PhoneListctrl na etapa 5.
teste/unidade/controllerspec.js
... Descreva ('Tenentetailctrl', function () {var scope, $ httpbackend, ctrl; antes e cada vez (Inject (function (_ $ httpbackend_, $ rootscope, $ routeeParams, $ controller) {$ httpbackend = _ $ httpbackend_;; Phones/xyz.json). Espere (Scope.Phone) .ToBendeDefined ();Execute o script ./scripts/test.sh para executar o teste, você deve ver a seguinte saída:
Chrome: Redefinição do corredor .... Total 3 testes (aprovados: 3; falha: 0; erros: 0) (5,00 ms) Chrome 19.0.1084.36 Mac OS: Execute 3 testes (aprovados: 3; falha: 0; erros 0) (5,00 ms)
Ao mesmo tempo, também adicionamos um teste de ponta a ponta, apontando para a página Detalhes do telefone do Nexus e verificando se o chefe da página é "Nexus S".
teste/e2e/cenarios.js
... descreva ('Detalhes do telefone Exibir', function () {antes each (function () {Browser (). Navigateto ('../../ app/index.html#/telefones/nexus-s');});Agora você pode atualizar seu navegador e executar o teste de ponta a ponta novamente, ou pode executá-lo no servidor AngularJS.
prática
Escreva um teste usando a API de teste de ponta a ponta do AngularJS para verificar as quatro miniaturas que exibimos na página de detalhes do Nexus.
Resumir
Agora que a página de detalhes do telefone celular está pronta, na etapa 9, aprenderemos como escrever um filtro de exibição.
O exposto acima são as informações sobre os modelos mais angulares. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!