2

Tenho um controller chamado ProdutoController no AngularJS, esse controller deveria ter dois métodos, um para listar todos os produtos quando eu passar uma URL e outro método para trazer os detalhes do produto quando for outra URL.

Exemplo:

/produto/:codDepartamento - Rota para listar os departamentos

/produto/ficha/:codProduto - Rota para exibir os detalhes do produto

Como seria feito para chamar um método a partir dessas rotas?

1
  • Eu aconselharia usar dois controllers. Mas, caso queira usar um só, dê uma olhada na documentação do $location. Commented 24/02/2014 às 16:08

1 Resposta 1

2

Você pode fazer o seguinte:

  1. Criar um segundo controller, específico para o caso de detalhes do produto

    angular.module('myApp', ['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/produto/:codDepartamento', {
          templateUrl: 'path/to/lista.html',
          controller: 'ProdutoListaController'
         })
        .when('/produto/ficha/:codProduto', {
          templateUrl: 'path/to/detalhes.html',
          controller: 'ProdutoDetalhesController'
        });
     }])
    .controller('ProdutoListaController', ['$scope', '$routeParam',
       function($scope, $routeParam) {
         /* $routeParams.codDepartamento possui o código do dpto */
    
         /* ... */
       }
    ])
    .controller('ProdutoDetalhesController', ['$scope', '$routeParam',
       function($scope, $routeParam) {
         /* $routeParams.codProduto possui o código do produto */
    
         /* ... */
       }
    ]);
    
  2. Criar uma rota que aceite argumentos opcionais (possível desde a versão 1.2.0 do AngularJS):

    angular.module('myApp', ['$routeProvider', function($routeProvider) {
      $routeProvider
        // Note o sinal de interrogação no codProduto
        .when('/produto/:codDpto/:codProduto?', {
          templateUrl: 'path/to/template.html',
          controller: 'ProdutoController'
         });
     }])
    .controller('ProdutoController', ['$scope', '$routeParam', '$location',
       function($scope, $routeParam, $location) {
         if ($routeParams.codDpto === "ficha")
             if ($routeParams.hasOwnProperty("codProduto") &&
                 $routeParams.codProduto) {
                 // Buscar lista de produtos
              }
         } else {
              // Busca Dpto
         }
       }
    ]);
    
  3. Usar o $location.path() pra saber qual a rota que está:

    angular.module('myApp', ['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/produto/:codDpto', {
          templateUrl: 'path/to/template.html',
          controller: 'ProdutoController'
         })
        .when('/produto/ficha/:codProduto', {
          templateUrl: 'path/to/template.html',
          controller: 'ProdutoController'
         });
     }])
    .controller('ProdutoController', ['$scope', '$routeParam', '$location',
       function($scope, $routeParam, $location) {
         if (/^produto\/ficha/.test($location.path())) {
             // Busca Produto. Código no $routeParams.codProduto
         } else {
             // Busca Dpto
         }
       }
    ]);
    

Considero a primeira alternativa a mais "correta".

1
  • Resposta bem completa, parabéns. Mas vale lembrar que para o Angular 1.2.x é necessário referenciar o o modulo de rotas: var app= angular.module('app',['ngRoute']) Commented 16/04/2014 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .