Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS: Rotas (ngRoute)
(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