tutorial anjularjs traduzido
TRANSCRIPT
-
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.
Instrues Workspace Redefinir
O aplicativo agora contm uma lista com trs telefones.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
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.
Instrues Workspace Redefinir
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}}
15. {{}} phone.snippet
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' );
14. esperar ( repetidor ( "telefones li. ' ). contar ()). Tobe ( 1 );
15.
16. entrada ( 'consulta' .) entrar ( 'motorola' );
17. esperar ( repetidor ( "telefones li. ' ). contar ()). Tobe ( 2 );
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.
5. entrada ( 'consulta' .) entrar ( 'Nexus' );
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.
Instrues Workspace Redefinir
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
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. "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.
teste de unidade / / controllersSpec.js :
1. descrever ( "controladores PhoneCat" , funo () {
2.
3. descrever ( 'PhoneListCtrl " , funo () {
4. var mbito , ctrl ;
5.
6. beforeEach ( funo () {
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.
test/e2e/scenarios.js :
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.
Instrues Workspace Redefinir
Voc deve ver agora uma lista de 20 telefones.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
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.
6. $ mbito . orderProp = "idade" ;
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
teste de unidade / / controllersSpec.js :
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:
1. descrever ( "controladores PhoneCat" , funo () {
2.
3. descrever ( 'PhoneListCtrl " , funo () {
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:
1. ele ( 'deve definir o valor padro de orderProp modelo " , funo () {
2. esperar ( escopo . orderProp ). Tobe ( "idade" );
3. });
4. ;
5.
Agora voc deve ver a seguinte sada na guia Testacular:
Chrome 22,0: Executado 2 de 2 SUCESSO (0,028 s / 0,007 segundos)
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.
Instrues Workspace Redefinir
Agora voc deve ver links e imagens dos telefones na lista.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
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
test/e2e/scenarios.js :
-
1. ...
2. ele ( 'deve tornar as ligaes de telefone especficos " , funo () {
3. entrada ( 'consulta' .) entrar ( 'Nexus' );
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.
Agora voc pode executar novamente ./scripts/e2e-test.sh ou atualizar a aba
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.
Instrues Workspace Redefinir
-
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.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
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.html- modelo 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.html- modelo 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
app / js / controllers.js :
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
21. {{}} phone.snippet
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.
10. beforeEach ( funo () {
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. });
Agora voc pode executar novamente ./scripts/e2e-test.sh ou atualizar a aba
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
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" ,
10. "Img/phones/nexus-s.1.jpg" ,
11. "Img/phones/nexus-s.2.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.
-
app / js / controllers.js :
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.
app / parciais / telefone-detail.html :
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.
teste de unidade / / controllersSpec.js :
1. ...
2. descrever ( 'PhoneDetailCtrl " , funo () {
3. var mbito , $ httpBackend , ctrl ;
4.
5. beforeEach ( injetar ( funo ( _ $ httpBackend_ , rootScope $ , $
routeParams , $ controller ) {
6. $ HttpBackend = _ $ httpBackend_ ;
7. $ HttpBackend . expectGET ( 'telefones / xyz.json' ). responder ({ nome
: 'telefone xyz' });
8.
9. $ RouteParams . phoneid = 'xyz' ;
10. escopo = rootScope $ . $ new ();
11. ctrl = $ controller ( PhoneDetailCtrl , { mbito $ : escopo });
-
12. }));
13.
14.
15. ele ( 'deve buscar detalhes telefone , funo () {
16. esperar ( escopo . telefone ). toBeUndefined ();
17. $ HttpBackend . lavar ();
18.
19. esperar ( escopo . telefone .) toEqual ({ nome : 'telefone xyz' });
20. });
21. });
22. ...
Agora voc deve ver a seguinte sada na guia Testacular:
Chrome 22,0: Executado 3 de 3 SUCESSO (0,039 s / 0,012 segundos)
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".
test/e2e/scenarios.js :
1. ...
2. descrever ( "vista de detalhe Telefone ' , funo () {
3.
4. beforeEach ( funo () {
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. ...
-
Agora voc pode executar novamente ./scripts/e2e-test.sh ou atualizar a aba
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
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.
Instrues Workspace Redefinir
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.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
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:
app / parciais / telefone-detail.html :
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.
Agora voc deve ver a seguinte sada na guia Testacular:
-
Chrome 22,0: Executado 4 de 4 SUCESSO (0,034 s / 0,012 segundos)
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.
Instrues Workspace Redefinir
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.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
Controlador
app / js / controllers.js :
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
app / parciais / telefone-detail.html :
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.
test/e2e/scenarios.js :
1. ...
2. descrever ( "vista de detalhe Telefone ' , funo () {
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 ();
13. esperar ( elemento ( 'img.phone' ). attr ( 'src' )). Tobe (
'img/phones/nexus-s.2.jpg' );
14.
15. elemento ( 'telefone polegares-li:. nth-child (1) img' ). clique ();
-
16. esperar ( elemento ( 'img.phone' ). attr ( 'src' )). Tobe (
'img/phones/nexus-s.0.jpg' );
17. });
18. });
19. });
Agora voc pode executar novamente ./scripts/e2e-test.sh ou atualizar a aba
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
Vamos adicionar um mtodo novo controlador para PhoneDetailCtrl :
$ Scope.hello = function (nome) {
alert ('Ol' + nome (| | 'mundo') + '!');
}
e adicione:
Ol boto
para o telefone details.html- modelo.
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.
Instrues Workspace Redefinir
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.
As mudanas mais importantes esto listados abaixo. Voc pode ver o diff
completo em GitHub :
-
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 ();
5. $ mbito . orderProp = "idade" ;
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.
teste de unidade / / controllersSpec.js :
1. descrever ( "controladores PhoneCat" , funo () {
2.
3. beforeEach ( funo () {
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.
15. descrever ( 'PhoneListCtrl " , funo () {
16. var mbito , ctrl , $ httpBackend ;
17.
18. beforeEach ( injetar ( funo ( _ $ httpBackend_ , $ rootScope ,
controlador $ ) {
-
19. $ HttpBackend = _ $ httpBackend_ ;
20. $ HttpBackend . expectGET ( 'telefones / phones.json' ).
21. responder ([{ nome : 'Nexus S' }, { nome : 'Motorola DROID' }]);
22.
23. escopo = rootScope $ . $ new ();
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 ([]);
30. $ HttpBackend . lavar ();
31.
32. esperar ( escopo . telefones ). toEqualData (
33. [{ nome : 'Nexus S' }, { nome : 'Motorola DROID' }]);
34. });
35.
36.
37. ele ( 'deve definir o valor padro de orderProp modelo " , funo () {
38. esperar ( escopo . orderProp ). Tobe ( "idade" );
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 ) {
54. $ HttpBackend = _ $ httpBackend_ ;
55. $ HttpBackend . expectGET ( 'telefones / xyz.json' ). responder (
xyzPhoneData ());
56.
57. $ RouteParams . phoneid = 'xyz' ;
58. escopo = rootScope $ . $ new ();
59. ctrl = $ controller ( PhoneDetailCtrl , { mbito $ : escopo });
60. }));
61.
62.
63. ele ( 'deve buscar detalhes telefone , funo () {
64. esperar ( escopo . telefone ). toEqualData ({});
65. $ HttpBackend . lavar ();
66.
67. esperar ( escopo . telefone .) toEqualData ( xyzPhoneData ());
68. });
69. });
70. });
Agora voc deve ver a seguinte sada na guia Testacular:
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]