Fizemos muito treinamento básico na etapa anterior, então agora podemos fazer algumas coisas simples. Queremos adicionar a função de pesquisa de texto completa (sim, isso é realmente muito simples!). Ao mesmo tempo, também escreveremos um teste de ponta a ponta, porque um bom teste de ponta a ponta pode ajudar muito. Ele monitora seu aplicativo e se reporta rapidamente quando ocorre a regressão.
Reinicie o diretório de trabalho:
checkout git -f etapa -3
Nosso aplicativo agora tem uma caixa de pesquisa. Observe que a lista telefônica na página muda à medida que o usuário insere na caixa de pesquisa.
As diferenças mais importantes entre a Etapa 2 e a Etapa 3 estão listadas abaixo. Você pode ver a completa diferença no Github.
Controlador
Não fazemos alterações no controlador.
modelo
app/index.html
<div> <div> <div> <!-Conteúdo da barra lateral-> Pesquise: <inspira ng-model = "query"> </div> <div> <!-conteúdo do corpo-> <ul> <li ng-repeat = "telefone <phones | filtro: Query"> {{Phone.name}}} <p> {(telefone.snnpt "> {{Phone.Name}}} </div> </div>Agora adicionamos uma tag <input> e usamos a função $ filtro do AngularJS para lidar com a entrada da diretiva NGREPEAT.
Isso permite que os usuários digitem um critério de pesquisa e vejam imediatamente os resultados da pesquisa da lista de telefones. Vamos explicar o novo código:
Ligação de dados: esse é um recurso central do AngularJS. Quando a página é carregada, o AngularJS a liga a variáveis com o mesmo nome no modelo de dados com base no nome do valor da propriedade da caixa de entrada para garantir a sincronização entre os dois.
Neste código, o nome de dados inserido pelo usuário na caixa de entrada é chamado de consulta, que será usado imediatamente como entrada no seu filtro pelo iterador da lista (telefone em telefones | filtro: consulta`). Quando o modelo de dados causa alterações na entrada do iterador, o iterador pode atualizar com eficiência o DOM para refletir o estado mais recente do modelo de dados.
Use filtro filtro: a função Filtro usa o valor da consulta para criar uma nova matriz que corresponda apenas aos registros de consulta.
O NGREPEAT atualizará automaticamente a visualização com base na matriz de dados de registro móvel gerada pelo filtro de filtro. Todo o processo é transparente para o desenvolvedor.
teste
Na etapa 2, aprendemos a escrever e executar um teste. O teste de unidade é muito conveniente para testar os controladores e outros componentes que escrevemos no JS, mas não pode testar facilmente as operações DOM e a integração de aplicativos. Para isso, os testes de ponta a ponta são uma escolha melhor.
Os recursos de pesquisa são implementados inteiramente por meio do modelo e da ligação de dados; portanto, nossos primeiros testes de ponta a ponta verificam que esses recursos atendem às nossas expectativas.
teste/e2e/cenarios.js:
Descreva ('PhoneCat App', function () {descreve ('Lista de telefone View', function () {antes each (function () {Browser (). NavigateTo ('../../ app/index.html');}); ele ('deve filtrar a lista de telefones como os tipos de usuário na caixa de pesquisa', () (); entrada (consulta '). Enter (nexus');Embora a sintaxe desse código de teste pareça muito semelhante ao teste de unidade que escrevemos em Jasmine antes, o teste de ponta a ponta usa a interface fornecida pelo testador de ponta a ponta do AngularJS.
Execute um teste de ponta a ponta e abra qualquer um dos seguintes na guia New Browser:
Node.js Usuário: http: // localhost: 8000/test/e2e/runner.html
Usuários usando outros servidores HTTP: http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
Visitante: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Este teste verifica se a caixa de pesquisa e o iterador estão corretamente integrados. Você pode descobrir como é fácil escrever um teste de ponta a ponta no AngularJS. Embora este exemplo seja apenas um teste simples, é fácil criar qualquer teste complexo e legível de ponta a ponta.
prática
Adicione um {{query}} ligação ao modelo index.html para exibir o valor atual do modelo de consulta em tempo real e, em seguida, observe como eles mudam de acordo com o valor na caixa de entrada.
Agora, vamos dar uma olhada em como podemos fazer com que o valor do modelo de consulta apareça no título da página HTML.
Você pode pensar que adicionar uma ligação à etiqueta do título como esta:
<title> Galeria telefônica do Google: {{query}} </title>
No entanto, quando você recarregue a página, você simplesmente não pode obter o resultado desejado. Isso ocorre porque o modelo de consulta é válido apenas dentro do escopo definido pelo elemento corporal.
<corpo ng-controller = "PhoneListctrl">
Se você deseja que o elemento <title> se vincule ao modelo de consulta, deve mover a declaração NGController para o elemento HTML, porque é o ancestral comum do título e do elemento corporal.
<html ng-app ng-controller = "PhoneListctrl">
Certifique-se de excluir a declaração do controlador NG no elemento corporal.
Podemos atingir nosso objetivo ao vincular dois aparelhos encaracolados no elemento de título, mas você pode achar que eles já são exibidos ao usuário quando a página estiver carregando. Uma solução melhor é usar as diretivas NGBind ou NGBindTemplate, que são invisíveis para o usuário quando a página é carregada:
<título ng-bind-template = "Google Galeria telefônica: {{Query}}"> Galeria telefônica do Google </title>
Adicione os seguintes códigos de teste de ponta a ponta ao bloco de descrição de teste/e2e/cenarios.js:
ele ('deve exibir o valor do filtro atual dentro de um elemento com ID "status"', function () {espera (elemento ('#status'). text ()). tomatch (/filtro de corrente:/s*$/); input ('consulher'). o valor da ligação usando ('#status').Atualize o navegador e o testador de ponta a ponta relatarão a falha do teste. Para passar o teste, edite index.html e adicione um elemento div ou p com ID "Status", que é uma ligação de consulta e o filtro atual: prefixo. Por exemplo:
<div id = "status"> filtro atual: {{query}} </div>
Adicione uma pausa (); Declaração para o teste de ponta a ponta e execute-o novamente. Você descobrirá que o testador está pausado! Isso permite que você tenha a oportunidade de visualizar o status do seu aplicativo durante a execução do teste. Os aplicativos de teste são em tempo real! Você pode alterar o conteúdo da pesquisa para provar isso. Com um pouco de experiência, você saberá como isso é crítico para encontrar problemas rapidamente nos testes de ponta a ponta.
Resumir
Agora adicionamos um recurso de pesquisa de texto completo e concluímos um teste para provar que a pesquisa está certa! Agora, vamos para a etapa 4 para ver a adição da função de classificação ao nosso aplicativo móvel.
O exposto acima é uma compilação dos dados de filtragem do Iterator AngularJS e continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!