Até agora, usamos três conjuntos de dados de registros móveis com código codificado. Agora, usamos o AngularJS um serviço interno $ http para obter um conjunto maior de dados de registros móveis. Usaremos a função de injeção de dependência do AngularJS (DI) para fornecer esse serviço AngularJS ao controlador PhoneListctrl.
Reinicie o diretório de trabalho:
checkout git -f etapa 5
Atualize o navegador e agora você deve ver uma lista de 20 telefones.
As diferenças mais importantes entre a Etapa 4 e a Etapa 5 estão listadas abaixo. Você pode ver a completa diferença no Github.
dados
O arquivo app/telefones/telefones.json em seu projeto é um conjunto de dados que armazena uma lista maior de telefones no formato JSON.
Aqui está um exemplo deste arquivo:
[{"Age": 13, "ID": "Motorola-Defy-With-Motoblur", "Name": "Motorola Defy/U2122 com Motoblur/U2122", "Snippet": "Você está pronto para tudo que a vida joga seu caminho?" ...}, ...]Controlador
Usamos o serviço AngularJS $ HTTP no controlador para iniciar uma solicitação HTTP ao seu servidor da Web para obter dados do arquivo app/telefones/telefones.json. $ http é apenas um dos muitos serviços internos no AngularJs que podem lidar com operações comuns de alguns aplicativos da Web. O AngularJS pode injetar esses serviços em qualquer lugar que você precisar deles.
Os serviços são gerenciados através do subsistema DI injeção de dependência do AngularJS. Os serviços de injeção de dependência podem tornar seus aplicativos da Web bem construídos (como separar os componentes da camada de apresentação, dados e controle) e acoplados vagamente (um componente não precisa resolver os problemas de dependência entre os componentes, todos são tratados pelo subsistema DI).
app/js/controllers.js
função phoneListctrl ($ scope, $ http) {$ http.get ('telefones/telefones.json'). sucess (function (data) {$ scope.phones = dados;}); $ scope.OrderProp = 'Age';}$ http inicia uma solicitação HTTP GET no servidor da web e solicita telefone/telefone.json (observe que o URL é relativo ao nosso arquivo index.html). O servidor responde com dados do arquivo JSON. (Essa resposta pode ser gerada dinamicamente a partir do servidor de back -end em tempo real. Mas para os navegadores, todos eles parecem iguais. Por simplicidade, simplesmente usamos um arquivo JSON no tutorial.)
O serviço $ http usa o sucesso para retornar [resposta do objeto] [ng. $ Q]. Quando a resposta assíncrona chega, essa função de resposta a objetos é usada para processar os dados de resposta do servidor e atribuir os dados ao modelo de dados de telefones escopos. Percebi que o AngularJS detectará automaticamente essa resposta JSON e foram analisados para nós!
Para usar os serviços do AngularJS, você só precisa declarar o nome do serviço necessário como um parâmetro no construtor do controlador, como este:
função phoneListctrl ($ scope, $ http) {...}
Quando o controlador é construído, o injetor de dependência do AngularJS injeta esses serviços no seu controlador. Obviamente, o injetor de dependência também lidará com quaisquer dependências transitivas que o serviço necessário possa existir (um serviço geralmente dependerá de outros serviços).
Observe que os nomes dos parâmetros são muito importantes porque os injetores os usarão para encontrar dependências correspondentes.
'$' hábito de nomeação de prefixo
Você pode criar seu próprio serviço, e nós o aprenderemos na Etapa 11. Como um hábito de nomenclatura, os serviços internos do AngularJs, os métodos escoposos e algumas outras APIs do AngularJs usam um prefixo '$' antes do nome. Não use o prefixo '$' para nomear seus próprios serviços e modelos, caso contrário, os conflitos de nome poderão ocorrer.
Sobre a compressão JS
Como o AngularJS infere o nome do serviço de dependência através do nome do parâmetro do construtor do controlador. Portanto, se você deseja comprimir o código JS do controlador PhoneListctrl, todos os seus parâmetros serão compactados ao mesmo tempo. No momento, o sistema de injeção de dependência não identificará corretamente o serviço.
Para superar o problema causado pela compactação, basta atribuir uma matriz dependente de identificadores de serviço à propriedade $ injet na função do controlador, assim como a última linha comentou:
PhoneListctrl. $ Inject = ['$ scope', '$ http'];
Outro método também pode ser usado para especificar uma lista de dependência e evitar problemas de compressão - use JavaScript Array para construir o controlador: coloque o serviço para ser injetado em uma matriz de cordas (representando o nome da dependência), e o último elemento da matriz é a função do método do controlador:
var phoneListctrl = ['$ scope', '$ http', função ($ scope, $ http) { / * construtor corpo * /}];
Ambos os métodos mencionados acima podem funcionar perfeitamente com qualquer função que o AngularJS possa injetar. Qual método escolher depende inteiramente do estilo de programação do seu projeto. Recomenda -se usar o método da matriz.
teste
teste/unidade/controllerspec.js:
Como agora estamos usando a injeção de dependência e nosso controlador também contém muitos serviços de dependência, é um pouco complicado construir testes para nossos controladores. Precisamos usar novas operações e fornecer algumas implementações de pseudo para o construtor, incluindo $ http. No entanto, o método recomendado (e ainda mais simples) é criar um controlador em um ambiente de teste, usando o mesmo método que o AngularJS no cenário a seguir:
Descreva ('Phonecat Controllers', function () {descreve ('PhoneListctrl', function () {var SCOPE, CTRL, $ HTTPBACKEND; Antes do EECH (Inject (function (_ $ httpbackend_, $ RootScope, $ controller) {$ httpbackend = _ $ HTT) Httpbackend.expectget ('telefones/telefones.json').Nota: Como carregamos jasmim e mock.js no ambiente de teste, temos dois métodos auxiliares, módulo e injeção, para nos ajudar a obter e configurar o injetor.
Usando o método a seguir, criamos um controlador no ambiente de teste:
Utilizamos o método de injeção para injetar instâncias de serviço $ RootsCope, $ controlador e $ httpbackend na função de Jasmine antes e cada vez. Essas instâncias são todas de um injetor, mas esse injetor é recriado dentro de cada teste. Isso garante que todo teste comece a partir de um ponto de partida bem conhecido e que cada teste seja independente de outros testes.
Ligue para $ Rootscope. $ New () para criar um novo escopo para o nosso controlador.
A função PhoneListctrl e o escopo recém -criados são passados como parâmetros para a função de controlador $ injetado.
Como nosso código atual usa o serviço $ http para obter os dados da lista telefônica no controlador antes de criar o subscópio PhoneListctrl, precisamos dizer ao conjunto de testes para aguardar uma solicitação do controlador. Podemos fazer isso:
Injete o serviço de solicitação $ httpbackend em nossa função antes -cada. Esta é uma pseudo-versão deste serviço, isso ajuda a lidar com todas as solicitações XHR e JSONP no ambiente do produto. A pseudo -versão do serviço permite escrever testes sem considerar as APIs nativas e os estados globais - qualquer um pode constituir um pesadelo para testes.
Use o método $ httpbackend.expectget para informar ao serviço $ httpbackend para aguardar uma solicitação HTTP e dizer como responder a ele. Observe que a resposta não será emitida até ligarmos para o método $ httpbackend.flush.
Agora,
ele ('deve criar um modelo "telefones" com 2 telefones buscados em xhr', function () {expect (scope.phones) .tobeundefined (); $ httpbackend.flush (); espera (scope.phones) .toequal ([{name: 'nexus s'}, {'Motorola DRORDROLA';No navegador, chamamos $ httpbackend.flush () para limpar a fila de solicitação (FLUC). Isso permitirá que a promessa devolvida pelo Serviço $ HTTP (veja aqui o que é a promessa) a ser interpretado como uma resposta padrão.
Configuramos algumas afirmações para verificar se o modelo de dados do telefone celular já está no escopo.
Por fim, verificamos que o valor padrão do OrderProp está definido corretamente:
ele ('deve definir o valor padrão do modelo OrderProp', function () {espera (scope.orderprop) .tobe ('idade');});prática
Adicione um {{telefones | json}} ligação no final do index.html e observe a lista de telefones celulares no formato JSON.
No controlador PhoneListctrl, pré -processo a resposta HTTP para que apenas os cinco primeiros da lista de telefone sejam exibidos. Use o código a seguir na função de retorno de chamada $ http:
$ scope.phones = data.splice (0, 5);
Resumir
Agora você deve sentir como é fácil usar os serviços AngularJS (tudo isso é graças ao mecanismo de injeção de dependência dos serviços angulares), vá para a etapa 6 e você adicionará miniaturas e links ao seu telefone.
Obrigado pelo seu apoio a este site e continue a atualizar artigos relacionados no futuro!