animal.detalhe.controller.js

## animal.detalhe.controller.js
(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);
    }
})();

## animal.factory.js
(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;
    }
  }

})();

## animal.lista.controller.js
(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();
      };
    }

})();

## app.js
(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;
    });
})();

## config.js
(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'
        });
    });
})();

## detalhe.html
<h3>{{titulo}}</h3>
<div>
  Nome: {{animal.nome}}<br>
  Raça: {{animal.raca}}<br>
  Idade: {{animal.idade}}<br><br>
  <a href="#/animais" >voltar</a>
</div>

## index.html
<!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>

## lista.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>