AngularJS - Rotas

587 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
  • Seja o primeiro a comentar

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]; } );

×