Tutorial Anjularjs Traduzido

TUTORIAL ANGULARJS

Fonte: http://www.anjularjs.org

Traduzido e Editado por: Luis Ricardo

Uma tima maneira de ter introduzido a AngularJS trabalhar atravs deste

tutorial, que percorre a construo de uma aplicao web AngularJS. O

aplicativo que voc vai construir um catlogo que apresenta uma lista de

dispositivos Android, permite filtrar a lista para ver apenas os dispositivos que

lhe interessam, e depois ver os detalhes de qualquer dispositivo.

Trabalhar com o tutorial para ver como angular faz com que os navegadores

mais inteligente - sem o uso de extenses ou plug-ins. Como voc trabalha

com o tutorial, voc:

Veja exemplos de como usar o lado do cliente a ligao de dados e injeo

de dependncia para construir exibies dinmicas de dados que mudam

imediatamente em resposta s aes do usurio.

Veja como angular cria ouvintes sobre seus dados sem a necessidade de

manipulao DOM.

Aprenda uma maneira melhor, mais fcil de testar seus aplicativos web.

Aprenda a usar os servios angular para tornar as tarefas comuns da Web,

tais como a obteno de dados para o seu aplicativo, mais fcil.

E tudo isso funciona em qualquer navegador sem modificao para o

navegador!

Quando voc terminar o tutorial voc ser capaz de:

Criar um aplicativo dinmico que funciona em qualquer navegador.

Definir as diferenas entre frameworks JavaScript angular e comum.

Entenda como funciona a ligao de dados em AngularJS.

Use o projeto angular semente de forma rpida inicializao cinta-seus

prprios projetos.

Criar e executar testes.

Identificar os recursos para aprender mais sobre AngularJS.

O tutorial orienta todo o processo de construo de uma aplicao simples,

incluindo escrita e execuo de unidade e de ponta a ponta-

testes. Experimentos no final de cada etapa fornecer sugestes para voc

aprender mais sobre AngularJS e da aplicao que voc est construindo.

Voc pode ir at o tutorial inteiro em um par de horas ou voc pode querer

passar um dia agradvel realmente cavando para ele. Se voc est procurando

por um curto introduo ao AngularJS, confira o Guia de Introduo do

documento.

Trabalhar com o cdigo

Voc pode seguir este tutorial e hack no cdigo tanto no Mac / Linux ou para o

ambiente Windows. O tutorial conta com a utilizao de sistema de controle de

verso Git para gerenciamento de cdigo fonte. Voc no precisa saber nada

sobre Git para seguir o tutorial. Selecione uma das abas abaixo e siga as

instrues para configurar seu computador.

Git no Mac / Linux

Git no Windows

1. Voc vai precisar de Node.js e Testacular para executar testes de unidade,

por favor, verifique se voc temNode.js v0.8 ou superior instalado e que

o n executvel em seu PATH , executando o seguinte comando em uma

janela de terminal:

1. n - verso

Alm disso instalar Testacular se voc no tiver j:

2. npm instalao - testacular g

2. Voc tambm vai precisar de Git, que voc pode comear a partir do site do

Git .

3. Clonar o repositrio angular-phonecat localizado no Github , executando o

seguinte comando:

1. git clone git : / github.com / / angular / angular-phonecat.git

Este comando cria o angular-phonecat em seu diretrio atual.

4. Mude o seu diretrio atual para angular-phonecat :

1. cd angular - phonecat

As instrues do tutorial assume que voc est executando todos os

comandos do diretrio angular-phonecat.

5. Voc vai precisar de um servidor http em execuo no seu

sistema. Mquinas Mac e Linux tm tipicamente Apache pr-instalado, mas

se voc ainda no tiver um instalado, voc pode usar o n para

executarscripts / web-server.js , um simples pacote de servidor http.

A ltima coisa a fazer ter certeza de que seu computador tem um navegador

e um bom editor de texto instalado.Agora, vamos ter alguma coisa legal feito!

Agora voc est pronto para construir a AngularJS phonecat app. Nesta etapa,

voc vai se familiarizar com os arquivos de cdigo fonte mais importantes,

aprender como iniciar os servidores de desenvolvimento integrados com

angular de sementes, e executar o aplicativo no navegador.

Git no Mac / Linux

Git no Windows

1. Em angular-phonecat diretrio, execute este comando:

1. git checkout - etapa f - 0

Isso redefine o espao de trabalho para o passo 0 do app tutorial.

Voc deve repetir isso para cada passo futuro no tutorial e alterar o nmero

para o nmero do passo em que est. Isso far com que as alteraes

feitas dentro de seu diretrio de trabalho para ser perdida.

2. Para ver o aplicativo em execuo em um navegador, faa o seguinte:

Para usurios Node.js:

1. Em um separado guia terminal ou janela, execute . / scripts / web-

server.js para iniciar o servidor web.

2. Abra uma janela do navegador para o aplicativo e navegar

para http://localhost:8000/app/index.html

Para outros servidores http:

1. Configure o servidor para servir os arquivos no angular-

phonecat diretrio.

2. Navegar no seu navegador para http://localhost: [porta-nmero] /

[contexto-caminho] / app / index.html .

Agora voc pode ver a pgina em seu navegador. No muito excitante, mas

isso normal.

A pgina HTML que exibe "Nada aqui ainda!" foi construdo com o cdigo

HTML mostrado abaixo. O cdigo contm alguns elementos-chave angulares

que teremos daqui para frente.

app / index.html :

1.

2.

3.

4.

5. meu arquivo HTML

6.

7.

8.

9.

10.

11.

12. Nada aqui {{'ainda' + '!'}}

13.

14.

15.

O que o cdigo est fazendo?

ng-app directiva:

O ng-app atributo representa uma directiva angular (nomeado ngApp ;

usos angular nome-com-traos de nomes de atributos e camelCase para o

nome da directiva correspondente) utilizados para sinalizar um elemento

que angular deve considerar para ser o elemento raiz da nossa

aplicao. Isso d a desenvolvedores de aplicativos a liberdade de dizer

angular se a pgina HTML inteira ou apenas uma parte do que deve ser

tratada como a aplicao angular.

AngularJS tag script:

Este cdigo faz o download do angular.js roteiro e registra um retorno de

chamada que ser executado pelo navegador quando a pgina que contm

HTML foi baixado completamente. Quando o callback executado, angular

procura o ngApp directiva. Se encontra angular da directiva, que faro

surgir o aplicativo com a raiz do DOM aplicao sendo o elemento em que

o ngApp directiva foi definido.

Double-cacheados ligao com uma expresso:

