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