AngularJS #14 - Single-Page Application com ngRoute - Rodrigo Branas

Olá sejam bem-vindos à continuação da série sobre angular JS meu nome é Rodrigo branas autor do livro angular JS Essentials lançado pela Editora P Pub e hoje no 14º Episódio da série nós vamos falar sobre single page applications utilizando NG hout pessoal vamos relembrar um conceito single page application é uma aplicação que realiza as suas transições dentro da mesma página por isso que ela se chama single page E aí ela carrega seus componentes de forma dinâmica utilizando Ajax né que é a reunião aí de muitas tecnologias como o JavaScript a interação né com aom objetos como XML http request para realização de requisições e viabilizar né que essa aplicação faça as suas transições dentro da mesma página tá bom eh a gente utiliza no nosso dia a dia Muitas aplicações single page agora uma das mais conhecidas Sem dúvida alguma é o Gmail então repara na próxima vez que você for usar o Gmail quando você for criar uma nova mensagem Navegar nos seus e-mails ou mesmo trocar de pastas que não acontece o recarregamento dessa página Tá bom toda a transição é dentro da mesma página tá bom qual é a grande vantagem então da single pages bom eh Sem dúvida alguma a maior vantagem é a usabilidade tá se você se lembrar no passado né tô falando aí de 2005 2006 quando o Ajax sai ainda não tava e eh totalmente popularizado né era muito normal que durante o preenchimento né de algum tipo de formulário como por exemplo eh a gente foi preenchendo nome né telefone quando preencheu o CP certo o sistema foi completar automaticamente o endereço né E aí para isso precisou recarregar a página já que isso foi eh resolvido em backend né E aí a manutenção desse estado teve que aconte ser no backend por meio né de um objeto de sessão então isso era muito comum e aí ao longo aí né desses últimos 10 anos veio evoluindo bastante então hoje mesmo em aplicações que não são single page e acontece um uso intenso né de Ajax para que a gente proporcione uma usabilidade melhor então a single page application seria né a utilização completa né de tecnologias como o Ajax para que é é 100% da página né Eh eh seja única né e não aconteçam recarregamento né durante as transições entre telas dos sistemas tá bom pessoal bom Eh claro que isso eh eh gera algumas preocupações ou seja algumas questões eh devem ser consideradas a primeira delas né que é muito comum a gente ouvir na comunidade Mas e se o usuário desligar o suporte JavaScript no navegador eh vai inviabilizar o uso da aplicação bom com certeza né agora a gente não consegue ir muito longe com e o suporte a JavaScript desabilitado Tá certo então é Esse aspecto aí é muito comum né E sempre é levantado quando a gente vai discutir qualquer assunto relacionado a single page application mas eh atualmente ninguém consegue fazer muita coisa na web certo sem JavaScript Tá bom vamos então pros pontos mais importantes e a performance vai ser melhor vai ser pior numa single page bom tudo depende da forma como foi implementado Tá certo pessoal em geral em geral existe um overhead Inicial né No momento que a gente vai carregar página já que a gente vai trabalhar bastante com JavaScript então muitas vezes a gente tem eh a necessidade de carregar upfront muitos scripts isso faz com que pode ser que o tempo de loading da página seja um pouquinho mais alto se comparado a outras né mais tradicionais tá certo mas aí após esse carregamento Inicial né as próximas transições são mais suaves já que a gente tá transmitindo mais e eh os dados né de acesso eh da nossa api só que claro a gente pode usar uma série de de bibliotecas ferramentas né para carregar esses componentes de forma assíncrona Então tudo depende da forma como foi implementado tá bom Outra coisa interessante é a indexação então é outro assunto sempre levantado é Poxa as p pgas vão continuar sendo indexadas pelo Google e pessoal nesse caso a gente vai ter que ter um pouquinho mais de trabalho usar de repente um headless browser como o Phantom JS para gerar algumas páginas estáticas para melhorar esse processo né de seo então é é dá para fazer mas dá um pouquinho mais de trabalho do que páginas mais tradicionais Tá certo outras questões também sempre levantadas é Poxa e os botões back forward né os favoritos Como é que fica isso tudo bom a gente vai trabalhar com NG rout né que é o módulo disponibilizado aí por padrão pelo angular JS E aí e fazendo a navegação por URL utilizando âncoras vamos ver juntos que é perfeitamente possível utilizar back forward ou mesmo os favoritos Tá mas também depende da implementação tem formas de implementar que a navegação ocorre toda internamente a URL não é afetada E aí o browser sofre um pouquinho mais né Para te proporcionar né uma navegação por meio e desse tipo de botão tá bom pessoal Beleza então vamos falar sobre o NG hout bom é esse módulo né que vem por padrão no angular JS né até a versão 1. 0 ele vinha embarcado né Assim como os outros módulos vinham dentro do de um único arquivo angular. js E aí né a partir da versão 1.

