SlideShare uma empresa Scribd logo
1 de 41
Baixar para ler offline
Eduardo Mendes de Oliveira
edumendes@gmail.com
Eduardo Mendes (edumendes@gmail.com)
Routes
2
Eduardo Mendes (edumendes@gmail.com)3
Estrutura do projeto
Imobiliária
imoveis-index.html
usuarios-index.html
css
application.css
images
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
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
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
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
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
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
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
Eduardo Mendes (edumendes@gmail.com)11
Adicionar um Módulo AngularJS
<!DOCTYPE html>
<html lang=“pt-br" >
<head>…</head>
<body>…</body>
ng-app="BrisaImoveis"
Eduardo Mendes (edumendes@gmail.com)12
Definindo uma rota com conteúdo dinâmico
Como adicionar o conteúdo correto aqui?
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
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
Eduardo Mendes (edumendes@gmail.com)
Receita para

utilizar rotas
15
Utilizar ngView
Carregar a biblioteca
ngRoute
Importar o módulo
ngRoute
Definir as rotas
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>
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>
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>
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
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
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'
})
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: ‘/'
});
Eduardo Mendes (edumendes@gmail.com)
Routes & Logic
23
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;
});
});
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});
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
Eduardo Mendes (edumendes@gmail.com)
02 maneiras
27
para ligar um controlador a uma rota
no
controlador de rotas
fora do
controlador de rotas
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
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
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
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
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>
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>
Eduardo Mendes (edumendes@gmail.com)34
Colocar o código para exibir os imoveis
exemplo 5 ou 6
Eduardo Mendes (edumendes@gmail.com)35
Exibindo apenas um imóvel
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
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>
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>
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
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'}
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];
}
);

Mais conteúdo relacionado

Mais procurados

jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão GeralKaio Valente
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicosponto hacker
 
O fantástico mundo de Android
O fantástico mundo de AndroidO fantástico mundo de Android
O fantástico mundo de AndroidSuelen Carvalho
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaMarianna Cruz Teixeira
 
JavaScript ninja com jQuery
JavaScript ninja com jQueryJavaScript ninja com jQuery
JavaScript ninja com jQueryReinaldo Junior
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoFreedom DayMS
 
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureVitor Ciaramella
 
Aumentando a produtividade com Android Libs
Aumentando a produtividade com Android LibsAumentando a produtividade com Android Libs
Aumentando a produtividade com Android LibsNelson Glauber Leal
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoRicardo Valeriano
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBLuciano Borges
 

Mais procurados (17)

Vb
VbVb
Vb
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
O fantástico mundo de Android
O fantástico mundo de AndroidO fantástico mundo de Android
O fantástico mundo de Android
 
Simplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na práticaSimplificando o full stack - desenvolvimento web na prática
Simplificando o full stack - desenvolvimento web na prática
 
JavaScript ninja com jQuery
JavaScript ninja com jQueryJavaScript ninja com jQuery
JavaScript ninja com jQuery
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Componentes para a Web
Componentes para a WebComponentes para a Web
Componentes para a Web
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Windows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows AzureWindows Azure 5/8 - Recursos adicionais do Windows Azure
Windows Azure 5/8 - Recursos adicionais do Windows Azure
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDB
 
Aumentando a produtividade com Android Libs
Aumentando a produtividade com Android LibsAumentando a produtividade com Android Libs
Aumentando a produtividade com Android Libs
 
JavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamentoJavaScript: prototipação, closure e encapsulamento
JavaScript: prototipação, closure e encapsulamento
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 

Destaque

The Power of Collaboration to Build Your Own Startup
The Power of Collaboration to Build Your Own StartupThe Power of Collaboration to Build Your Own Startup
The Power of Collaboration to Build Your Own StartupTaufan Erfiyanto
 
Introdução à Linguagem Ruby - Fundamentos - Parte 2
 Introdução à Linguagem Ruby - Fundamentos - Parte 2 Introdução à Linguagem Ruby - Fundamentos - Parte 2
Introdução à Linguagem Ruby - Fundamentos - Parte 2Eduardo Mendes
 
Teste de Software - parte 1
Teste de Software - parte 1Teste de Software - parte 1
Teste de Software - parte 1Eduardo Mendes
 
TDD Projeto e Estrategias
TDD Projeto e EstrategiasTDD Projeto e Estrategias
TDD Projeto e EstrategiasEduardo Mendes
 
Evolucao de software - parte 2
Evolucao de software - parte 2Evolucao de software - parte 2
Evolucao de software - parte 2Eduardo Mendes
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de RequisitosEduardo Mendes
 
Turbinando o desenvolvimento com Eclipse
Turbinando o desenvolvimento com EclipseTurbinando o desenvolvimento com Eclipse
Turbinando o desenvolvimento com EclipseMarcos Sousa
 
Desenvolvimento web com PHP parte 3
Desenvolvimento web com PHP parte 3Desenvolvimento web com PHP parte 3
Desenvolvimento web com PHP parte 3Eduardo Mendes
 
Desenvolvimento web com PHP parte 4
Desenvolvimento web com PHP parte 4Desenvolvimento web com PHP parte 4
Desenvolvimento web com PHP parte 4Eduardo Mendes
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBCEduardo Mendes
 
TDD - Prática com RSpec
TDD - Prática com RSpecTDD - Prática com RSpec
TDD - Prática com RSpecEduardo Mendes
 
Testes de Software parte 2
Testes de Software parte 2Testes de Software parte 2
Testes de Software parte 2Eduardo Mendes
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Eduardo Mendes
 
Desenvolvimento Web com PHP parte 7
Desenvolvimento Web com PHP parte 7Desenvolvimento Web com PHP parte 7
Desenvolvimento Web com PHP parte 7Eduardo Mendes
 

Destaque (20)

Html Aula 1 - parte 2
Html Aula 1 - parte 2Html Aula 1 - parte 2
Html Aula 1 - parte 2
 
The Power of Collaboration to Build Your Own Startup
The Power of Collaboration to Build Your Own StartupThe Power of Collaboration to Build Your Own Startup
The Power of Collaboration to Build Your Own Startup
 
RSpec com doubles
RSpec com doublesRSpec com doubles
RSpec com doubles
 
Introdução à Linguagem Ruby - Fundamentos - Parte 2
 Introdução à Linguagem Ruby - Fundamentos - Parte 2 Introdução à Linguagem Ruby - Fundamentos - Parte 2
Introdução à Linguagem Ruby - Fundamentos - Parte 2
 
Teste de Software - parte 1
Teste de Software - parte 1Teste de Software - parte 1
Teste de Software - parte 1
 
Academia java intensivo
Academia java intensivoAcademia java intensivo
Academia java intensivo
 
TDD Projeto e Estrategias
TDD Projeto e EstrategiasTDD Projeto e Estrategias
TDD Projeto e Estrategias
 
Jquery
JqueryJquery
Jquery
 
Introdução ao TDD
Introdução ao TDDIntrodução ao TDD
Introdução ao TDD
 
Rails - parte 1
Rails - parte 1Rails - parte 1
Rails - parte 1
 
Evolucao de software - parte 2
Evolucao de software - parte 2Evolucao de software - parte 2
Evolucao de software - parte 2
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
 
Turbinando o desenvolvimento com Eclipse
Turbinando o desenvolvimento com EclipseTurbinando o desenvolvimento com Eclipse
Turbinando o desenvolvimento com Eclipse
 
Desenvolvimento web com PHP parte 3
Desenvolvimento web com PHP parte 3Desenvolvimento web com PHP parte 3
Desenvolvimento web com PHP parte 3
 
Desenvolvimento web com PHP parte 4
Desenvolvimento web com PHP parte 4Desenvolvimento web com PHP parte 4
Desenvolvimento web com PHP parte 4
 
