O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

AngularJS - Rotas

823 visualizações

Publicada em

Descrição do uso das rotas no framework AngularJS da Google. Exemplos como tutorial. Códigos fontes e telas de demonstração.

Publicada em: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

AngularJS - Rotas

  1. 1. Eduardo Mendes de Oliveira edumendes@gmail.com
  2. 2. Eduardo Mendes (edumendes@gmail.com) Routes 2
  3. 3. Eduardo Mendes (edumendes@gmail.com)3 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css application.css images
  4. 4. Eduardo Mendes (edumendes@gmail.com)4 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css application.css images javascript app.js controllers.js filters.js services.js directives.js templates Imobiliária imoveis-index.html usuarios-index.html css application.css images javascript app.js templates controllers filters services directives
  5. 5. Eduardo Mendes (edumendes@gmail.com)5 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html javascript app.js controllers filters services directives templates imoveis-create-controller.js imoveis-edit-controller.js imoveis-index-controller.js imoveis-show-controller.js
  6. 6. Eduardo Mendes (edumendes@gmail.com)6 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css javascript templates Ambos arquivos possuem partes iguais diferindo apenas no conteúdo principal
  7. 7. Eduardo Mendes (edumendes@gmail.com)7 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css javascript templates Manteremos o que se repete em um arquivo principal e criaremos dois novos arquivos com o que não se repete
  8. 8. Eduardo Mendes (edumendes@gmail.com)8 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css javascript templates Manteremos o que se repete em um arquivo principal e criaremos dois novos arquivos com o que não se repete
  9. 9. Eduardo Mendes (edumendes@gmail.com)9 Estrutura do projeto Imobiliária index.html css javascript templates pages imoveis imoveis-index.html usuarios usuarios-index.html Manteremos o que se repete em um arquivo principal e criaremos dois novos arquivos com o que não se repete
  10. 10. Eduardo Mendes (edumendes@gmail.com)10 Estrutura do projeto Imobiliária index.html css javascript templates pages imoveis index.html usuarios index.html Manteremos o que se repete em um arquivo principal e criaremos dois novos arquivos com o que não se repete
  11. 11. Eduardo Mendes (edumendes@gmail.com)11 Adicionar um Módulo AngularJS <!DOCTYPE html> <html lang=“pt-br" > <head>…</head> <body>…</body> ng-app="BrisaImoveis"
  12. 12. Eduardo Mendes (edumendes@gmail.com)12 Definindo uma rota com conteúdo dinâmico Como adicionar o conteúdo correto aqui?
  13. 13. Eduardo Mendes (edumendes@gmail.com)13 Definindo uma rota com conteúdo dinâmico Como adicionar o conteúdo correto aqui? Imobiliária index.html css templates pages imoveis index.html usuarios index.html
  14. 14. Eduardo Mendes (edumendes@gmail.com)14 Definindo uma rota com conteúdo dinâmico Imobiliária index.html css templates pages imoveis index.html usuarios index.html javascript Com Angular é possível mapear URLs para templates, assim cada vez que a rota atual muda, a visão incluída muda também routes.js http://aplicacao.com/#/imoveis
  15. 15. Eduardo Mendes (edumendes@gmail.com) Receita para
 utilizar rotas 15 Utilizar ngView Carregar a biblioteca ngRoute Importar o módulo ngRoute Definir as rotas
  16. 16. Eduardo Mendes (edumendes@gmail.com)16 Utilizar ngView a diretiva ngView define o local onde os templates serão carregados <!-- Secao de Conteudo --> <div class="row"> <div ng-view> </div> </div>
  17. 17. Eduardo Mendes (edumendes@gmail.com)17 Carregar a biblioteca ngRoute <!-- Scripts--> <script src=“https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.js"></script> <script src="js/init.js"></script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script>
  18. 18. Eduardo Mendes (edumendes@gmail.com)18 Outras dependências JavaScript <!-- Scripts--> <script src=“https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.js"></script> <script src="js/init.js"></script> <script src="js/angular.min.js"></script> <script src=“js/angular-route.min.js"></script> <script src="js/app.js"></script> <script src="js/routes.js"></script>
  19. 19. Eduardo Mendes (edumendes@gmail.com)19 Criar o módulo da aplicação Importando o módulo ngRoute angular.module("BrisaImoveis", ['ngRoute']); app.js angular.module('BrisaImoveis') .config(function($routeProvider){}); routes.js
  20. 20. Eduardo Mendes (edumendes@gmail.com)20 Criando as rotas com $routeProvider angular.module('BrisaImoveis') .config(function($routeProvider){}); routes.js .when(path, route) .otherwise(params); adiciona uma nova definição de rota define uma rota quando uma rota não for encontrada
  21. 21. Eduardo Mendes (edumendes@gmail.com)21 Criando as rotas com $routeProvider angular.module('BrisaImoveis') .config(function($routeProvider){ }); routes.js $routeProvider.when('/imoveis', { templateUrl: 'templates/pages/imoveis/index.html' }) .when('/usuarios', { templateUrl: 'templates/pages/usuarios/index.html' })
  22. 22. Eduardo Mendes (edumendes@gmail.com) 22 Criando as rotas com $routeProvider angular.module('BrisaImoveis') .config(function($routeProvider){ }); routes.js $routeProvider.when('/imoveis', { templateUrl: 'templates/pages/imoveis/index.html' }) .when('/usuarios', { templateUrl: 'templates/pages/usuarios/index.html' }) .when('/', { templateUrl: 'templates/pages/imoveis/index.html' }) .otherwise({ redirectTo: ‘/' });
  23. 23. Eduardo Mendes (edumendes@gmail.com) Routes & Logic 23
  24. 24. Eduardo Mendes (edumendes@gmail.com)24 $http Service Serviço para recuperação e manipulação de dados $http({method: 'GET', url: '/produtos.json'}); angular.module('lojaApp', [ 'loja-produtos' ]) .controller('LojaController', function($http) { var produtos = this; $http.get('/produtos.json').success(function(data){ loja.produtos = data; }); });
  25. 25. Eduardo Mendes (edumendes@gmail.com)25 $http Service $http.get $http.post $http.put $http.delete Recuperação de dados Envio de dados Alteração de dados Exclusão de dados Permite a passagem de dados quando for necessário $http({method: 'POST', url: '/recurso/caminho', data: dataProduto});
  26. 26. Eduardo Mendes (edumendes@gmail.com)26 Rotas e componentes Além de se puder associar templates às rotas, também é possível associar controladores Requisição /imoveis controller template /usuarios controller template
  27. 27. Eduardo Mendes (edumendes@gmail.com) 02 maneiras 27 para ligar um controlador a uma rota no controlador de rotas fora do controlador de rotas
  28. 28. Eduardo Mendes (edumendes@gmail.com)28 Dentro do controlador de rotas angular.module('BrisaImoveis') .config(function($routeProvider){ $routeProvider.when('/imoveis', { templateUrl: 'templates...html', controller: function() {} }) }); routes.js
  29. 29. Eduardo Mendes (edumendes@gmail.com)29 Fora do controlador de rotas Imobiliária imoveis-index.html usuarios-index.html javascript app.js controllers filters services directives templates imoveis-create-controller.js imoveis-edit-controller.js imoveis-index-controller.js imoveis-show-controller.js angular.module('BrisaImoveis') .controller('ImoveisIndexController', function() { }); imoveis-index-controller.js
  30. 30. Eduardo Mendes (edumendes@gmail.com) angular.module('BrisaImoveis') .config(function($routeProvider){ $routeProvider.when('/imoveis', { templateUrl: 'templates...html', controller: 'ImoveisIndexController', controllerAs: 'indexController' }) }); routes.js 30 Fora do controlador de rotas angular.module('BrisaImoveis') .controller('ImoveisIndexController', function() { }); imoveis-index-controller.js
  31. 31. Eduardo Mendes (edumendes@gmail.com)31 Recuperando os imóveis para o controller utilizando o $http GET carregaremos os imoveis para o escopo do controle $http.get Recuperação de dados angular.module('BrisaImoveis') .controller('ImoveisIndexController', function($http) { var controller = this; $http({method: 'GET', url:'/imoveis'}).success(function(data){ controller.imoveis = data; }); }); imoveis-index-controller.js
  32. 32. Eduardo Mendes (edumendes@gmail.com)32 Exibindo os imóveis Agora é possível exibir a lista de imóveis. Para isso utilizaremos o ngRepeat. <h1>Imóveis</h1> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-action-home"></i></h2> <h5 class="center">Título do Imóvel</h5> <p class="light">Descrição do Imóvel.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-action-home"></i></h2> <h5 class="center">Título do Imóvel</h5> <p class="light">Descrição do Imóvel.</p> </div> </div>
  33. 33. Eduardo Mendes (edumendes@gmail.com)33 Exibindo os imóveis Agora é possível exibir a lista de imóveis. Para isso utilizaremos o ngRepeat. <h1>Imóveis</h1> <div class="col s12 m4" ng-repeat="imovel in indexController.imoveis"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-action-home"></i></h2> <h5 class="center">{{imovel.titulo}}</h5> <p class="light">{{imovel.descricao}}</p> </div> </div>
  34. 34. Eduardo Mendes (edumendes@gmail.com)34 Colocar o código para exibir os imoveis exemplo 5 ou 6
  35. 35. Eduardo Mendes (edumendes@gmail.com)35 Exibindo apenas um imóvel
  36. 36. Eduardo Mendes (edumendes@gmail.com)36 Exibindo apenas um imóvel Quando um imóvel é clicado, o link muda para a rota de visualização de um imóvel específico #/imoveis #/imoveis/<id> template controller /imoveis/exibir.html
  37. 37. Eduardo Mendes (edumendes@gmail.com)37 Criando o link para um rota específica tag <a> com ng-href <h1>Imóveis</h1> <div class="col s12 m4" ng-repeat="imovel in indexController.imoveis"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-action-home"></i></h2> <h5 class="center">{{imovel.titulo}}</h5> <p class="light">{{imovel.descricao}}</p> </div> </div>
  38. 38. Eduardo Mendes (edumendes@gmail.com)38 Criando o link para um rota específica tag <a> com ng-href <h1>Imóveis</h1> <div class="col s12 m4" ng-repeat="imovel in indexController.imoveis"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-action-home"></i></h2> <h5 class=“center"> <a ng-href=“#/imoveis/{{imovel.id}}">{{imovel.titulo}}</a> </h5> <p class="light">{{imovel.descricao}}</p> </div> </div>
  39. 39. Eduardo Mendes (edumendes@gmail.com)39 Criando um link para uma rota específica .when('/imoveis/:id', { templateUrl: 'templates/pages/imoveis/exibir.html', controller: 'ImoveisExibirController', controllerAs: "exibir" }) routes.js
  40. 40. Eduardo Mendes (edumendes@gmail.com) $routeParams 40 Permite que se possa recuperar o conjunto atual de parâmetros na rota É necessário o módulo ngRoute instalado URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby Route: /Chapter/:chapterId/Section/:sectionId $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
  41. 41. Eduardo Mendes (edumendes@gmail.com)41 Recuperando os parâmetros no Controller utilizando o $routeParams é possível acessar os parâmetros $routeParams angular.module('BrisaImoveis') .controller('ImoveisExibirController', function($http, $routeParams) { }); imoveis-index-controller.js var controller = this; var urlExibir = ‘http://localhost:8080/brisaimoveis/imovel/exibir/'; $http({method: 'GET', url: urlExibir + })$routeParams.id .success( function (data) { controller.imovel = data[0]; } );

×