2 isso foi sendo separado porque existem outros módulos do mercado você é livre para usar né Qualquer módulo de roteamento que queira tá certo mas a gente vai mostrar o n RD por ser um dos mais usados né e é um dos que vem por padrão Aí com angular JS vai lembrar que a partir da versão 1. 4 tem um novo módulo sendo lançado Então vale a pena ficar antenado Mas vamos aprender todos os conceitos que envolvem a criação de single page application e roteamento de página tá bom pessoal Então a primeira coisa que a gente vai fazer é importar tá certo o arquivo angular h PJS Tá bom então Eh quando a gente baixa o Framework tá olha só naquele arquivo pon Zip vem uma série de outros módulos entre eles aqui ó angular. js tá então basta tá aqui então a gente tem a nossa aplicação de lista telefônica Tá certo e aí deixa eu abrir a aplicação aqui ó tá rodando Tá certo então basta que a gente venha aqui e faça scce Lib angular.

js naa versão de produção pode usar angularjs a gente vai falar bastante sobre GR uma nova série que vem por aí certo vai falar mais sobre minificação concatena ET então importei angs refres cerum certo e agora chega a hora da gente é ir pro nosso segundo passo tá que é a declaração da utilização do módulo NG hout no episódio passado a gente falou sobre a modularização da aplicação então a gente aprendeu né a criar módulos né NG hout é mais um desses módulos então eu vou ter que fazer o seguinte ó eu vou ter que e declarar n hout dentro do Array né de dependências da minha aplicação Então vamos lá a ó vou abrir então a gente já fez a organização né da estrutura toda de diretórios né colocamos cada componente no arquivo Então a gente tem o app. js né que se você se lembra É onde eu tô definindo esse módulo lista telefônica que aqui eu tenho que fazer ali ó declaração de NG h tá bom e Vale lembrar o seguinte pessoal Se eu fizer isso e não olha só importar angular h né Você sabe que o angler vai dizer Olha eu não consigo instanciar esse módulo né porque ele não tá disponível Tá bom então momento que ele se torna disponível né não acontece mais nenhum problema tá bom bom esse é o segundo passo e agora a gente vai ter que começar a configurar Tá certo as rotas da nossa aplicação Tá bom agora a a minha ideia é começar a separar certos templates tá E para isso eu vou começar a Definir rotas específicas para cada um deles então se a gente olhar aqui pra nossa aplicação Olha só no código dela dentro de body eu tenho todo ó todo um bloco de código que representa a minha lista de contatos né esse outro bloco representa a a parte em que eu e crio novos contatos Tá certo então eu vou pegar tudo isso aqui tá pessoal e repara que eu vou deixar Olha só esse include do footer tá bom e vou me ater a essa div aqui ó então cont CRL x CRL ntrl V Olha só vale lembrar que a gente vai levar também por enquanto tá bom o NG Controller tá beleza ó trouxe ele para cá tá certo e aí eu vou salvar basicamente né dentro da pasta View então contatos. HTML e aí se eu fizer um refresh dessa aplicação você vai ver que nada mais vai acontecer já que eu tô com o body Totalmente vazio né com exceção aqui do footer então o footer foi carregado mas eu não tenho mais como usar essa aplicação desse jeito tá bom pessoal então agora entra a ideia de começar a criar rotas específicas Tá certo para cada parte da minha aplicação tá bom e eu vou fazer isso por meio certo de uma configuração então a gente já falou sobre config quando a gente aprendeu a criar serviços tá bom E aí eu vou usar o h provider Tá certo para começar a definir essas rotas então basta ir né Eh agora eh é interessante a gente pensar em como estruturar isso tá então porque em JS eu tenho config e eu tenho a configuração do serial generator Tá certo então repara que a gente criou aquele nosso serviço chamado serial generator que é do tipo provider por isso eu consigo configurá-lo e ele tem um serial de tamanho C certo que é exatamente Olha só Ah não vou conseguir mostrar aqui agora mas é aquele código que aparece antes de cada nome tá bom então de forma similar à configuração de seral generator eu vou fazer a configuração também tá de hout Tá certo então ó basicamente eu vou criar um novo arquivo vou aqui ó injetar H provider Tá certo e vou começar a configurar Então vale apena separar esse um arquivo diferente dentro da pasta config né então vai ser o rout config p JS então uma vez que eu criei esse arquivo eu venho aqui e declaro tá bom Aqui ó H config ó PJS tá bom salvei tá eh faz um refresh para ver se deu algum erro repara só uma coisa pessoal se aqui em e na declaração né na criação do meu módulo eu não tivesse colocado NG rout Olha só salvar tá ele iria dizer o seguinte ó eu não consigo injetar H provider porque ele não tá disponível Tá certo então você vê aqui no momento em que eu declarei esse módulo eu consigo já injetar né How provider Ok chegou a hora de começar a configurar cada rota Então vamos lá bom vou usar H provider pwen E vou definir uma rota chamada barra contatos Tá bom então essa é a primeira parte que diz respeito ao pef né para onde eu vou então quando eu digitar barra contatos eu vou para algum lugar e este algum lugar é um objeto Tá certo chamado How Object que me permite configurar uma série de aspectos né importantes pro roteamento tá E aí o primeiro deles é o template URL a parte que nos interessa né Ó quem eu devo renderizar no momento em que eu fizer barra contatos tá bom pessoal então Ó que legal agora então chegou a hora da gente vir aqui né e dizer o seguinte ó lá H provider pen barra contatos então quando eu escrever barra contatos eu vou para algum lugar Este algum lugar ó é o seguinte template URL né vi bar contatos hml perfeito Então esse é o mínimo certo esse é o mínimo então Eh repara que eu ainda não mexi no meu Body né Se eu der um refresh aqui vai continuar né Sem acontecer nada tá bom então é necessário que a gente também mude um pouquinho nosso Body para que isso seja exibido bom então como eu defini barra contatos repar o seguinte ó eu tô aqui Navegando em index tá então vou definir a minha rota vou fazer hash barra contatos Tá certo momento eu fiz hash bar contatos ele tá tentando exibir aquele template contatos.

HTML mas não tem aonde mostrar né então por conta disso eu tenho que usar uma diretiva chamada NG viw para que eu renderize o template da Rota acessada E aí eu vou dizer ah onde é que vai ficar esse NG viw bom vai ficar aqui ó div NG viw beleza Né repara que eu posso trabalhar também com menu já tem o footer Então esse é o meu template principal tá certo então no momento que a gente fez isso tá ó reparou que ele fez uma requisição para contatos HTML e renderizo aqui nesse local Tá certo pessoal então eu sigo com a minha aplicação funcionando tá bom eh uma coisa interessante também eh que que merece ser falada é o seguinte eu posso configurar também o meu contrôler tá no e é é na configuração do objeto de roteamento Tá certo então isso é É uma opção tá nada impede que você deixe n Controller aqui também Mas fica mais interessante se a gente concentrar Olha só tirei o Controller daqui se eu nesse momento fizer refresh né Eu não tenho mais o controle disponível logo não carrego o serviço não renderizo o dado não faço nada tá certo e aí ao fazer então Controller direto aqui na configuração da Rota olha só controler né lista telefônica Controller então eu vou unir os dois o template ao Controller Tá certo ó lá fiz um refresh E aí eu centralize essas duas informações na configuração do rote de páginas Tá bom então vamos pensar um pouquinho além agora né Vamos começar agora a obter mais vantagens do mecanismo de roteamento é eu vou separar tá pessoal eu vou separar o seguinte vou pegar toda a parte aqui ó de criação de contato vou tirar daqui tá certo ó salvei fazer um refresh Zinho ó vê que não tem mais aqui tá e eu vou criar ó um novo template Tá certo vou chamar esse template tá de novoc contato. html Tá certo então salvei o novo contato HTML e aí como é que eu faço agora para sair de contatos e ir para Novo contato bom já vimos simples né então eu vou criar uma nova rota tá bom Ó h provider p lá Barra no contato o meu objeto de roteamento o meu template URL é vi barov contato. HTML e por enquanto tá pessoal por enquanto eu vou separar Tá mas por enquanto eu vou usar o mesmo contrer Tá certo então tenho já duas rotas Tá bom já separei os dois arquivos Tá certo teve aqui index continua só com NG viw e agora contatos ou novo contato reparou que agora obviamente o layout ficou um pouquinho diferente né porque eu tô fora né daquele contêiner que eu tinha do outro lado mas ó eu consigo fazer ó lá a transição entre as páginas Tá certo vamos ajustar um pouquinho isso agora para fazer mais sentido tá então eu vou pegar a mesma classe que eu tinha fora tá E aí vou fazer mais uma coisinha olha só é o seguinte tá vou fazer mais uma coisa e vou criar um botão aqui opa Na verdade eu vou criar um link tá E aí já vale a pena a gente falar de como é que eu naveg né chamado novo contato tá E aí aqui no e eh no meu link eu vou definir hash bar Novo Contato Tá certo e aí quando eu fizer o refresh olha só deixa eu só colocar um Class btn aqui ó btn btn primary btn block para seguir o padrão que a gente tá usando no Bootstrap ó reparou que tem lá novo contato então cliquei em novo contato você vê ele transicion para essa tela aqui com o mesmo footer reparou e agora nada impede que eu venha aqui né e digite ó lá Rodrigo branas o telefone a data a operadora ó vou até ampliar aqui um pouquinho o console ah adicionar contato reparou que ele chamou o post e recarregou o get mesmo eu não tendo né necessidade de exibir né porque na outra página que eu tenho Olha só né a exibição da lista de contatos Então vamos fazer agora essa navegação fazer mais sentido Tá certo para isso eu vou separar também o Controller Tá então vamos abrir aqui o Controller Olha só eu tenho lá JS controllers lista telefônica Controller né reparou que agora não tô usando tudo em todos os lugares então ó eu vou criar em vez de lista telefônica Controller eu vou chamar de novo contato controler né Ó lá novo contato Controller PJS Tá certo e aqui eu só vou deixar aquilo que é necessário tá para adicionar novos contatos tá bom pessoal então vou vir aqui no meu H config vou dizer que é o novo contato Controller Tá certo tenho que importar também no meu index Tá bom então vamos colocar mais um Controller Aqui ó Novo Contato Controller perfeito vamos testar né importante também ó fiz um refresh novo contato você vê que ele entrou aqui e olha que coisa interessante ó deixa eu limpar novamente quando eu clico em novo contato ele tá chamando contatos e operadoras porque aqui nesse Controller eu tenho ó carregar contatos carregar operadoras repara que isso aqui não é mais necessário né já que eu não tô renderizando nenhum nenhuma dessas partes né Apagar contato necessário não e se contato selecionado é necessário não ordenar também não carregar também não tá certo só adicionar contato tá que serviço eu tô usando bom tô usando aqui ó contato api operador api eu não tô usando mais serial generator eu sigo usando Tá certo app Lista Telefônica não uso mais tá bom Ó lá show carreguei né Maria da Silva vamos testar ó operadora não tá mais aqui então Ó tirei coisa demais né Ó lá volta Cadê operadoras api né vi como Às vezes a gente tira coisa demais né volta para cá ó carregar operadoras né falha Nossa aqui ó chama carregar operadoras senão não vai funcionar né volto para cá ó lá agora sim Maria da Silva reparou que ele falou ó carregar contatos not defined porque Sobrou um carregar contatos aqui mas eu não vou carregar contato nenhum nesse local que que eu tenho que fazer eu tenho que voltar pra lista de contatos Então pessoal eu vou usar um objeto chamado location PPF Olha só ao Salvar contato né eu vou voltar para location PPF bar contatos né porque lá ele vai realmente carregar esses contatos Tá certo então olha só voltou para cá né Ana Nascimento ó lá data operadora vamos limpar aqui ó location not defined vamos importar location ó lá beleza agora eu navego de volta perfeito então reparou que eu criei um fluxo de navegação né eu venho novo contato né olha só Joaquim Oliveira 10 9999 10 10 data 0101 2001 Embratel ó lá adicionar contato navegou de volta para cá gerou o serial tudo perfeito legal então assim eu gerei esse fluxo de navegação né E para isso eu utilizei o objeto location né Ó lá a operação pef me permitiu voltar aos contatos que estão aqui tá bom pessoal coisa importante também ó se eu errar por qualquer motivo essa rota você ah login Ó lá ele não achou a rota el Ele simplesmente não mostrou nada tá bom então É bem interessante também definir Olha só o Order Wise ou seja se eu não encontrar nenhuma rota Tá certo eu posso fazer um redirect to ó lá qual é a rota principal Ah é barra contatos então caso né nenhuma dessas rotas aqui tenha e eh batido com a Rota digitada ele volta paraa barra contatos bem interessante fazer isso tá reparou ó lá teste voltou para contatos login voltou para contat contatos dois voltou para contatos tá bom novo contato aí foi para novo contato Tranquilo então tá bom pessoal outra coisa interessante também tá Vou recarregar a página toda tá quando eu vou para novo contato reparou que ele carregou dinamicamente novo contato.

HTML Tá certo quando eu volto Se eu tentar navegar de novo para novo contato reparou que não carregou mais por causa do template Cash a gente falou um pouco sobre template cash no Episódio Passado sobre modularização Tá certo então uma vez carregado né configuração padrão é armazenar essa página e com isso a gente ganha performance tá operadora está sempre sendo recarregado porque ele tá definido aqui né em novo contato Controller para ser né carregado tá a gente falou bastante tempo né em episódios anteriores que eh teremos uma solução muitas vezes melhor para casos como esse ó carregar operadoras né Eu simplesmente venho aqui defino carregar operadora né aqui a mesma coisa olha só carregar operadora carregar operadora eu posso fazer isso também pelo mecanismo de roteamento tá pessoal então Eh o NG hout dá suporte uma configuração chamada resolve para que a gente resolva dependências que sejam e porventura necessárias né para que a gente acesse uma determinada funcionalidade Então nada impede que eu faça assim ó resolve Olha só para entrar na tela de contato eu tenho que carregar os contatos Então tá lá ó contato api né return Contatos api. get contatos ou operadoras né return operadoras api. get operadoras Então essa é a condição de entrada certo em com stus Tá bom eu só entro na página no momento que essas duas promessas aí né forem bem sucedidas Então vamos acompanhar isso aqui juntos Tá certo então vamos fazer agora um pouquinho diferente tá pessoal e ao invés de carregar aqui diretamente ó então eu vou tirar eu vou até tirar aqui ó né carregar contatos né carregar operadoras ó vou dar um refresh não carregou mais as operadoras Tá certo e agora eu venho pro meu roteamento né e faço o seguinte ó resolve certo resolva operadoras eu tenho que botar um nome para que eu possa pegar depois dentro do controle então operadoras tá certo é uma função tá que vai utilizar né operadoras api Tá certo e vai me retornar reparou que quando eu entrei agora ele já não carregou mais operadoras né então ele vai retornar operadoras a api.

