Baixado 17 vezes
![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](https://image.slidesharecdn.com/angularjs-rotas-160304153307/85/AngularJS-Rotas-19-320.jpg)
![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;
});
});](https://image.slidesharecdn.com/angularjs-rotas-160304153307/85/AngularJS-Rotas-24-320.jpg)
![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];
}
);](https://image.slidesharecdn.com/angularjs-rotas-160304153307/85/AngularJS-Rotas-41-320.jpg)
Carregado porEduardo Mendes
AngularJS - Rotas
O documento descreve a estrutura de pastas e arquivos de um projeto de uma imobiliária desenvolvido com AngularJS. A estrutura inclui páginas para imóveis e usuários, além de arquivos CSS, JavaScript e templates. O texto discute a organização dos arquivos e a implementação de rotas e controllers para exibir dinamicamente o conteúdo correto de acordo com a rota atual.
Mais conteúdo relacionado
AngularJS - Rotas
- 1. Eduardo Mendes deOliveira edumendes@gmail.com
- 2.
- 3. Eduardo Mendes (edumendes@gmail.com)3 Estruturado projeto Imobiliária imoveis-index.html usuarios-index.html css application.css images
- 4. Eduardo Mendes (edumendes@gmail.com)4 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)5 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)6 Estruturado projeto Imobiliária imoveis-index.html usuarios-index.html css javascript templates Ambos arquivos possuem partes iguais diferindo apenas no conteúdo principal
- 7. Eduardo Mendes (edumendes@gmail.com)7 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)8 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)9 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)10 Estruturado 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. Eduardo Mendes (edumendes@gmail.com)11 Adicionarum Módulo AngularJS <!DOCTYPE html> <html lang=“pt-br" > <head>…</head> <body>…</body> ng-app="BrisaImoveis"
- 12. Eduardo Mendes (edumendes@gmail.com)12 Definindouma rota com conteúdo dinâmico Como adicionar o conteúdo correto aqui?
- 13. Eduardo Mendes (edumendes@gmail.com)13 Definindouma 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. Eduardo Mendes (edumendes@gmail.com)14 Definindouma 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. Eduardo Mendes (edumendes@gmail.com) Receitapara utilizar rotas 15 Utilizar ngView Carregar a biblioteca ngRoute Importar o módulo ngRoute Definir as rotas
- 16. Eduardo Mendes (edumendes@gmail.com)16 UtilizarngView a diretiva ngView define o local onde os templates serão carregados <!-- Secao de Conteudo --> <div class="row"> <div ng-view> </div> </div>
- 17. Eduardo Mendes (edumendes@gmail.com)17 Carregara 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. Eduardo Mendes (edumendes@gmail.com)18 Outrasdependê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. Eduardo Mendes (edumendes@gmail.com)19 Criaro 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. Eduardo Mendes (edumendes@gmail.com)20 Criandoas 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. Eduardo Mendes (edumendes@gmail.com)21 Criandoas 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. Eduardo Mendes (edumendes@gmail.com) 22 Criandoas 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.
- 24. Eduardo Mendes (edumendes@gmail.com)24 $httpService 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. Eduardo Mendes (edumendes@gmail.com)25 $httpService $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. Eduardo Mendes (edumendes@gmail.com)26 Rotase 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. Eduardo Mendes (edumendes@gmail.com) 02maneiras 27 para ligar um controlador a uma rota no controlador de rotas fora do controlador de rotas
- 28. Eduardo Mendes (edumendes@gmail.com)28 Dentrodo controlador de rotas angular.module('BrisaImoveis') .config(function($routeProvider){ $routeProvider.when('/imoveis', { templateUrl: 'templates...html', controller: function() {} }) }); routes.js
- 29. Eduardo Mendes (edumendes@gmail.com)29 Forado 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. 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. Eduardo Mendes (edumendes@gmail.com)31 Recuperandoos 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. Eduardo Mendes (edumendes@gmail.com)32 Exibindoos 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. Eduardo Mendes (edumendes@gmail.com)33 Exibindoos 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. Eduardo Mendes (edumendes@gmail.com)34 Colocaro código para exibir os imoveis exemplo 5 ou 6
- 35. Eduardo Mendes (edumendes@gmail.com)35 Exibindoapenas um imóvel
- 36. Eduardo Mendes (edumendes@gmail.com)36 Exibindoapenas 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. Eduardo Mendes (edumendes@gmail.com)37 Criandoo 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. Eduardo Mendes (edumendes@gmail.com)38 Criandoo 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. Eduardo Mendes (edumendes@gmail.com)39 Criandoum link para uma rota específica .when('/imoveis/:id', { templateUrl: 'templates/pages/imoveis/exibir.html', controller: 'ImoveisExibirController', controllerAs: "exibir" }) routes.js
- 40. Eduardo Mendes (edumendes@gmail.com) $routeParams 40 Permiteque 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. Eduardo Mendes (edumendes@gmail.com)41 Recuperandoos 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]; } );