Nesta etapa, você aprenderá como criar um modelo de layout e criar um aplicativo com várias visualizações através da função de roteamento.
Reinicie o diretório de trabalho:
checkout git -f Etapa 7
Observe que agora, quando você for para app/index.html, você será redirecionado para app/index.html#/telefones e a mesma lista de telefones é exibida no navegador. Quando você clica em um link móvel, uma lista de detalhes do celular também é exibida.
As diferenças mais importantes entre a Etapa 6 e a Etapa 7 estão listadas abaixo. Você pode ver a completa diferença no Github.
Modelos de várias visualizações, roteamento e layout
Nossas aplicações estão se desenvolvendo lentamente e se tornando mais complexas. Antes da etapa 7, o aplicativo fornece apenas aos nossos usuários uma interface simples (uma lista de todos os telefones) e todos os códigos de modelo estão localizados no arquivo index.html. A próxima etapa é adicionar uma página que exibe os detalhes de cada telefone em nossa lista.
Para adicionar a visualização de detalhes, podemos expandir o index.html para incluir o código do modelo para ambas as visualizações ao mesmo tempo, mas isso nos causará um grande problema. Em vez disso, precisamos converter o modelo index.html em um "modelo de layout". Este é um modelo comum para aplicarmos todas as visualizações. Outros "modelos de layout local" são preenchidos de acordo com o "roteamento" atual, formando uma visualização completa para exibir para o usuário.
A rota aplicada no AngularJS é declarada através do $ RouteProvider, que é o provedor do Serviço de Rota $. Este serviço permite fácil integração de controladores, modelos de visualização e URL do navegador atual. Ao aplicar esse recurso, podemos implementar links profundos, o que nos permite usar o histórico do navegador (backback ou navegação para a frente) e marcadores.
Sobre injeção de dependência (DI), injetores e provedores de serviços
Como você aprendeu com o anterior, a injeção de dependência é uma característica central do AngularJS, então você precisa saber um pouco sobre como esse cara funciona.
Quando as botas do aplicativo, o AngularJS criará um injetor, que será necessário para todos os serviços que são injetados após o nosso aplicativo. Esse injetor em si não sabe o que $ HTTP e $ Route fazem. De fato, a menos que seja configurado durante a definição do módulo, ele não conhece a existência desses serviços. A única responsabilidade do injetor é carregar os módulos de serviço especificados, registrar todos os provedores de serviço definidos nesses módulos e injetar dependências (serviços) em uma função especificada quando necessário. Essas dependências são instanciadas pelo seu provedor "preguiçoso" (carregado, se necessário).
Um provedor é um objeto que fornece (cria) uma instância de serviço e fornece uma interface de API externamente. Pode ser usado para controlar o comportamento de criação e tempo de execução de um serviço. Para o serviço de $ Route, o $ RouteProvider fornece uma interface de API para o mundo exterior, permitindo definir regras de roteamento para sua aplicação por meio da interface da API.
O módulo AngularJS resolve os dois problemas de remoção do estado global da aplicação e fornecendo métodos para configurar o injetor. Ao contrário da AMD ou requer.js (duas bibliotecas que não são angulares), o módulo AngularJS não tenta resolver o problema da ordem de carregamento do script e da carga de script preguiçosa. Esses objetivos não têm nada a ver com os problemas que o AngularJS precisa resolver, para que esses módulos possam coexistir para atingir seus respectivos objetivos.
Módulo de aplicativo
app/js/app.js
Angular.Module ('Phonecat', []). Config (['$ RouteProvider', function ($ RouteProvider) {$ RouteProvider. Telefone para telefone para o telefone}).Para configurar o roteamento para o nosso aplicativo, precisamos criar um módulo para o aplicativo. Chamamos esse módulo PhoneCat e, usando o ConfigApi, solicitamos que o $ RouteProvider seja injetado em nossa função de configuração e usamos $ RouteProvider.Whenapi para definir nossas regras de roteamento.
Observe que, durante a fase de configuração do injetor, o provedor também pode ser injetado ao mesmo tempo, mas uma vez que o injetor for criado e a instância do serviço for iniciada, eles não serão mais recuperados pelo mundo exterior.
Nossas regras de roteamento são definidas da seguinte maneira
Quando o segmento de mapa da URL for /telefones, a visualização da lista de telefones celulares será exibida. Para construir essa visualização, o AngularJS usa o modelo telefônico.html e o controlador PhoneListctrl.
Quando o segmento de mapa da URL é /telefone /: PhoneID, a exibição de detalhes do telefone é exibida. Aqui: PhoneID é a parte variável do URL. Para construir uma visualização detalhada do telefone, o AngularJS usa o modelo Phone-Detail.html e o controlador de correção por telefone.
Reutilizamos o controlador PhoneListctrl que criamos antes e, ao mesmo tempo, adicionamos um novo controlador de correção por telefone à visualização detalhada do telefone e o armazenamos no arquivo app/js/controllers.js.
A declaração $ route.otherwise ({RedirectTo: ' /telefones'}) faz com que o redirecionamento /telefone seja acionado quando o endereço do navegador não pode corresponder a nenhuma de nossas regras de roteamento.
Observe que na segunda declaração da rota: o uso do parâmetro PhoneID. O Serviço de Rota $ usa a declaração de roteamento /telefones /: PhoneID como um modelo que corresponde ao URL atual. Todas as variáveis declaradas com o: símbolo (aqui a variável são telefones) serão extraídas e armazenadas no objeto $ routeparams.
Para que nosso aplicativo oriesse nosso módulo recém -criado, também precisamos especificar o nome do módulo sobre o valor da diretiva NGAPP:
app/index.html
<! doctype html> <html lang = "en" ng-app = "phonecat"> ...
Controlador
app/js/controllers.js
... function TesephoneTailCtrl ($ SCOPE, $ ROUTEPARAMS) {$ scope.phoneId = $ routeParams.phoneId;} // Tese telefone.modelo
O serviço de rota $ geralmente é usado com a diretiva NGVIEW. O papel da diretiva NGVIEW é carregar o modelo de exibição correspondente no modelo de layout para a rota atual.
app/index.html
<html lang = "en" ng-app = "phonecat"> <head> ... <script src = "lib/angular/angular.js"> </sCript> <script src = "js/app.js"> </script> <script src = "js/controllers.js">> ng-view> </div> </body> </html>
Observe que removemos a maior parte do código no modelo Index.html e colocamos apenas um contêiner <div>, que possui o atributo NG-View. O código que excluímos agora está colocado no modelo de telefone list.html:
App/parcials/telefone-list.html
<div> <div> <div> <!-Conteúdo da barra lateral-> Pesquise: <inspira ng-model = "query"> classificar por: <select ng-model = "orderprop"> <opção value = "name"> alfabético </option> <! filtro: consulta |. <p> {{Phone.snippet}} </p> </li> </ul> </div> </div> </div>Ao mesmo tempo, adicionamos um modelo de espaço reservado à exibição de detalhes do telefone celular.
App/parcials/telefone-detail.html
TBD: Visualização de detalhes para {{PhoneId}}
Observe que nosso modelo de layout não adicionou as propriedades do controlador PhoneListctrl ou Telefones.
teste
Para verificar automaticamente se tudo está bem integrado, precisamos escrever alguns testes de ponta a ponta, navegar para URLs diferentes e verificar se a visualização correta é renderizada.
... ele ('deve redirecionar index.html para index.html#/telefones', function () {navegador (). Navigateto ('../../ app/index.html'); espera (browser (). Location (). Url (). Navegue ().Agora você pode atualizar seu navegador e executar o teste de ponta a ponta novamente, ou pode executá-lo no servidor AngularJS.
prática
Tente adicionar uma ligação {{OrderProp}} ao index.html e nada muda quando você está na visualização da lista do seu telefone. Isso ocorre porque o modelo OrderProp é visível apenas sob o escopo do gerenciamento do PhoneListctrl, que está relacionado ao elemento <Div Ng-View>. Se você adicionar a mesma encadernação ao modelo de telefone. Html, a ligação será renderizada como você imaginou.
Resumir
Depois de configurar a rota e implementar a visualização da lista de telefones celulares, já podemos prosseguir para a etapa 8 para implementar a visualização de detalhes do telefone celular.
O exposto acima é resolver as informações de roteamento do AngularJS e várias visualizações, e continuaremos a adicionar conhecimento relevante no futuro. Obrigado pelo seu apoio a este site!