get operadoras Tá certo Então vale a pena a gente vir aqui agora em novo contato né e vê que é exatamente isso que eu tô fazendo aqui nesse ponto então eu não preciso mais nem da operadoras api nem do método que tá carregando tá certo aqui também não tô usando Ok então vamos testar agora ó mudei o meu roteamento mandei ele resolver né as operadoras tá vou dar um refresh reparou que asas operadoras foram carregadas Agora falta eu linkcar isso no meu scope tá pessoal momento que eu defino operadoras aqui eu tenho disponível pra injeção ol Olha que fácil tá operadoras então este nome que tá aqui bate com o que eu defini aqui no resolve tá certo mas não é só isso tá se eu mostrar para você ó console pon log operadoras você vai ver que tem mais um detalhe importante tá olha só ele diz o seguinte ó Object status 200 né E aí dentro de data é que eu tenho o retorno tá certo então Eh esse é um objeto né de transporte Então eu tenho mais informações ali disponíveis como a requisição que foi feit o status né o texto Então eu preciso fazer o seguinte agora ó ponto data tá certo aí você vai ver que já vai eh ser exibido né aquele a rede operadoras e agora eu tenho que linkar isso no meu scopo então ó scope. on operadoras é igual a operadoras pdata perfeito Olha só simples né então agora ó estou aqui navegando né momento em que eu clico aqui já tá implícita a necessidade de carregar operadoras porque eu defini no meu resolve né E aí basta eu fazer também o mesmo processo certo aqui pros contatos né então mes uma coisa ó resolve né Posso até copiar e colar ó operadoras ó tá lá mesmo processo né então e aqui em lista telefônica repara que eu tô carregando as operadoras né então eu posso tirar esse carregar operadoras daqui né posso tirar carregar operadoras daqui também trocar por operadoras né E aí aqui dizer o seguinte ó operadoras pdata né e os contatos bom mesma coisa então vou também fazer os contatos Olha só então Contatos contatos api Contatos api. get contatos né então agora eu tenho os dois sendo invocados não preciso mais também do contatos api Tá certo Deixa eu tirar ele daqui também ó só contatos Tá certo bom agora aqui tem um fator que a gente a gente tem que se atentar né Você tá vendo que eu tô fazendo generate aqui né Desse serial aqui dentro então pode ser que a gente tenha que fazer um método diferente né então ó contatos pon datata e agora esse carregar contatos né vai ser um pouquinho né diferente agora Ele só tá gerando os o o serial né então Ó eu posso mudar isso aqui de repente para e eh generate serial eu já tenho os contatos carregados Tá certo então muda um pouquinho essa essa essa abordagem que a gente tá seguindo aqui tá certo ó contatos Ó lá eu não preciso mais nem disso aqui nem disso aqui nem disso aqui contatos pon for it Tá certo então ó mudei um pouquinho a abordagem tá E aqui só vai virar então generate serial passando né o scopo pon contatos ou contatos ponto data fica né ao nosso critério estruturar essa aplicação da melhor forma possível Tá bom então contatos operadoras Vamos fazer um refresh aqui ó reparou que eu posso Navegar sem nada ó segue gerando tudo tá certo ó então continuou carregando tanto os contatos quanto as operadoras diretamente por meio dos resolves tá bom pessoal simples né Beleza então para finalizar Vamos colocar mais uma questãozinha interessante né que é o seguinte eu tenho como navegar também olha só aqui em contatos eu posso fazer contatos barra1 para pegar os detalhes Tá certo os detalhes eh por exemplo de um contato específico Tá certo então eu vou né criar mais uma rota Olha só vamos fazer junto agora hein vou tirar aqui se resolve Por enquanto só tá né então aqui eu vou colocar né o detalhes do contato tá certo e aí aqui eu vou colocar detalhes contato e aqui detalhes contato Controller Tá certo então é mais uma rota que eu tenho disponível para isso né eu vou ter que criar esses detalhes Controller Então vou espelhar aqui né Desse que eu já tenho ó vou salvar aqui isso em detalhes contato controller.