Nada aqui {{'ainda' + '!'}} `

Essa linha demonstra a caracterstica fundamental das capacidades de

modelagem angular - uma ligao, denotado por duplo curlies {{}} , assim

como uma simples expresso 'ainda' + '!' usado nesta ligao.

A ligao angular diz que ele deve avaliar uma expresso e inserir o

resultado no DOM no lugar da ligao. Ao invs de uma insero de uma s

vez, como veremos nas prximas etapas, uma ligao ir resultar em

eficientes atualizaes contnuas, sempre que o resultado das mudanas

de avaliao de expresso.

Expresso angular um fragmento de cdigo JavaScript-like que avaliado

por Angular no contexto do mbito do modelo actual, em vez de dentro do

mbito do contexto global ( janela ).

Como era esperado, uma vez que este modelo processado por angular, a

pgina html contm o texto: "Nada aqui ainda!".

Bootstrapping aplicativos AngularJS

Bootstrapping aplicaes AngularJS automaticamente utilizando

o ngApp directiva muito fcil e adequada para a maioria dos casos. Em casos

avanados, como quando usando carregadores de script, voc pode

usar imperativo / manual caminho para iniciar o aplicativo.

H trs coisas importantes que acontecem durante a inicializao app:

1. O injector que ser usada para a injeco de dependncia dentro desta

aplicao criada.

2. O injetor, ento, criar o escopo raiz que se tornar o contexto para o modelo

da nossa aplicao.

3. Angular, ento, "compilar" o DOM comeando no ngApp elemento raiz,

processando todas as diretrizes e as ligaes encontradas ao longo do

caminho.

Uma vez que um aplicativo bootstrapped, ele ir esperar por eventos de

entrada do navegador (como o clique do mouse, pressione a tecla ou resposta

HTTP de entrada) que podem mudar o modelo. Uma vez que um evento como

esse ocorre, angular detecta se ele causou quaisquer mudanas de modelo e

se as alteraes forem encontrados, angular vai refletir no modo de exibio,

atualizando todas as ligaes afectadas.

A estrutura de nossa aplicao actualmente muito simples. O modelo contm

apenas uma directiva e uma ligao esttica, e nosso modelo est vazio. Isso

vai mudar em breve!

O que so esses arquivos no meu diretrio de trabalho?

A maioria dos arquivos em seu diretrio de trabalho vm do projeto angular

semente que normalmente usado para iniciar novos projetos angular. O

projeto de sementes inclui as ltimas bibliotecas angular, bibliotecas de teste,

scripts e um aplicativo simples exemplo, todos os pr-configurado para o

desenvolvimento de uma aplicao web tpica.

Para os fins deste tutorial, modificamos a semente angular com as seguintes

alteraes:

Removido o aplicativo exemplo

Adicionado imagens de telefone para app / img / telefones /

Dados do telefone adicionados arquivos (JSON) para app / telefones /

Adicionado Bootstrap arquivos para app / css / e app / img /

Experimentos

Tente adicionar uma nova expresso para o index.html que vai fazer um

pouco de matemtica:

1 + 2 = {{1 + 2}}

Resumo

Agora vamos para o passo 1 e adicione um pouco de contedo para a web

app.

A fim de ilustrar como angular aumenta HTML padro, voc ir criar um

puramente esttica pgina HTML e, em seguida, examinar como podemos

transformar esse cdigo HTML em um modelo que vai usar angular para exibir

dinamicamente o mesmo resultado com qualquer conjunto de dados.

Nesta etapa, voc ir adicionar algumas informaes bsicas sobre dois

telefones celulares para uma pgina HTML.

Instrues Workspace Redefinir

A pgina agora contm uma lista com informaes sobre dois telefones.

As mudanas mais importantes esto listados abaixo. Voc pode ver o diff

completo em GitHub :

app / index.html :

1.

2.

3. Nexus S

4.

5. Rpido ficou mais rpido com o Nexus S.

6.

7.

8.

9. Motorola XOOM com Wi-Fi

10.

11. A seguir, tablet Next Generation.

12.

13.

14.

Experimentos

Tente adicionar mais HTML esttico para index.html . Por exemplo:

Nmero total de telefones: 2

Resumo

Isto para alm de seu aplicativo usa HTML esttico para exibir a lista. Agora,

vamos para a etapa 2 para aprender como usar AngularJS para gerar

dinamicamente a mesma lista.

Agora hora de fazer a pgina web dinmica - com AngularJS. Tambm

vamos adicionar um teste que verifica o cdigo para o controlador que vamos

adicionar.

H muitas maneiras de estruturar o cdigo para um aplicativo. Para aplicativos

angular, incentivamos o uso de o padro de projeto Model-View-Controller

(MVC) para separar o cdigo e preocupaes distintas. Com isso em mente,

vamos usar um pouco angular e JavaScript para adicionar modelo, vista, e

componentes do controlador para a nossa app.


O aplicativo agora contm uma lista com trs telefones.



Ver e Modelo

Em Angular, a viso uma projeo do modelo atravs do

HTML modelo . Isto significa que sempre que as mudanas do modelo,

refresca angular os pontos apropriados de ligao, que atualiza a vista.

O componente de vista construdo por angular deste modelo:

app / index.html :

1.

2.

3. ...

4.

5.

6.

7.

8.

9.

10.

11. {{Phone.name}}

12. {{}} phone.snippet

13.

14.

15.

16.

Ns substitumos a lista de telefones codificados com a directiva ngRepeat e

duas expresses angular entre chaves: {{}} phone.name e {{}} phone.snippet :

O ng-repeat = "telefone em telefones" declarao no tag um repetidor

angular. O repetidor diz angular para criar um elemento para cada

telefone na lista usando o primeiro tag como modelo.

Como aprendemos no passo 0, as chaves em

torno phone.name e phone.snippet denotam ligaes. Ao contrrio de

avaliao constantes, estas expresses esto se referindo ao nosso modelo

de aplicativo, que foi criado em nosso PhoneListCtrl controlador.

Modelo e Controlador

Os dados modelo (uma matriz simples de telefones em notao literal de

objeto) instanciado dentro doPhoneListCtrl controlador :

app / js / controllers.js :

1. funo PhoneListCtrl ( mbito $ ) {

2. $ mbito . telefones = [

3. { "nome" : "Nexus S" ,

4. "Trecho" : "Fast ficou mais rpido com o Nexus S." },

5. { "nome" : "A Motorola XOOM com Wi-Fi" ,

6. "Trecho" : "The Next, tablet da prxima gerao." },

7. { "nome" : "A Motorola XOOM " ,

8. "Trecho" : "The Next, tablet da prxima gerao." }

9. ];

10. }

Embora o controlador ainda no est fazendo muito controle, ele est

desempenhando um papel crucial. Ao fornecer o contexto para o nosso modelo

de dados, o controlador permite-nos estabelecer ligao de dados entre o

modelo ea vista. Ns ligados os pontos entre a apresentao de dados, e os

componentes lgicos, como segue:

PhoneListCtrl - o nome da nossa funo de controlador (localizado no

arquivo JavaScript controllers.js ), corresponde ao valor

do ngController directiva localizado no tag.

Os dados de telefone ento ligado ao mbito ( mbito $ ), que foi injetado

em nossa funo de controlador. O escopo do controlador um

descendente prototpica do escopo raiz que foi criado quando a aplicao

bootstrapped.Este escopo do controlador est disponvel para todas as

ligaes localizadas dentro da ng-controller="PhoneListCtrl">

modelo, o modelo de dados e um controlador, para manter os modelos e as

vistas separadas, mas em sincronismo.Quaisquer alteraes feitas no

modelo so refletidas na vista; quaisquer alteraes que ocorrem na tela

so refletidas no modelo.

Para saber mais sobre os escopos angular, consulte a documentao

mbito angular .

Testes

O "caminho angular" torna mais fcil para testar o cdigo como est sendo

desenvolvido. D uma olhada no teste de unidade seguinte para o seu

controlador recm-criado:

teste de unidade / / controllersSpec.js :

1. descrever ( "controladores PhoneCat" , funo () {

2.

3. descrever ( 'PhoneListCtrl " , funo () {

4.

5. ele ( 'deve criar "telefones" modelo com trs telefones " , funo () {

6. var escopo = {},

7. ctrl = novo PhoneListCtrl ( escopo );

8.

9. esperar ( escopo . telefones . comprimento ). Tobe ( 3 );

10. });

11. });

12. });

O teste verifica que temos trs registros na matriz telefones eo exemplo

demonstra como fcil criar um teste de unidade para o cdigo em

angular. Desde que o teste uma parte crtica do desenvolvimento de

software, que tornam mais fcil para criar testes em angular para que os

desenvolvedores so incentivados a escrever.

Angulares desenvolvedores preferem a sintaxe do Comportamento orientado

Jasmine Desenvolvimento quadro (BDD) ao escrever testes. Embora angular

no exigem o uso de Jasmine, que escreveu todos os testes neste tutorial em

Jasmine.Voc pode aprender sobre Jasmine na home page Jasmine e no wiki

Jasmine .

O projeto angular semente pr-configurado para executar todos os testes de

unidade usando Testacular . Para executar o teste, faa o seguinte:

1. Em um separado janela de terminal ou guia, v para o angular-

phonecat diretrio e execute . / scripts / test.sh para iniciar o servidor

Testacular.

2. Testacular vai iniciar uma nova instncia do navegador Chrome

automaticamente. Simplesmente ignor-lo e deix-lo correr em segundo

plano. Testacular vai usar esse navegador para a execuo do teste.

3. Voc dever ver a seguinte sada ou similar no terminal:

4. Informaes: servidor Testacular comeou em http://localhost:9876/

5. info (lanador): Iniciando navegador "Chrome"

6. info (Chrome 22,0): Conectado com soquete ID

tPUm9DXcLHtZTKbAEO-n

7. Chrome 22,0: Executado 1 de 1 SUCESSO (0,093 s / 0,004 secs)

Yay! O teste foi satisfatrio! Ou no ...

8. Para executar novamente os testes, basta alterar qualquer um dos arquivos

de origem ou teste. Testacular vai notar a mudana e execute os testes

novamente para voc. Agora, no doce?

Experimentos

Adicione outra ligao a index.html . Por exemplo:

Nmero total de telefones: {{phones.length}}

Criar um novo modelo de propriedade no controlador e ligar para ele a partir

do modelo. Por exemplo:

$ Scope.hello = "Ol Mundo!"

Atualize seu navegador para certificar-se que diz: "Ol, Mundo!"

Criar um repetidor que constri uma tabela simples:

nmero da linha

{{i}}

Agora, fazer a lista de 1-based incrementando i por um na ligao:

nmero da linha

{{i +1}}

Faa o teste de unidade falhar, alterando o Tobe (3) declarao de Tobe

(4) .

Resumo

Voc agora tem um aplicativo dinmico que apresenta modelo separado, ver e

componentes do controlador, e voc est testando que voc v. Agora, vamos

para a etapa 3 para aprender a adicionar pesquisa de texto completo para o

aplicativo.

Ns fizemos um monte de trabalho em estabelecer bases para a aplicao na

ltima etapa, agora vamos fazer algo simples, vamos adicionar pesquisa de

texto completo (sim, ele vai ser simples!). Ns tambm ir escrever um teste

final-de-final, porque um teste de ponta a ponta-bom um bom amigo. Ele

permanece com o seu app, fica de olho nele, e detecta rapidamente

regresses.


O aplicativo agora tem uma caixa de pesquisa. Observe que a lista de telefone

na pgina muda dependendo do que o usurio digita na caixa de pesquisa.

As diferenas mais importantes entre as etapas 2 e 3 esto listados

abaixo. Voc pode ver o diff completo em GitHub :

Controlador

Ns no fez alteraes para o controlador.

Modelo

app / index.html :

1.

2.

3.

4.

5.

6. Pesquisa:

7.

8.

9.

10.

11.

12.

13.

14. {{Phone.name}}


16.

17.

18.

19.

20.

21.

Ns adicionamos um padro HTML tag e usado angular do filtro

$ funo para processar a entrada para ongRepeat directiva.

Isso permite que um usurio digite os critrios de pesquisa e ver imediatamente

os efeitos de sua pesquisa sobre a lista de telefones. Este novo cdigo

demonstra o seguinte:

De ligao de dados: Este um dos principais recursos do angular. Quando

a pgina carregada, liga-se o nome angular da caixa de entrada para uma

varivel com o mesmo nome no modelo de dados e mantm os dois em

sincronia.

Neste cdigo, os dados que um usurio digita na caixa de entrada

(chamado de consulta ) imediatamente disponvel como um filtro de

entrada no repetidor lista ( telefone em telefones | Filtro: consulta ).Quando

as mudanas no modelo de dados causar entrada do repetidor para mudar,

o repetidor de forma eficiente atualiza o DOM para refletir o estado atual do

modelo.

O uso do filtro filtro: O filtro de funo usa a consulta valor para criar uma

nova matriz que contm apenas os registros que correspondem consulta .

ngRepeat actualiza automaticamente o modo de exibio em resposta a

mudanas no nmero de telefones devolvidos pelo filtro do filtro. O

processo completamente transparente para o desenvolvedor.

Teste

Na Etapa 2, aprendemos a escrever e executar testes de unidade. Os testes de

unidade so perfeitos para testar controladores e outros componentes de

nosso aplicativo escrito em JavaScript, mas eles no podem facilmente testar

DOM manipulao ou a fiao da nossa aplicao. Para estes, um teste end-

to-end uma escolha muito melhor.

O recurso de busca foi totalmente implementado atravs de modelos e de

ligao de dados, por isso vamos escrever nosso teste final-de-final em

primeiro lugar, para verificar se o recurso funciona.

test/e2e/scenarios.js :

1. descrever ( 'PhoneCat App' , funo () {

2.

3. descrever ( "exibio de lista Telefone ' , funo () {

4.

5. beforeEach ( funo () {

6. navegador . () NavigateTo ( '/ / app / index.html....' );

7. });

8.

9.

10. ele ( 'deve filtrar a lista de telefone como usurio digita na caixa de

pesquisa " , funo () {

11. esperar ( repetidor ( "telefones li. ' ). contar ()). Tobe ( 3 );

12.

13. entrada ( 'consulta' .) entrar ( 'Nexus' );


15.

16. entrada ( 'consulta' .) entrar ( 'motorola' );


18. });

19. });

20. });

Mesmo que a sintaxe deste teste se parece muito com o nosso teste de

unidade controladora escrito com Jasmine, a prova de ponta a ponta-usa APIs

do corredor angular de teste do final-de-final .

Para executar o teste de ponta a ponta, abra um dos seguintes em uma nova

aba do navegador:

usurios Node.js: http://localhost:8000/test/e2e/runner.html

usurios com outros servidores http: http://localhost: [porta-nmero] /

[contexto-caminho] / test/e2e/runner.html

leitor casual: http://angular.github.com/angular-phonecat/step-

3/test/e2e/runner.html

Anteriormente vimos como Testacular pode ser usado para executar testes de

unidade. Bem, ele tambm pode executar os testes de fim-de-

final! Use ./scripts/e2e-test.sh script para isso. End-to-end testes so lentos, to

diferente com testes de unidade, Testacular sair aps o ensaio e no

automaticamente executar novamente o pacote de teste em cada mudana de

arquivo. Para executar novamente o conjunto de teste, execute o e2e-

test.sh script novamente.

Este teste verifica se a caixa de pesquisa e do repetidor esto corretamente

ligados entre si. Observe como fcil escrever end-to-end testes em

angular. Embora este exemplo para um teste simples, que realmente assim

to fcil de configurar qualquer funcional, de fcil leitura, o teste de ponta a

ponta.

Experimentos

Mostrar o valor atual da consulta modelo adicionando uma consulta

{{}} ligao para o index.htmlmodelo, e ver como ele muda quando voc

digita na caixa de entrada.

Vamos ver como podemos obter o valor atual da consulta modelo a

aparecer no ttulo da pgina HTML.

Voc pode pensar que voc poderia apenas adicionar a tag para o

elemento ttulo da seguinte forma:

Google Phone Gallery: {{consulta}}

No entanto, quando voc recarregar a pgina, voc no vai ver o resultado

esperado. Isto porque o modelo de "consulta" vive no mbito definido pelo

elemento corpo:

Se voc deseja ligar para o modelo de consulta do elemento, voc

deve mover o ngControllerdeclarao para o elemento HTML, porque a

me comum do corpo e elementos do ttulo:

Certifique-se de remover o controlador-ng declarao do elemento corpo.

Enquanto estiver usando curlies dupla funciona bem dentro do elemento

ttulo, voc deve ter notado que, por uma frao de segundo que eles so

realmente exibida para o usurio, enquanto a pgina carregada. Uma

soluo melhor seria usar o ngBind ou ngBindTemplate directivas, que so

invisveis para o usurio enquanto a pgina carregada:

Google

Phone Gallery

Adicione o teste final-de-final a seguir para a descrever bloco

dentro test/e2e/scenarios.js :

1. ele ( 'deve exibir o valor atual do filtro dentro de um elemento com o

"status" ID " ,

2. funo () {

3. esperar ( elemento ( '# status " ). texto ()). toMatch ( actual / filter: \ s *

$ / );

4.


6.

7. esperar ( elemento ( '# status " ). texto ()). toMatch ( actual / filtro:

nexus \ s * $ / );

8.

9. / / Verso alternativa da ltima afirmao que testa apenas o valor da

ligao

10. usando ( 'status #' ). esperar ( ligao ( 'consulta' )). Tobe ( 'Nexus' );

11. });

Atualizar a aba do navegador com o corredor de teste de ponta a ponta

para ver o teste falhar. Para fazer o teste passar, edite o index.html modelo

para adicionar uma div ou p elemento com ID de "status" e de contedo

com a consulta vinculativa, com o prefixo "filtro atual:". Por exemplo:

filtro atual: {{consulta}}

Adicionar uma pausa () dentro de declarao de um teste end-to-end e

executar novamente ele. Voc vai ver a pausa corredor, o que lhe d a

oportunidade de explorar o estado do seu aplicativo enquanto ele exibido

no navegador. O aplicativo ao vivo! Voc pode alterar a consulta de

pesquisa para provar isso. Observe como este til para soluo de

problemas de ponta a ponta-testes.

Resumo

Ns j adicionou pesquisa de texto completo e incluiu um teste para verificar se

busca funciona! Agora vamos para a etapa 4 para aprender a adicionar a

classificao capacidade de o aplicativo de telefone.

Nesta etapa, voc ir adicionar um recurso para permitir que seus usurios

controlar a ordem dos itens na lista de telefone. A ordenao dinmica

implementada atravs da criao de um novo modelo de propriedade de fiao,

que juntamente com o repetidor, e deixar a magia de ligao de dados faa o

resto do trabalho.


Voc deve ver que, alm de a caixa de pesquisa, o aplicativo exibe um menu

que permite aos usurios controlar a ordem em que os telefones esto listados.

As diferenas mais importantes entre as etapas 3 e 4 esto listados

abaixo. Voc pode ver o diff completo em GitHub :

Modelo

app / index.html :

1. Pesquisa : < entrada ng - modelo = "consulta" >

2. Ordenar por :

3. < selecione ng - modelo = "orderProp" >

4. < valor da opo = "nome" > alfabtica < / option>

5. mais recentes

6. < / select>

7.

8.

9.

10.

11. {{Phone.name}}

12. {{phone.snippet}}

13. < / li>

14.

Fizemos as seguintes alteraes ao index.html modelo:

Primeiro, ns adicionamos um elemento HTML

chamado orderProp , para que nossos usurios podem escolher entre as

duas opes de classificao previstos.

Em seguida, o preso filtro filtro com orderBy filtro para continuar a processar

a entrada para o repetidor.orderBy um filtro que recebe um array de

entrada, copia e reordena a cpia que ento devolvido.

Angular cria uma maneira dois de ligao de dados entre o elemento de

seleo ea orderProp modelo. orderProp ento utilizado como entrada para

o orderBy filtro.

Como discutimos na seo sobre ligao de dados e do repetidor no passo 3,

sempre que as alteraes do modelo (por exemplo, porque um usurio altera a

ordem com a queda selecione no menu), angular da ligao de dados far com

que a viso para atualizar automaticamente. Nenhum cdigo de manipulao

inchado DOM necessrio!

Controlador


1. funo PhoneListCtrl ( mbito $ ) {

2. $ mbito . telefones = [

3. { "nome" : "Nexus S" ,

4. "Trecho" : "Fast ficou mais rpido com o Nexus S." ,

5. "Idade" : 0 },

6. { "nome" : "A Motorola XOOM com Wi-Fi" ,

7. "Trecho" : "The Next, tablet da prxima gerao." ,

8. "Idade" : 1 },

9. { "nome" : "A Motorola XOOM " ,

10. "Trecho" : "The Next, tablet da prxima gerao." ,

11. "Idade" : 2 }

12. ];

13.

14. $ mbito . orderProp = "idade" ;

15. }

Ns modificamos a telefones modelo - a matriz de telefones - e acrescentou

uma idade propriedade para cada registro telefone. Esta propriedade

usada para ordenar os telefones por idade.

Ns adicionamos uma linha para o controlador que define o valor padro

de orderProp de idade . Se no tinha definido o valor padro aqui, o modelo

iria ficar no inicializado at que o nosso usurio poderia escolher uma

opo no menu suspenso.

Este um bom momento para falar sobre duas vias de ligao de

dados. Observe que quando o aplicativo carregado no navegador, "mais

recentes" selecionado no menu suspenso. Isto porque ns

definir orderProp a"idade" do controlador. Assim as obras de ligao na

direo do nosso modelo para a interface do usurio. Agora, se voc

selecionar "ordem alfabtica" no menu drop-down, o modelo ser atualizado

tambm e os telefones sero reajustados. Essa a ligao de dados

fazendo o seu trabalho na direo oposta - a partir da interface do usurio

para o modelo.

Teste

As mudanas que fizemos deve ser verificada com ambos uma unidade de

teste e um teste de ponta a ponta. Vamos olhar para o primeiro teste de

unidade.



2.


4. var mbito , ctrl ;

5.


7. escopo = {},

8. ctrl = novo PhoneListCtrl ( escopo );

9. });

10.

11.

12. ele ( 'deve criar "telefones" modelo com trs telefones " , funo () {

13. esperar ( escopo . telefones . comprimento ). Tobe ( 3 );

14. });

15.

16.

17. ele ( 'deve definir o valor padro de orderProp modelo " , funo () {

18. esperar ( escopo . orderProp ). Tobe ( "idade" );

19. });

20. });

21. });

O teste de unidade agora verifica se a propriedade ordenao padro

definido.

Usamos API Jasmine para extrair a construo controlador em

um beforeEach bloco, que compartilhado por todos os testes do

pai descrever bloco.

Agora voc deve ver a seguinte sada na guia Testacular:

Chrome 22,0: Executado 2 de 2 SUCESSO (0,021 s / 0,001 segundos)

Vamos voltar nossa ateno para o teste final-de-final.


1. ...

2. ele ( 'deve ser possvel controlar a ordem de telefone atravs do caixa

suspensa select' ,

3. funo () {

4. / / Vamos estreitar o conjunto de dados para fazer as afirmaes de

teste mais curtos

5. entrada ( 'consulta' .) entrar ( 'tablet' );

6.

7. esperar ( repetidor ( '. telefones li' , 'Lista Telefnica' ). coluna (

"phone.name ' )).

8. toEqual ([ "Motorola XOOM \ u2122 com Wi-Fi" ,

9. "A Motorola XOOM \ u2122" ]);

10.

11. select ( 'orderProp' ). opo ( 'letra' );

12.

13. esperar ( repetidor ( '. telefones li' , 'Lista Telefnica' ). coluna (

"phone.name ' )).

14. toEqual ([ "MOTOROLA XOOM \ u2122" ,

15. "A Motorola XOOM \ u2122 com Wi-Fi" ]);

16. });

17. ...

O teste final-de-final verifica se o mecanismo de ordenao da caixa de

seleo est funcionando corretamente.

Agora voc pode executar novamente ./scripts/e2e-test.sh ou atualizar a aba

do navegador com o fim-de-final de teste runner.html para ver a execuo dos

testes, ou voc pode v-los em execuo no servidor do angular .

Experimentos

No PhoneListCtrl controlador, remova a instruo que define

o orderProp valor e voc vai ver que vai temporariamente angular adicionar

uma nova opo "desconhecido" para a lista suspensa e a ordenao ser

o padro para no-ordenada / ordem natural.

Adicionar um {{}} orderProp ligao para o index.html modelo para exibir

seu valor atual como texto.

Resumo

Agora que voc adicionou classificao lista e testou o aplicativo, v para o

passo 5 para aprender sobre os servios angular e como angular usa injeo

de dependncia.

Chega de construo de um aplicativo com trs telefones em um conjunto de

dados codificados! Vamos buscar um maior conjunto de dados do nosso

servidor usando um dos angulares do built-in servios de chamada $ http . Ns

vamos usar angular de injeo de dependncia (DI) para prestar o servio

ao PhoneListCtrl controlador.


Voc deve ver agora uma lista de 20 telefones.



Dados

O app / telefones / phones.json arquivo em seu projeto um conjunto de dados

que contm uma lista maior de telefones armazenados no formato JSON.

Este um exemplo do arquivo:

1. [

2. {

3. "Idade" : 13 ,

4. "Id" : "motorola-defy-com-MOTOBLUR" ,

5. "Nome" : "A Motorola DEFY \ u2122 com MOTOBLUR \ u2122" ,

6. "Trecho" : "Voc est pronto para a vida tudo lana seu caminho?"

7. ...

8. }

9. ...

10. ]

Controlador

Vamos usar angular de $ http servio em nosso controlador para fazer uma

solicitao HTTP para o servidor web para buscar os dados no app / telefones /

phones.json arquivo. $ http apenas um dos vrios built-in servios

angulares que lidar comum operaes em aplicaes web. Angular injeta esses

servios para voc, onde voc precisar deles.

Servios so gerenciados por angular do subsistema de DI . Injeo de

dependncia ajuda a tornar seus aplicativos web ambos. Bem estruturada (por

exemplo, componentes separados para apresentao, dados e controle) e

flexvel (dependncias entre os componentes no so resolvidos pelos prprios

componentes, mas pelo subsistema DI)

app / js / controllers.js:

1. funo PhoneListCtrl ( $ mbito , $ http ) {

2. $ Http . obter ( "telefones / phones.json ' ). sucesso ( funo ( dos dados )

{

3. $ mbito . telefones = dados ;

4. });

5.


7. }

8.

9. . / / PhoneListCtrl $ injetar = ['mbito $', '$ http'];

$ Http faz uma solicitao HTTP GET para o nosso servidor web,

pedindo telefone / phones.json (a URL relativa ao

nosso index.html arquivo). O servidor responde ao fornecer os dados no

arquivo json. (A resposta poderia muito bem ter sido gerado dinamicamente por

um servidor de back-end. Para o navegador e nosso aplicativo que ambos tm

a mesma aparncia. Pelo bem da simplicidade, usou um arquivo json neste

tutorial.)

O $ http servio retorna um objeto promessa com um sucesso mtodo. Ns

chamamos este mtodo para manipular a resposta assncrona e atribuir os

dados do telefone para o alcance controlado por este controlador, como um

modelo chamado de telefones . Observe que angular detectada a resposta json

e analisado por ns!

Para usar um servio em angular, voc simplesmente declarar os nomes das

dependncias que voc precisa como argumentos para a funo de controlador

de construtor, como segue:

funo PhoneListCtrl ($ mbito, $ http) {...}

Angular de dependncia do injetor fornece servios para o seu controlador

quando o controlador est sendo construdo.O injetor de dependncia tambm

cuida da criao de quaisquer dependncias transitivas o servio pode ter

(servios muitas vezes dependem de outros servios).

Note que os nomes dos argumentos so significativos, porque o injector usa

para procurar as dependncias.

'$' Prefixo Naming Convention

Voc pode criar seus prprios servios, e de fato vamos fazer exatamente isso

na etapa 11. Como uma conveno de nomeao angular, built-in servios,

mtodos de escopo e uma APIs angular alguns outros tm um prefixo '$' na

frente do nome. No use um prefixo '$' ao nomear seus servios e modelos, a

fim de evitar possveis colises de nomenclatura.

Uma nota sobre Minification

Desde infere angulares dependncias do controlador de os nomes dos

argumentos para a funo de controlador de construtor, se voc fosse

para apoucar o cdigo JavaScript para PhoneListCtrl controlador, todos os

argumentos de sua funo seria minified bem, eo injector dependncia no

seria capaz de identificar servios corretamente.

Para superar os problemas causados por minification apenas atribuir uma

matriz com cordas de servio identificador para o $ injetar propriedade da

funo de controlador, assim como a ltima linha no trecho (comentada)

sugere:

. PhoneListCtrl $ injetar = ['mbito $', '$ http'];

H tambm mais uma forma de especificar esta lista de dependncia e evitar

problemas de minimizao - usando a notao de colchetes que envolve a

funo a ser injetado em uma matriz de strings (representando os nomes de

dependncia), seguido pela funo a ser injetado:

var PhoneListCtrl = ['mbito $', '$ http', function ($ mbito, $ http) {/ * construtor

corpo * /}];

Ambos os mtodos de trabalho com qualquer funo que pode ser injetado por

angular, por isso at guia de estilo do seu projeto para decidir qual deles voc

usa.

Teste


Porque comeamos a usar injeo de dependncia e nosso controlador tem

dependncias, construindo o controlador em nossos testes um pouco mais

complicado. Ns poderamos usar o novo operador e fornecer o construtor com

algum tipo de falso http $ implementao. Contudo, a forma recomendada (e

mais fcil) a criao de um controlador no ambiente de teste da mesma

maneira que o faz angular no cdigo de produo atrs dos bastidores, como

se segue:


2.


4. var mbito , ctrl , $ httpBackend ;

5.

6. beforeEach ( injetar ( funo ( _ $ httpBackend_ , $ rootScope ,

controlador $ ) {

7. $ HttpBackend = _ $ httpBackend_ ;

8. $ HttpBackend . expectGET ( 'telefones / phones.json' ).

9. responder ([{ nome : 'Nexus S' }, { nome : 'Motorola DROID' }]);

10.

11. escopo = rootScope $ . $ new ();

12. ctrl = $ controller ( PhoneListCtrl , { mbito $ : escopo });

13. }));

Nota: Porque ns carregado Jasmine e -angular mocks.js em nosso ambiente

de teste, temos dois mtodos ajudante mdulo e injetar que ns vamos usar

para acessar e configurar o injector.

Crimos o controlador no ambiente de teste, como segue:

Usamos a injetar mtodo auxiliar para injetar instncias de $

rootScope , controlador de $ e $ httpBackend servios na

Jasmine beforeEach funo. Estes casos vm de um injector que recriado

a partir do zero para todos os testes. Isso garante que cada teste iniciado

a partir de um ponto de partida conhecido, e cada teste isolado a partir do

trabalho realizado em outros testes.

Criamos um novo escopo para nosso controlador chamando $ rootScope. $

new ()

Ns chamado injetado $ controller funo de passar a PhoneListCtrl funo

eo escopo criado como parmetros.

Porque o nosso cdigo agora usa o $ http servio para buscar os dados do

telefone de lista em nosso controlador, antes de criar o PhoneListCtrl escopo

filho, precisamos dizer ao equipamento de teste para esperar uma solicitao

de entrada do controlador. Para fazer isso:

Pedir $ httpBackend servio a ser injetado em

nosso beforeEach funo. Esta uma verso falsa do servio que, em um

ambiente de produo facilita a todos os pedidos XHR e JSONP. A verso

simulada de este servio permite que voc escreva testes sem ter que lidar

com APIs nativas eo estado global associado com eles - tanto os que fazem

teste de um pesadelo.

Use a $ httpBackend.expectGET mtodo para treinar a $

httpBackend servio para esperar uma solicitao HTTP de entrada e dizer

o que responder. Note-se que as respostas no so retornados at que

chamar o $ httpBackend.flush mtodo.

Agora, vamos fazer afirmaes para verificar se a telefones modelo no existe

no mbito antes que a resposta recebida:

1. ele ( 'deve criar "telefones" modelo com dois telefones buscados xhr " ,

funo () {

2. esperar ( escopo . telefones ). toBeUndefined ();

3. $ HttpBackend . lavar ();

4.

5. esperar ( escopo . telefones .) toEqual ([{ nome : 'Nexus S' },

6. { nome : 'Motorola DROID' }]);

7. });

Ns limpar a fila de pedidos no navegador chamando $ httpBackend.flush

() . Isso faz com que a promessa retornado pelo $ http servio a ser

resolvido com a resposta treinada.

Ns fazemos as afirmaes, verificando que o modelo de telefone agora

existe no escopo.

Finalmente, verifica-se que o valor padro de orderProp est configurado

corretamente:



3. });

4. ;

5.



Experimentos

Na parte inferior da index.html , adicione uma {{telefones | json}} ligao

para ver a lista de telefones exibidos no formato JSON.

No PhoneListCtrl controlador, a pr-processar a resposta http, limitando o

nmero de telefones para o 5 primeiro lugar na lista. Use o seguinte cdigo

no retorno http $:

$ Scope.phones data.splice = (0, 5);

Resumo

Agora que voc aprendeu como fcil de utilizar os servios angulares (graas

injeo de dependncia angular), v para o passo 6 , onde voc ir adicionar

algumas imagens em miniatura de telefones e alguns links.

Nesta etapa, voc ir adicionar imagens em miniatura para os telefones da lista

de telefones e links que, por agora, vai dar em nada. Nas etapas subsequentes

que voc vai usar os links para exibir informaes adicionais sobre os telefones

no catlogo.


Agora voc deve ver links e imagens dos telefones na lista.



Dados

Note que o phones.json arquivo contm ids nicos e urls imagem para cada um

dos aparelhos. O ponto de urls para oapp / img / telefones / diretrio.

app / telefones / phones.json (trecho de exemplo):

1. [

2. {

3. ...

4. "Id" : "motorola-defy-com-MOTOBLUR" ,

5. "ImageUrl" : "img/phones/motorola-defy-with-motoblur.0.jpg" ,

6. "Nome" : "A Motorola DEFY \ u2122 com MOTOBLUR \ u2122" ,

7. ...

8. }

9. ...

10. ]

Modelo

app / index.html :

1. ...

2. < ul classe = "telefones" >

3. < li ng - repeat = "telefone em telefones | Filtro: consulta | orderBy:

orderProp" classe = "thumbnail" >

4. < a href = "# / phones / {{}} phone.id" classe = "polegar" > < img ng

- src = "{{phone.imageUrl}}" >

5. < a href = "# / phones / {{phone.id}}" > {{ telefone . nome }}

6. {{ telefone . trecho }}

7. < / li>

8.

9. ...

Para gerar dinamicamente links que no futuro, levar a pginas de detalhes de

telefone, foi utilizado o agora familiar de ligao cinta dupla encaracolado

nas href valores de atributos. Na etapa 2, adicionamos o {{}}

phone.name ligao como o contedo do elemento. Neste passo,

o {{phone.id}} de ligao usado no atributo do elemento.

Ns tambm adicionamos imagens de telefone ao lado de cada registro usando

uma tag de imagem com o ngSrcdirectiva. Esta directiva impede o navegador

de tratar o angular {{expresso}} marcao literalmente, e de iniciar um pedido

de url invlida http://localhost:8000/app/ {{}} phone.imageUrl , o que teria feito

se tivssemos especificados apenas uma ligao de atributo em um

regular src atributo ( ). Usando

o ngSrc directiva impede o navegador de fazer uma solicitao HTTP para um

local invlido.

Teste


1. ...

2. ele ( 'deve tornar as ligaes de telefone especficos " , funo () {


4. elemento ( "telefones li um. ' ). clique ();

5. esperar ( navegador (). localizao (). url ()). Tobe ( '/ telefones / nexus-

s' );

6. });

7. ...

Ns adicionamos um teste end-to-end novo para verificar se o aplicativo est

gerando ligaes corretas para os pontos de vista de telefone que vamos

implementar nas etapas seguintes.


do navegador com o corredor de teste de ponta a ponta para ver a execuo

dos testes, ou voc pode v-los em execuo no servidor do angular .

Experimentos

Substitua o ng-src directiva com um bom e velho src atributo. Usando

ferramentas como o Firebug, ou Inspector Chrome Web, ou inspecionar os

logs de acesso do servidor web, confirmar que o aplicativo est de fato

fazendo um pedido estranho / app / 7B%% 7Bphone.imageUrl% 7D%

7D (ou / app / telefone {{ . imageUrl}} ).

A questo aqui que o navegador ir disparar um pedido de que o

endereo da imagem invlido assim que atinge oimg tag, que antes

angular tem a chance de avaliar a expresso e injetar o endereo vlido.

Resumo

Agora que voc adicionou imagens de telefones e links, v para o passo 7 para

aprender sobre modelos de layout angular e como angular faz com que seja

fcil criar aplicaes que tm pontos de vista mltiplos.

Nesta etapa, voc vai aprender como criar um modelo de layout e como

construir um aplicativo que tem mltiplas vises, acrescentando roteamento.


Observe que quando voc agora navegar para app / index.html , voc ser

redirecionado para telefones # / app / index.html ea lista mesmo telefone

aparece no navegador. Quando voc clica em um link de telefone do toco de

uma pgina de detalhe de telefone seja exibido.


completo em GitHub .

Modelo de Mltiplas Vises de roteamento, e Layout

Nosso aplicativo est lentamente crescendo e se tornando mais

complexa. Antes do passo 7, o aplicativo aos nossos usurios uma viso nica

(a lista de todos os telefones), e todo o cdigo do modelo foi localizado

no index.htmlarquivo. O prximo passo na construo do aplicativo adicionar

uma viso que vai mostrar informaes detalhadas sobre cada um dos

dispositivos em nossa lista.

Para adicionar a exibio detalhada, poderamos expandir o index.html arquivo

para conter cdigo de modelo para ambos os pontos de vista, mas que iria ficar

confuso muito rapidamente. Em vez disso, vamos transformar

oindex.html modelo para o que chamamos de um "modelo de layout". Este

um modelo que comum para todos os pontos de vista em nossa

aplicao. Outros "modelos parciais" so ento includos neste modelo de

layout, dependendo da "rota" atual - a viso de que atualmente exibida para o

usurio.

Rotas de aplicao em angular so declarados atravs da routeProvider $ , que

o provedor do servio via $ .Este servio torna mais fcil para unir

controladores, ver modelos, ea localizao atual URL no navegador. Usando

esse recurso podemos implementar vinculao profunda , que nos permite

utilizar a histria do navegador (para trs e para a frente de navegao) e de

marcadores.

Uma nota sobre DI, Injector e Provedores

Como voc percebeu , a injeo de dependncia a caracterstica central do

AngularJS, por isso importante para voc entender uma coisa ou duas sobre

como ele funciona.

Quando os cadaros de aplicao, angular cria um injector que ser utilizado

para todas as coisas DI neste app. O injetor em si no sabe nada sobre o que $

http ou rota $ servios que, na verdade, ainda no sabe sobre a existncia

desses servios, a menos que ele est configurado com definies mdulo

apropriado. As responsabilidades nicos do injetor so para carregar definio

de mdulo especificado (s), registar todos os prestadores de servio definidos

nestes mdulos e quando perguntado injetar uma funo especificada com

dependncias (servios) que preguiosamente instancia por meio de seus

fornecedores.

Fornecedores so objectos que proporcionam (criar) casos de servios e expor

APIs de configurao que pode ser utilizada para controlar a criao e

comportamento de tempo de execuo de um servio. No caso da rota

$ servio, orouteProvider $ expe APIs que permitem definir rotas para sua

aplicao.

Mdulos angulares resolver o problema de remover o estado global da

aplicao e fornecer uma maneira de configurar o injector. Em oposio a AMD

ou mdulos require.js, mdulos angulares no tente resolver o problema da

carga roteiro ordenao ou recuperao roteiro preguioso. Essas metas so

ortogonais e ambos os sistemas de mdulos podem viver lado a lado e cumprir

seus objetivos.

O Mdulo de App

app / js / app.js :

1. angular . mdulo ( 'phonecat' , []).

2. configurao ([ '$ routeProvider " , funo ( $ routeProvider ) {

3. $ RouteProvider .

4. quando ( '/ phones' , { templateUrl : 'parciais / telefone list.html' ,

controlador : PhoneListCtrl }).

5. quando ( '/ telefones /: phoneid' , { templateUrl : 'parciais / telefone

detail.html' , controlador : PhoneDetailCtrl }).

6. caso contrrio ({ redirectTo : '/ telefones " });

7. }]);

Para configurar nossa aplicao com rotas, precisamos criar um mdulo para a

nossa aplicao. Ns chamamos este mdulo phonecat e usando

a configurao API, solicitamos ao routeProvider $ para ser injetado em nossa

funo de configurao e usar $ routeProvider.when API para definir as nossas

rotas.

Note-se que durante a fase de configurao do injector, os profissionais de

sade podem ser injectada, bem como, mas no estar disponvel para

injeco uma vez que o injector criado e comea a criar instncias de servio.

Nossas rotas de aplicao foram definidos da seguinte forma:

A exibio de lista telefone ser mostrada quando o fragmento de URL

hash / phones . Para construir essa viso, angular vai usar o telefone

list.htmlmodelo eo PhoneListCtrl controlador.

O telefone de exibio de detalhes sero mostrados quando "telefone / /:

phoneid 'a URL partidas fragmento hash, onde : phoneid uma parte

varivel da URL. Para construir o telefone de exibio de detalhes, angular

vai usar otelefone detail.htmlmodelo eo PhoneDetailCtrl controlador.

Ns reutilizado o PhoneListCtrl controlador que construmos nas etapas

anteriores e ns adicionamos um novo, vazio PhoneDetailCtrl controlador para

o app / js / controllers.js arquivo para a exibio de detalhes telefone.

A declarao $ route.otherwise ({redirectTo: '/ phones'}) desencadeia um

redirecionamento paratelefones / endereos do navegador quando o no

corresponde qualquer uma de nossas rotas.

Note-se a utilizao do : phoneid parmetro na declarao segunda rota. A rota

$ servio usa a declarao de rota - '/ / telefones: phoneid " - como um modelo

que comparado com a URL atual. Todas as variveis definidas com

o : notao so extrados para o $ routeParams objeto.

Para que a nossa aplicao para iniciar com nosso mdulo recm-criado que

tambm precisa especificar o nome do mdulo como o valor

da ngApp directiva:

app / index.html :

1.

2.

3. ...

Controladores


1. ...

2. funo PhoneDetailCtrl ( $ mbito , $ routeParams ) {

3. $ mbito . phoneid = $ routeParams . phoneid ;

4. }

5.

6. . / PhoneDetailCtrl / $ injetar = ['mbito $', '$ routeParams'];

Modelo

A rota $ servio normalmente usado em conjunto com o ngView directiva. O

papel do ngView directiva incluir o modelo de viso para a rota atual para o

modelo de layout, o que o torna um ajuste perfeito para o

nosso index.htmlmodelo.

app / index.html :

1.

2.

3. ...

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

Note que ns removemos a maior parte do cdigo no index.html modelo e

substituiu-o com uma nica linha contendo um div com o ng-view atributo. O

cdigo que removido foi colocado no telefone list.html- template:

app / parciais / telefone-list.html :

1.

2.

3.

4.

5.

6. Pesquisa:

7. Classificar por:

8.

9. alfabtica

10. Mais Novo

11.

12.

13.

14.

15.

16.

17.

18.

19.

20. {{}} phone.name


22.

23.

24.

25.

26.

27.

Ns tambm adicionamos um modelo de espao reservado para a exibio de

detalhes telefone:

app / parciais / telefone-detail.html :

1. TBD : vista de detalhe para {{ phoneid }}

Note como estamos usando phoneid modelo definido

no PhoneDetailCtrl controlador.

Teste

Para automaticamente verificar que tudo est conectado corretamente, que

escreveu de ponta a ponta-testes que navegar para vrias URLs e verificar que

a viso correta foi rendido.

1. ...

2. ele ( "deve redirecionar index.html para index.html # / phones" , funo ()

{

3. navegador . () NavigateTo ( '/ / app / index.html....' );

4. esperar ( navegador (). localizao (). url ()). Tobe ( '/ phones " );

5. });

6. ...

7.

8. descrever ( "vista de detalhe Telefone ' , funo () {

9.


11. navegador . () NavigateTo ( '/ / app / index.html # / telefones / nexus-

s....' );

12. });

13.

14.

15. ele ( 'deve exibir a pgina de espao reservado com phoneid " , funo

() {

16. esperar ( ligao ( 'phoneid' )). Tobe ( "nexus-s ' );

17. });

18. });




Experimentos

Tente adicionar um {{}} orderProp ligao a index.html , e voc ver que

nada acontece mesmo quando voc est na visualizao da lista de

telefone. Isto porque o orderProp modelo apenas visvel no escopo

gerido por PhoneListCtrl , que est associado com o ng-view>

Dados

Alm de phones.json , o app / telefones / diretrio tambm contm um arquivo

json para cada telefone:

app / telefones / nexus-s.json : (trecho de exemplo)

1. {

2. "AdditionalFeatures" : "Mostrar Contorno, Near Field Communications

(NFC), ..." ,

3. "Android" : {

4. "Os" : "Android 2.3" ,

5. "Ui" : "Android"

6. }

7. ...

8. "Imagens" : [

9. "Img/phones/nexus-s.0.jpg" ,



12. "Img/phones/nexus-s.3.jpg"

13. ]

14. "Armazenamento" : {

15. "Flash" : "16384MB" ,

16. "Ram" : "512"

17. }

18. }

Cada um destes ficheiros descreve vrias propriedades do telefone utilizando a

mesma estrutura de dados. Ns vamos mostrar esses dados na exibio de

detalhes telefone.

Controlador

Vamos expandir a PhoneDetailCtrl usando o $ http servio para buscar os

arquivos JSON. Isto funciona da mesma maneira como o controlador de lista

telefnica.


1. funo PhoneDetailCtrl ( $ mbito , routeParams $ , $ http ) {

2. $ Http . obter ( 'telefones /' + $ routeParams . phoneid + '. json' ).

sucesso ( funo ( dos dados ) {

3. $ mbito . telefone = dados ;

4. });

5. }

6.

7. . / PhoneDetailCtrl / $ injetar = ['mbito $', '$ routeParams', '$ http'];

Para construir a URL para a solicitao HTTP, usamos $

routeParams.phoneId extrado da rota atual pela rota $servio.

Modelo

A linha de espao reservado TBD foi substitudo por listas e ligaes que

compem os detalhes do telefone. Observe onde usamos o

angular {{expresso}} marcao e ngRepeat para projetar dados do telefone do

nosso modelo para a exibio.


1.

2.

3. {{}} phone.name

4.

5. {{}} phone.description

6.

7.

8.

9.

10.

11.

12.

13.

14.

15. Disponibilidade e Redes

16.

17. Disponibilidade

18. {{}}

disponibilidade

19.

20.

21. ...

22.

23. Recursos adicionais

24. {{}} phone.additionalFeatures

25.

26.

Teste

Ns escrevemos um novo teste de unidade que semelhante que escreveu

para o PhoneListCtrl controlador no passo 5.


1. ...

2. descrever ( 'PhoneDetailCtrl " , funo () {

3. var mbito , $ httpBackend , ctrl ;

4.

5. beforeEach ( injetar ( funo ( _ $ httpBackend_ , rootScope $ , $

routeParams , $ controller ) {


7. $ HttpBackend . expectGET ( 'telefones / xyz.json' ). responder ({ nome

: 'telefone xyz' });

8.

9. $ RouteParams . phoneid = 'xyz' ;


11. ctrl = $ controller ( PhoneDetailCtrl , { mbito $ : escopo });

12. }));

13.

14.

15. ele ( 'deve buscar detalhes telefone , funo () {

16. esperar ( escopo . telefone ). toBeUndefined ();


18.

19. esperar ( escopo . telefone .) toEqual ({ nome : 'telefone xyz' });

20. });

21. });

22. ...



Ns tambm adicionamos um teste end-to-end novo que navega para a pgina

do Nexus S detalhes e verifica se o ttulo da pgina "Nexus S".


1. ...


3.


5. navegador . () NavigateTo ( '/ / app / index.html # / telefones / nexus-

s....' );

6. });

7.

8.

9. ele ( 'deve exibir nexo pgina' , funo () {

10. esperar ( ligao ( 'phone.name' )). Tobe ( 'Nexus S' );

11. });

12. });

13. ...




Experimentos

Utilizando a API angular do corredor de ponta a ponta-teste , escreva um

teste que verifica se apresentamos quatro imagens em miniatura na pgina

do Nexus S detalhes.

Resumo

Agora que o telefone de exibio de detalhes est no lugar, avanar para o

passo 9 para aprender a escrever o seu filtro de exibio personalizada.

Nesta etapa, voc vai aprender como criar seu prprio filtro de exibio

personalizada.


Navegue at uma das pginas de detalhes.

Na etapa anterior, a pgina de detalhes apresentados ou "verdadeiro" ou

"falso" para indicar se certas funes do telefone estavam presentes ou

no. Temos usado um filtro personalizado para converter os strings de texto em

glifos: para "true", e para "false". Vamos ver o que o cdigo do filtro

parece.



Filtro personalizado

A fim de criar um novo filtro, voc vai criar um phonecatFilters mdulo e

registrar o seu filtro personalizado com este mdulo:

app / js / filters.js :

1. angular . mdulo ( "phonecatFilters ' , []). filtro ( 'marca' , funo () {

2. retorno da funo ( de entrada ) {

3. retornar entrada ? '\ u2713' : '\ u2718' ;

4. };

5. });

O nome do nosso filtro "marca". A entrada avaliada

como verdadeira ou falsa , e retornar um de dois caracteres Unicode que

escolhemos para representar verdadeiro ou falso ( \ u2713 e \ u2718 ).

Agora que o nosso filtro est pronto, precisamos registrar

o phonecatFilters mdulo como uma dependncia para o nosso

principal phonecat mdulo.

app / js / app.js :

1. ...

2. angular . mdulo ( "phonecat ' , [ 'phonecatFilters' ]).

3. ...

Modelo

Desde as vidas de cdigo de filtro na app / js / filters.js arquivo, precisamos

incluir esse arquivo no nosso modelo de layout.

app / index.html :

1. ...

2. < script src = "js / controllers.js" >

3. < script src = "js / filters.js" >

4. ...

A sintaxe para utilizar filtros em modelos angular a seguinte:

{{Expresso | Filtro}}

Vamos utilizar o filtro no modelo de detalhes de telefone:


1. ...

2.

3. Infravermelho < / dt>

4. {{phone.connectivity.infrared | marca}}

5. GPS < / dt>

6. {{phone.connectivity.gps | marca}}

7.

8. ...

Teste

Filtros, como qualquer outro componente, devem ser testados e estes testes

so muito fceis de escrever.

teste de unidade / / filtersSpec.js :

1. descrever ( "filtro" , funo () {

2.

3. beforeEach ( mdulo ( 'phonecatFilters' ));

4.

5.

6. descrever ( 'marca' , funo () {

7.

8. ele ( "deve converter valores booleanos para unicode marca ou cruz" ,

9. injetar ( funo ( checkmarkFilter ) {

10. esperar ( checkmarkFilter ( verdadeiro )). Tobe ( '\ u2713' );

11. esperar ( checkmarkFilter ( falso )). Tobe ( '\ u2718' );

12. }));

13. });

14. });

Note que voc precisa configurar o nosso teste de injetores com

o phonecatFilters mdulo antes de qualquer um dos nossos testes de filtro

executar.



Experimentos

Vamos experimentar com alguns dos filtros embutidos angular e adicione as

seguintes ligaes paraindex.html :

{{"String tampa inferior" | maisculas}}

{{{Foo: "bar", baz: 23} | json}}

{{1304375948024 | data}}

{{1304375948024 | data: "dd / MM / aaaa @ h: mma"}}

Podemos tambm criar um modelo com um elemento de entrada, e

combin-lo com uma ligao filtrada. Adicione o seguinte ao index.html:

maiscula: {{userinput | maisculas}}

Resumo

Agora que voc j aprendeu a escrever e testar um filtro personalizado, v

para o passo 10 para aprender como podemos usar angular para melhorar o

telefone pgina de detalhes adicionais.

Nesta etapa, voc ir adicionar uma imagem clicvel swapper telefone para a

pgina de detalhes do telefone.


O telefone de exibio de detalhes mostra uma grande imagem do telefone

atual e vrias pequenas figuras. Seria timo se pudssemos substituir a

imagem grande, com qualquer uma das miniaturas, basta clicar na imagem em

miniatura desejada. Vamos dar uma olhada em como podemos fazer isso com

angular.



Controlador


1. ...

2. funo PhoneDetailCtrl ( $ mbito , routeParams $ , $ http ) {

3. $ Http . obter ( 'telefones /' + $ routeParams . phoneid + '. json' ).

sucesso ( funo ( dos dados ) {

4. $ mbito . telefone = dados ;

5. $ mbito . mainImageUrl = dados . imagens [ 0 ];

6. });

7.

8. $ mbito . setImage = funo ( imageUrl ) {

9. $ mbito . mainImageUrl = imageUrl ;

10. }

11. }

12.

13. . / PhoneDetailCtrl / $ injetar = ['mbito $', '$ routeParams', '$ http'];

No PhoneDetailCtrl controlador, criamos o mainImageUrl propriedade modelo e

definir seu valor padro para o primeiro URL telefone imagem.

Criamos tambm um setImage funo manipulador de eventos que ir mudar o

valor de mainImageUrl .

Modelo


1.

2.

3. ...

4.

5.

6.

7.

8.

9.

10. ...

Somos obrigados a ngSrc directiva da imagem grande para

o mainImageUrl propriedade.

Ns tambm registrou ngClick manipulador com imagens em

miniatura. Quando um usurio clica em uma das imagens em miniatura, o

manipulador usar o setImage funo de tratamento de evento para alterar o

valor damainImageUrl propriedade para a URL da imagem em miniatura.

Teste

Para verificar esta nova funcionalidade, que acrescentou dois end-to-end

testes. Verifica-se que a imagem principal definido como a imagem primeiro

telefone por padro. Os cliques segundo teste em vrias imagens em miniatura

e verifica que a imagem principal mudou de forma adequada.


1. ...


3.

4. ...

5.

6. ele ( 'deve exibir a imagem primeiro telefone que a imagem principal do

telefone " , funo () {

7. esperar ( elemento ( 'img.phone' ). attr ( 'src' )). Tobe (

'img/phones/nexus-s.0.jpg' );

8. });

9.

10.

11. ele ( 'deve trocar imagem principal se uma imagem em miniatura

clicado em " , funo () {

12. elemento ( 'telefone polegares-li:. nth-child (3) img' ). clique ();



14.

15. elemento ( 'telefone polegares-li:. nth-child (1) img' ). clique ();



17. });

18. });

19. });




Experimentos

Vamos adicionar um mtodo novo controlador para PhoneDetailCtrl :

$ Scope.hello = function (nome) {

alert ('Ol' + nome (| | 'mundo') + '!');

}

e adicione:

Ol boto

para o telefone details.htmlmodelo.

Resumo

Com o swapper imagem do telefone no lugar, que estamos prontos para o

passo 11 (o ltimo passo!) para aprender uma forma ainda melhor para buscar

dados.

Nesta etapa, voc ir melhorar a forma como o nosso app busca dos dados.


A ltima melhoria vamos fazer a nossa aplicao definir um servio

personalizado que representa um RESTful cliente.Usando este cliente,

podemos fazer pedidos XHR para os dados em uma maneira mais fcil, sem

ter que lidar com o baixo nvel $ http API, os mtodos HTTP e URL.



Modelo

O servio personalizado definido em app / js / services.js por isso precisamos

incluir esse arquivo no nosso modelo de layout. Alm disso, tambm

precisamos carregar o angular-resource.js arquivo, que contm

ongResource mdulo e em que o recurso $ servio, que em breve iremos usar:

app / index.html .

1. ...

2. < script src = "js / services.js" >

3. < script src = "lib / angular / angular-resource.js" >

4. ...

Servio

app / js / services.js .

1. angular . mdulo ( "phonecatServices ' , [ 'ngResource' ]).

2. fbrica ( 'Telefone' , funo ( $ resource ) {

3. voltar $ recurso ( "telefones /: phoneId.json ' , {}, {

4. consulta : { mtodo : 'GET' , params : { phoneid : "phones" }, isArray :

verdadeiro }

5. });

6. });

Usamos a API do mdulo para registrar um servio personalizado usando uma

funo de fbrica. Passamos no nome do servio - Telefone - e a funo de

fbrica. A funo de fbrica semelhante a um construtor de um controlador

em que tanto pode declarar dependncias atravs de argumentos da funo. O

servio de Telefone declarou uma dependncia norecurso $ servio.

O recurso $ servio torna fcil criar um RESTful cliente com apenas algumas

linhas de cdigo. Este cliente pode ento ser usado no nosso pedido, em vez

de o nvel inferior http $ servio.

app / js / app.js .

1. ...

2. angular . mdulo ( "phonecat ' , [ 'phonecatFilters' , 'phonecatServices' ]).

3. ...

Ns precisamos adicionar "phonecatServices" para "phonecat 'aplicativo requer

matriz.

Controlador

Simplificamos nossos sub-controladores ( PhoneListCtrl e PhoneDetailCtrl ) por

fatorao de nvel inferior http $ servio, substituindo-o por um novo servio

chamado Telefone . Angular de recursos $ servio mais fcil de usar do que $

http para interagir com as fontes de dados expostos como RESTful

recursos. Tambm mais fcil agora entender o que o cdigo em nossos

controladores esto fazendo.

app / js / controllers.js .

1. ...

2.

3. funo PhoneListCtrl ( $ mbito , telefone ) {

4. $ mbito . telefones = Telefone . consulta ();


6. }

7.

8. . / / PhoneListCtrl $ injetar = ['mbito $', 'Telefone'];

9.

10.

11.

12. funo PhoneDetailCtrl ( $ mbito , $ routeParams , telefone ) {

13. $ mbito . telefone = Telefone . obter ({ phoneid : $ routeParams .

phoneid }, funo ( telefone ) {

14. $ mbito . mainImageUrl = telefone . imagens [ 0 ];

15. });

16.

17. $ mbito . setImage = funo ( imageUrl ) {

18. $ mbito . mainImageUrl = imageUrl ;

19. }

20. }

21.

22. . / PhoneDetailCtrl / $ injetar = ['mbito $', '$ routeParams', 'Telefone'];

Observe como em PhoneListCtrl ns substituda:

$ Http.get ('telefones / phones.json'). Sucesso (function (data) {

$ Scope.phones = dados;

});

com:

$ Scope.phones Phone.query = ();

Esta uma declarao simples que queremos para consultar todos os

telefones.

Uma coisa importante a notar no cdigo acima que ns no passamos

quaisquer funes de retorno ao invocar mtodos do nosso servio de

telefone. Embora parea como se o resultado foram devolvidos de forma

sncrona, que no o caso. O que retornado sncrona um "futuro" - um

objecto, que vai ser preenchido com dados quando os retornos de resposta

XHR. Por causa da ligao de dados no angular, podemos usar esse futuro e

vincul-lo ao nosso modelo.Ento, quando os dados chegam, o ponto de vista

ir atualizar automaticamente.

s vezes, contando com o objeto futuro e de ligao de dados por si s no

suficiente para fazer tudo o que necessitam, por isso, nestes casos, pode-se

adicionar um callback para processar a resposta do

servidor. OPhoneDetailCtrl controlador ilustra isso definindo

o mainImageUrl em um retorno.

Teste

Ns modificamos nossos testes de unidade para verificar se o nosso novo

servio est emitindo solicitaes HTTP e process-los como esperado. Os

testes tambm verificar que os nossos controladores esto interagindo com o

servio corretamente.

O recurso $ servio aumenta o objeto de resposta com mtodos para atualizar

e excluir o recurso. Se fssemos usar o padro toEqual matcher, nossos testes

seria um fracasso porque os valores de teste no corresponde exatamente as

respostas. Para resolver o problema, usamos um recm-

definido toEqualData matcher Jasmine . Quando otoEqualData matcher

compara dois objetos, leva apenas em conta as propriedades do objeto e

ignora mtodos.



2.


4. este . addMatchers ({

5. toEqualData : funo ( esperado ) {

6. voltar angular . iguais ( este . real , esperada );

7. }

8. });

9. });

10.

11.

12. beforeEach ( mdulo ( 'phonecatServices' ));

13.

14.


16. var mbito , ctrl , $ httpBackend ;

17.

18. beforeEach ( injetar ( funo ( _ $ httpBackend_ , $ rootScope ,

controlador $ ) {


20. $ HttpBackend . expectGET ( 'telefones / phones.json' ).

21. responder ([{ nome : 'Nexus S' }, { nome : 'Motorola DROID' }]);

22.


24. ctrl = $ controller ( PhoneListCtrl , { mbito $ : escopo });

25. }));

26.

27.

28. ele ( 'deve criar "telefones" modelo com dois telefones buscados xhr " ,

funo () {

29. esperar ( escopo . telefones .) toEqual ([]);


31.

32. esperar ( escopo . telefones ). toEqualData (

33. [{ nome : 'Nexus S' }, { nome : 'Motorola DROID' }]);

34. });

35.

36.



39. });

40. });

41.

42.

43. descrever ( 'PhoneDetailCtrl " , funo () {

44. var mbito , $ httpBackend , ctrl ,

45. xyzPhoneData = funo () {

46. voltar {

47. Nome : 'telefone xyz' ,

48. imagens : [ 'image/url1.png' , 'image/url2.png' ]

49. }

50. };

51.

52.

53. beforeEach ( injetar ( funo ( _ $ httpBackend_ , rootScope $ , $

routeParams , $ controller ) {


55. $ HttpBackend . expectGET ( 'telefones / xyz.json' ). responder (

xyzPhoneData ());

56.

57. $ RouteParams . phoneid = 'xyz' ;


59. ctrl = $ controller ( PhoneDetailCtrl , { mbito $ : escopo });

60. }));

61.

62.

63. ele ( 'deve buscar detalhes telefone , funo () {

64. esperar ( escopo . telefone ). toEqualData ({});


66.

67. esperar ( escopo . telefone .) toEqualData ( xyzPhoneData ());

68. });

69. });

70. });


Chrome 22,0: Executado 4 de 4 SUCESSO (0,038 s / 0,01 s)

Resumo

L voc tem! Ns criamos uma aplicao web em um perodo relativamente

curto de tempo. Nas notas finais vamos cobrir para onde ir a partir daqui.

Nosso aplicativo agora est completo. Sinta-se livre para experimentar com o

cdigo ainda mais, e voltar para etapas anteriores usando o git

checkout comando.

Para mais detalhes e exemplos dos conceitos angular Ns tocamos neste

tutorial, consulte o Guia do desenvolvedor .

Para vrios exemplos de cdigo, consulte o livro de receitas .

Quando voc estiver pronto para comear a desenvolver um projeto usando

angular, recomendamos que voc arranque o seu desenvolvimento com

o angular semente projeto.

Esperamos que este tutorial foi til para voc e que voc aprendeu o suficiente

sobre angular para fazer voc querer aprender mais. Ns especialmente

espero que voc esteja inspirado para sair e desenvolver aplicaes web

angular de seu prprio pas, e que voc talvez possa estar interessado

em contribuir para angular.

Se voc tiver dvidas ou sugestes ou simplesmente quer dizer "oi", por favor

postar uma mensagem nohttps://groups.google.com/forum/ #! frum / angular .

Crditos:

Amazonlink informtica Tecnologia a seu alcance

E-mail: [email protected]

Documents

Tutorial Anjularjs Traduzido