É hora de dar a essas páginas da web alguns recursos dinâmicos - use AngularJS! Adicionamos um teste para o controlador ser adicionado posteriormente.
Existem muitos tipos de arquiteturas de código para um aplicativo. Para aplicativos AngularJS, incentivamos o uso do modo Model-View-Controller (MVC) para dissociar o código e separar as preocupações. Com isso em mente, usamos o AngularJs para adicionar alguns modelos, vistas e controladores ao nosso aplicativo.
Reinicie o diretório de trabalho:
A cópia do código é a seguinte:
checkout git -f etapa -2
Nosso aplicativo agora tem uma lista de três telefones.
As diferenças mais importantes entre a Etapa 1 e a Etapa 2 estão listadas abaixo. Você pode ir ao Github para ver a diferença completa.
Visualizações e modelos
Em AngularJS, uma visão é um mapeamento depois que o modelo é renderizado através de modelos HTML **. Isso significa que, não importa quando o modelo mudar, o AngularJS atualiza os pontos de junção em tempo real e atualiza a visualização.
Por exemplo, o componente de exibição é construído por AngularJS usando o seguinte modelo:
A cópia do código é a seguinte:
<html ng-app>
<head>
...
<script src = "lib/angular/angular.js"> </script>
<script src = "js/controllers.js"> </script>
</head>
<corpo ng-controller = "PhoneListctrl">
<ul>
<li ng-repeat = "telefone em telefones">
{{Phone.name}}
<p> {{Phone.snippet}} </p>
</li>
</ul>
</body>
</html>
Acabamos de substituir a lista de telefones celulares codificados estaticamente, porque podemos obter o mesmo efeito usando a diretiva NGREPEAT e duas expressões angulares embrulhadas em aparelhos encaracolados - {{Phone.name}} e {{Phone.snippet}}.
1. A instrução ng-repeat = "telefone em telefones" na tag <li> é um iterador angularjs. Este iterador diz ao AngularJS para usar a primeira tag <li> como um modelo para criar um elemento <li> para cada telefone da lista.
2. Como aprendemos na etapa 0, os aparelhos encaracolados envolvem o telefone. Nome e telefone. Diferentemente dos cálculos constantes, a expressão aqui é na verdade uma referência do modelo de dados que aplicamos e os definimos no controlador PhoneListctrl.
Modelos e controladores
O modelo de dados é inicializado no controlador PhoneListctrl (aqui está apenas uma função contendo uma matriz, e os objetos armazenados na matriz são lista de dados móveis):
app/js/controller.js:
A cópia do código é a seguinte:
função phoneListctrl ($ scope) {
$ scope.phones = [
{"Nome": "Nexus s",
"Snippet": "Fast acabou de ficar mais rápido com o Nexus S."},
{"Nome": "Motorola Xoom ™ com Wi-Fi",
"Snippet": "O próximo tablet da próxima geração."},
{"Nome": "Motorola Xoom ™",
"Snippet": "O próximo tablet da próxima geração."}
];
}
Embora o controlador não pareça desempenhar um papel muito importante, ele desempenha um papel crucial aqui. Dado o contexto do nosso modelo de dados, o controlador nos permite estabelecer a ligação de dados entre o modelo e a visualização. É assim que vinculamos a camada de apresentação, dados e componentes lógicos:
1.
2. Os dados do telefone celular agora estão associados ao escopo ($ escopo) injetado em nossa função do controlador. Quando o aplicativo é iniciado, um escopo de raiz é criado e o escopo do controlador é um sucessor típico do escopo da raiz. O escopo deste controlador é válido para ligações de dados dentro de todas as tags <Body Ng-CONTROLLER = "PhoneListctrl">.
A teoria do escopo de AngularJS é muito importante: um escopo pode ser considerado um garoto para modelos, modelos e controladores para trabalhar juntos. AngularJS usa escopos, bem como informações, modelos de dados e controladores em modelos. Isso pode ajudar a separar o modelo e a visão, mas são realmente sincronizados! Qualquer alteração no modelo será refletida na visualização imediatamente; Qualquer alteração na visualização será refletida no modelo imediatamente.
Para uma compreensão mais aprofundada do escopo do AngularJS, consulte a documentação do escopo do AngularJS.
teste
O "método AngularJS" facilita muito o teste de código durante o desenvolvimento. Vamos dar uma olhada no seguinte teste de unidade adicionado recentemente para o controlador:
teste/unidade/controllerspec.js:
A cópia do código é a seguinte:
descrever ('controladores phonecat', function () {
descrever ('PhoneListctrl', function () {
ele ('deve criar o modelo "telefones" com 3 telefones', function () {
var scope = {},
Ctrl = novo PhoneListctrl (escopo);
espera (Scope.Phones.Length) .Tobe (3);
});
});
});
Este teste verifica se existem três registros em nossa matriz de telefone celular (não há necessidade de entender esse script de teste por enquanto). Este exemplo mostra como é fácil criar um teste de unidade para o código AngularJS. Como o teste é uma parte essencial do desenvolvimento de software, facilitamos a criação de testes no AngularJs para incentivar os desenvolvedores a escrever mais deles.
Ao escrever testes, os desenvolvedores do AngularJS tendem a usar a sintaxe na estrutura de desenvolvimento orientada por comportamento de jasmim (BBD). Embora o AngularJS não o force a usar jasmim, todos os testes que fazemos no tutorial são escritos em jasmim. Você pode obter conhecimento relevante sobre a página inicial oficial de Jasmine ou no Wiki de Jasmine.
Os projetos baseados em AngularJS são pré-configurados para usar o JstestDriver para executar testes de unidade.
Você pode executar o teste assim:
1. Em um terminal separado, digite o diretório angular-phonecat e execute ./scripts/test-sherver.sh para iniciar o teste (digite ./scripts/test-sherver.bat na linha de comando do Windows para executar o script e os comandos de script são executados da maneira seguinte);
2. Abra uma nova janela do navegador e vá para http: // localhost: 9876;
3. Selecione "Capture este navegador no modo rigoroso".
Neste momento, você pode deixar sua janela em paz e esquecer. O JstestDriver concluirá o teste e produzirá os resultados para o seu terminal.
4. Execute ./scripts/test.sh para testar.
Você deve ver resultados semelhantes aos seguintes:
A cópia do código é a seguinte:
Chrome: Redefinição do corredor.
.
Total 1 testes (aprovado: 1; falha: 0; erros: 0) (2,00 ms)
Chrome 19.0.1084.36 Mac OS: Execute 1 testes (aprovado: 1; falha: 0; erros 0) (2,00 ms)
sim! O teste passou! Ou não ... Nota: Se ocorrer um erro depois de executar o teste, feche o navegador e volte para o terminal e feche o script e repita as etapas acima.
prática
Adicione outra ligação de dados para index.html. Por exemplo:
A cópia do código é a seguinte:
<p> Número total de telefones: {{phones.length}} </p>
Crie uma nova propriedade do modelo de dados e vincule -a ao modelo. Por exemplo:
A cópia do código é a seguinte:
$ scope.hello = "Olá, mundo!"
Atualize seu navegador e verifique se "Olá, mundo!" aparece
Crie uma tabela simples com um iterador:
A cópia do código é a seguinte:
<tabela>
<tr> <th> Número da linha </th> </tr>
<tr ng-repeat = "i em [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</tabela>
Agora deixe o I da expressão do modelo de dados aumentar em 1:
A cópia do código é a seguinte:
<tabela>
<tr> <th> Número da linha </th> </tr>
<tr ng-repeat = "i em [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i+1}} </td> </tr>
</tabela>
Certifique -se de mudar TOBE (3) para TOBE (4) e depois execute o script ./scripts/test.sh
Resumir
Agora você tem uma aplicação dinâmica de modelo, visualização, separação do controlador e está sempre testando. Agora, você pode ir para a Etapa 3 para adicionar uma função de pesquisa de texto completo ao aplicativo.