Acesso a banco de dados com JDBC
Acesso a banco de dados com JDBCAcesso a banco de dados com JDBC
Acesso a banco de dados com JDBC
 
TDD - Prática com RSpec
TDD - Prática com RSpecTDD - Prática com RSpec
TDD - Prática com RSpec
 
Testes de Software parte 2
Testes de Software parte 2Testes de Software parte 2
Testes de Software parte 2
 
Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2Java Web 4 - Servlets e JSP 2
Java Web 4 - Servlets e JSP 2
 
Desenvolvimento Web com PHP parte 7
Desenvolvimento Web com PHP parte 7Desenvolvimento Web com PHP parte 7
Desenvolvimento Web com PHP parte 7
 

Semelhante a AngularJS - Rotas

LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)Zeno Rocha
 
Material Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu AppMaterial Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu Appalissin
 
Pilares do desenvolvimento Mobile no Nubank
 Pilares do desenvolvimento Mobile no Nubank Pilares do desenvolvimento Mobile no Nubank
Pilares do desenvolvimento Mobile no NubankDevCamp Campinas
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheirasLambda 3
 
Palestra MVC - Online tech day 2010
Palestra MVC - Online tech day 2010Palestra MVC - Online tech day 2010
Palestra MVC - Online tech day 2010Alexandre Tarifa
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScriptHeider Lopes
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013Davidson Alencar
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
 
Aula 1 view model livedata e databinding.pptx
Aula 1   view model livedata e databinding.pptxAula 1   view model livedata e databinding.pptx
Aula 1 view model livedata e databinding.pptxRicardo Ogliari
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IODouglas Lira
 
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )João Moura
 
Desenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryDesenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryCarlos Eduardo Alves
 

Semelhante a AngularJS - Rotas (20)

LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Material Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu AppMaterial Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu App
 
Pilares do desenvolvimento Mobile no Nubank
 Pilares do desenvolvimento Mobile no Nubank Pilares do desenvolvimento Mobile no Nubank
Pilares do desenvolvimento Mobile no Nubank
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
 
Django Módulo Básico Parte II
Django Módulo Básico Parte IIDjango Módulo Básico Parte II
Django Módulo Básico Parte II
 
React js
React js React js
React js
 
Palestra MVC - Online tech day 2010
Palestra MVC - Online tech day 2010Palestra MVC - Online tech day 2010
Palestra MVC - Online tech day 2010
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
 
Introdução Play framework
Introdução Play frameworkIntrodução Play framework
Introdução Play framework
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Aula 1 view model livedata e databinding.pptx
Aula 1   view model livedata e databinding.pptxAula 1   view model livedata e databinding.pptx
Aula 1 view model livedata e databinding.pptx
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
WebSocket com Node.js ( socketstream && coffeescript ) X RoR ( Juggernaut )
 
Desenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQueryDesenhando aplicativos ricos para Web com jQuery
Desenhando aplicativos ricos para Web com jQuery
 

Mais de Eduardo Mendes

Singleton - Padrão de Projeto
Singleton - Padrão de ProjetoSingleton - Padrão de Projeto
Singleton - Padrão de ProjetoEduardo Mendes
 
Introdução à Internet, Http e HTML
Introdução à Internet, Http e HTMLIntrodução à Internet, Http e HTML
Introdução à Internet, Http e HTMLEduardo Mendes
 
Estimativas de Esforço - Engenharia de Software
Estimativas de Esforço - Engenharia de SoftwareEstimativas de Esforço - Engenharia de Software
Estimativas de Esforço - Engenharia de SoftwareEduardo Mendes
 
Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2Eduardo Mendes
 
Validações no Ruby on Rails
Validações no Ruby on Rails Validações no Ruby on Rails
Validações no Ruby on Rails Eduardo Mendes
 
Padroes Template-Method (Método Gabarito)
Padroes Template-Method (Método Gabarito)Padroes Template-Method (Método Gabarito)
Padroes Template-Method (Método Gabarito)Eduardo Mendes
 
