É 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:
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:
<html ng-app> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/controllers.js"> </script> </head> <corpo ng --Controller = "Phonelists inphonesl {head> <bodyn-n-n-n-n-lennnnnnnnnnnnnnnnnnnn (Phonelists) <li> <li> <li-n- ng-controller =" Phonelisti " <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}}.
A instrução ng-repeat = "telefone em telefones" dentro da 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.
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:
function phoneListctrl ($ scope) {$ scope.phones = [{"name": "nexus s", "snippet": "rápido acabou de ficar mais rápido com nexus s."}, {"name": "Motorola Xoom ™ com wi-fi", "snippet": "a próxima geração, a próxima geração". "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:
PhoneListctrl - O nome do método do controlador (na JS Controllers.js) corresponde ao valor da diretiva NGController na tag <body>.
Os dados do telefone estão agora 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:
Descreva ('Phonecat Controllers', function () {descreve ('PhoneListctrl', function () {It ('deve criar um modelo de' telefones 'com 3 telefones', function () {var scope = {}, ctrl = new PhoListctrl (scope); expect);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:
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);
Abra uma nova janela do navegador e vá para http: // localhost: 9876;
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.
Execute ./scripts/test.sh para testar.
Você deve ver resultados semelhantes aos seguintes:
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:
<p> Número total de telefones: {{phones.length}} </p>
Crie uma nova propriedade do modelo de dados e vincule -a ao modelo. Por exemplo:
$ scope.hello = "Olá, mundo!"
Atualize seu navegador e verifique se "Olá, mundo!" aparece
Crie uma tabela simples com um iterador:
<table> <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> </itlage>Agora deixe o I da expressão do modelo de dados aumentar em 1:
<table> <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.
O exposto acima está a informação que classifica o modelo AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!