js foi esse o nome que eu dei detalhes contato detalhes contato Controller perfeito detalhes contato Controller Ok então aqui eu não preciso a princípio né A princípio eu não preciso de muita coisa ó beleza então então esses detalhes Controller vão servir para mostrar né detalhes aqui ó Então eu tenho o nome e vou colocar HF igual Olha só vou até tirar esse elipses daqui ó e vou fazer o seguinte ó contato. ID Tá certo beleza então repara Só faltou uma coisa né hash bar detalhes contato bar1 Olha lá 1 2 Três beleza pessoal então a ideia Agora é eu obter detalhes desses contatos certo e mostrar numa tela separada isso vai me proporcionar a passagem de parâmetro para isso Ó Barra do pid Tá certo então isso aqui vai fazer com que eu tenha acesso a esse parâmetro Tá certo e aí como é que eu faço para recuperar esse parâmetro do outro lado bom então aqui vai ser interessante a gente ver o seguinte Tá eu vou fazer o ó console. log eu quero ver Qual parâmetro chegou aqui então eu vou fazer o seguinte ó H PMs certo H parens pid perfeito Então tá bom vamos também obviamente criar né Ó lá envio detalhes contato.

HTML né e aqui eu vou até né mostrar o contato depois como um todo pra gente ver Tá certo ok então vamos lá refresh cliquei em Bruno né Deixa eu Navegar para cá ó detalhes contato barra1 tem que salvar aqui também senão não vai funcionar ó repar o seguinte ó detalhes contatos nora function vamos ver o que que aconteceu faltou importar vamos lá detalhes contato contro Então sempre que eu crio um novo contrôler eu tenho que importar esse contrôler reparou que aqui apareceu um já também ó lá se eu colocar dois aqui ó o h params eu pego Dois Eu pego também o três e assim por diante tá pessoal então agora pras coisas todas se conectarem para tudo ficar ligado né basta eu obviamente também aqui em detalhes Controller chamar né aquele aquele serviço então eu vou abrir aqui ó lembra que a gente separou isso né na api Cadê serviço contato api service Tá certo então agora eu tenho que fazer o get contato ó lá get contato tem um identificador aqui tá certo eu vou fazer mais identificador E aí eu vou fazer então ó get contato get contato tá certo uma vez né que a gente faça isso eu tenho que importar depois eu vou passar isso pro res porque tem mais um detalhezinho importante ó contatos api Tá certo e aqui eu vou fazer contatos api pget contatos passando h params. id v fazer só isso Por enquanto né vamos ver se a coisa já tá começando a conectar né lá quase tá V ó lá começou a trazer o dado corretamente hein Estamos quase lá ó beleza agora vamos fazer então ponto success function contato e agora scope contato igual contato vamos tirar isso aquii Ó lá bom estamos quase lá agora a gente viu que bom não é necessário né fazer dessa forma eu posso fazer então aqui ó o contato né Ó lá contato ponto data desde que eu passe isso aqui também no meu roteamento para isso pessoal vou fazer o meu resolve Tá certo só que tem mais um detalhezinho nesse resolve tá vamos lá vamos junto então aqui a gente tem ó resolve contato né não mais contatos e aí além de contatos api eu tenho que pegar essa rota Tá certo sabe por quê nessa rota eu tenho o seguinte Olha só nessa rota deixa eu fechar aqui algumas telas ó eu tenho o h p current Ou seja a rota em que eu estou ponto parâmetros né E aqui eu tenho o identificador tá até deixei separado aqui pra gente usar né então vamos ó lá recuperar da seguinte forma ó ao entrar na tela de detalhes de contato passando o ID a forma que eu tenho para acessar o ID é usando o objeto né de roteamento H né current PMs ID E aí eu consigo pegar esse contato que eu quero tá certo então mais uma configuração necessária tá com isso eu vou ter o contato disponível aqui e aí eu consigo linkar isso na tela né exibindo esse contato corretamente então vamos lá né que agora começou a ficar mais complicado ó Missing a property aqui ó How config faltou fechar né cadê você resolve abri e fechei faltou fechar aqui também ó beleza Ainda bem que o angular nos mostra isso né então vamos fazer agora tudo funcionar como tem que ser né ó volta pra tela inicial Bruno da Silva volta pra Inicial ó lá Sandra Maria volta pra tela inicial Carlos Machado Então pessoal o resto aqui é layout né basta que a gente aqui também faça né ó crie alguns Campos né então aqui a gente pode colocar esses campos todos aqui numa table olha só só pra gente exibir né então e repara só eu vou exibir então contato.