PHP básico para iniciantes
PHP básico para iniciantesPHP básico para iniciantes
PHP básico para iniciantesEduardo Mendes
 
PHP e MySQL para iniciantes
PHP e MySQL para iniciantesPHP e MySQL para iniciantes
PHP e MySQL para iniciantesEduardo Mendes
 
Introdução a Padrões de Projeto
Introdução a Padrões de ProjetoIntrodução a Padrões de Projeto
Introdução a Padrões de ProjetoEduardo Mendes
 
Strategy - Padrões de Projeto
Strategy - Padrões de ProjetoStrategy - Padrões de Projeto
Strategy - Padrões de ProjetoEduardo Mendes
 
Decorator - Padrões de projeto
Decorator - Padrões de projetoDecorator - Padrões de projeto
Decorator - Padrões de projetoEduardo Mendes
 

Mais de Eduardo Mendes (20)

Singleton - Padrão de Projeto
Singleton - Padrão de ProjetoSingleton - Padrão de Projeto
Singleton - Padrão de Projeto
 
Layout Fluido
Layout FluidoLayout Fluido
Layout Fluido
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Html - Aula 4
Html - Aula 4Html - Aula 4
Html - Aula 4
 
Html - Aula 3
Html - Aula 3Html - Aula 3
Html - Aula 3
 
Introdução à Internet, Http e HTML
Introdução à Internet, Http e HTMLIntrodução à Internet, Http e HTML
Introdução à Internet, Http e HTML
 
Estimativas de Esforço - Engenharia de Software
Estimativas de Esforço - Engenharia de SoftwareEstimativas de Esforço - Engenharia de Software
Estimativas de Esforço - Engenharia de Software
 
Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2
 
Validações no Ruby on Rails
Validações no Ruby on Rails Validações no Ruby on Rails
Validações no Ruby on Rails
 
Padrão Iterator
Padrão IteratorPadrão Iterator
Padrão Iterator
 
Padroes Template-Method (Método Gabarito)
Padroes Template-Method (Método Gabarito)Padroes Template-Method (Método Gabarito)
Padroes Template-Method (Método Gabarito)
 
Padrão Command
Padrão CommandPadrão Command
Padrão Command
 
Padrão Fachada
Padrão FachadaPadrão Fachada
Padrão Fachada
 
Padrão Adapter
Padrão AdapterPadrão Adapter
Padrão Adapter
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
PHP básico para iniciantes
PHP básico para iniciantesPHP básico para iniciantes
PHP básico para iniciantes
 
PHP e MySQL para iniciantes
PHP e MySQL para iniciantesPHP e MySQL para iniciantes
PHP e MySQL para iniciantes
 
Introdução a Padrões de Projeto
Introdução a Padrões de ProjetoIntrodução a Padrões de Projeto
Introdução a Padrões de Projeto
 
Strategy - Padrões de Projeto
Strategy - Padrões de ProjetoStrategy - Padrões de Projeto
Strategy - Padrões de Projeto
 
Decorator - Padrões de projeto
Decorator - Padrões de projetoDecorator - Padrões de projeto
Decorator - Padrões de projeto
 

AngularJS - Rotas

  • 1. Eduardo Mendes de Oliveira edumendes@gmail.com
  • 3. Eduardo Mendes (edumendes@gmail.com)3 Estrutura do projeto Imobiliária imoveis-index.html usuarios-index.html css application.css images
  • 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. 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. 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
  • 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. Eduardo Mendes (edumendes@gmail.com)12 Definindo uma rota com conteúdo dinâmico Como adicionar o conteúdo correto aqui?
  • 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
  • 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. 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. 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. 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. 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
  • 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. 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: ‘/' });
  • 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
  • 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. 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. 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. 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 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>
  • 34. Eduardo Mendes (edumendes@gmail.com)34 Colocar o código para exibir os imoveis exemplo 5 ou 6
  • 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]; } );