(function() { | |
'use strict'; | |
angular.module('feira-app') | |
.controller('AnimalDetalheController', AnimalDetalheController); | |
AnimalDetalheController.$inject = ['$scope', '$routeParams', 'AnimalFactory']; | |
function AnimalDetalheController($scope, $routeParams, AnimalFactory) { | |
$scope.titulo = 'Detalhe do Animal'; | |
$scope.animal = AnimalFactory.recuperar($routeParams.id); | |
} | |
})(); |
(function() { | |
'use strict'; | |
angular.module('feira-app') | |
.factory('AnimalFactory', AnimalFactory); | |
function AnimalFactory() { | |
var animais = [{ | |
"id": 0, | |
"nome": "Xilito", | |
"raca": "ViraLata", | |
"idade": 5 | |
}, { | |
"id": 1, | |
"nome": "Chiquinha", | |
"raca": "Poodle", | |
"idade": 1 | |
}]; | |
return { | |
recuperar: get, | |
listar: list | |
}; | |
function get(id) { | |
return animais[id]; | |
} | |
function list() { | |
return animais; | |
} | |
} | |
})(); |
(function() { | |
'use strict'; | |
angular.module('feira-app') | |
.controller('AnimalListaController', AnimalListaController); | |
AnimalListaController.$inject = ['$scope', 'AnimalFactory']; | |
function AnimalListaController($scope, AnimalFactory) { | |
$scope.titulo = 'Lista de Animais'; | |
$scope.listar = function() { | |
return AnimalFactory.listar(); | |
}; | |
} | |
})(); |
(function() { | |
'use strict'; | |
angular.module('feira-app', ['ngRoute']); | |
angular.module('feira-app') | |
.run(function($rootScope, $route, $routeParams, $location) { | |
$rootScope.$on('$routeChangeStart',function(evt,next,current){ | |
console.log('Nome do Evento:'+evt.name); | |
console.log('Próxima Rota:'+ angular.toJson(next)); | |
console.log('Rota Atual:'+ angular.toJson(current)); | |
}); | |
$rootScope.$route = $route; | |
$rootScope.$location = $location; | |
$rootScope.$routeParams = $routeParams; | |
}); | |
})(); |
(function() { | |
'use strict'; | |
angular.module('feira-app') | |
.config(function($routeProvider) { | |
$routeProvider | |
.when('/animais', { | |
templateUrl: 'lista.html', | |
controller: 'AnimalListaController' | |
}) | |
.when('/animais/:id', { | |
templateUrl: 'detalhe.html', | |
controller: 'AnimalDetalheController' | |
}).otherwise({ | |
redirectTo: '/animais' | |
}); | |
}); | |
})(); |
<h3>{{titulo}}</h3> | |
<div> | |
Nome: {{animal.nome}}<br> | |
Raça: {{animal.raca}}<br> | |
Idade: {{animal.idade}}<br><br> | |
<a href="#/animais" >voltar</a> | |
</div> |
<!DOCTYPE html> | |
<html ng-app="feira-app"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Blog do Gabriel Feitosa > AngularJS: Rotas (ngRoute)</title> | |
</head> | |
<body> | |
<h1>Animais para Adoção</h1> | |
<div ng-view style="border: 1px solid"></div> | |
<div> | |
<p><b>Vamos ver o que está acontecendo?</b></p> | |
<pre>Path ($location.path()) = {{$location.path()}}</pre> | |
<pre>Template ($route.current.templateUrl) = {{$route.current.templateUrl}}</pre> | |
<pre>Controlador ($route.current.controller) = {{$route.current.controller}}</pre> | |
<pre>Titulo da Página ($route.current.scope.titulo) = {{$route.current.scope.titulo}}</pre> | |
<pre>Parâmetros da URL ($routeParams) = {{$routeParams}}</pre> | |
</div> | |
<footer> | |
<hr/> | |
<a href="http://www.gabrielfeitosa.com"> Blog do Gabriel Feitosa</a> | |
</footer> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> | |
<script src="//code.angularjs.org/1.4.4/angular-route.js"></script> | |
<script src="js/app.js"></script> | |
<script src="js/config.js"></script> | |
<script src="js/animal.lista.controller.js"></script> | |
<script src="js/animal.detalhe.controller.js"></script> | |
<script src="js/animal.factory.js"></script> | |
</body> | |
</html> |
<h4>{{titulo}}</h4> | |
<div ng-repeat="animal in listar()"> | |
<div style="padding: 10px;"> | |
Nome: {{animal.nome}}<br> | |
Raça: {{animal.raca}}<br> | |
<a href="#/animais/{{animal.id}}">Detalhar</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment