Call Method in Routes in AngularJS

Question

Call Method in Routes in AngularJS

Navigation

#1 by (2 votes)

2

I have a controller called ProductController in AngularJS, this controller should have two methods, one to list all products when I pass a URL and another method to bring product details when it is another URL.

Example:

/produto/:codDepartamento - Rota para listar os departamentos

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

How would you call a method from these routes?

angularjs

asked by anonymous 24.02.2014 / 16:52

1 answer

Apache directing two URLs to the same folder View neighborhood according to City - CAKEPHP

score 2 · Accepted Answer

You can do the following:

Create a second controller, specific to the product details case

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 */

     /* ... */
   }
]);

Create a route that accepts optional arguments (possible since version 1.2.0 of 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
     }
   }
]);

Use $location.path() to find out which route it is:

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
     }
   }
]);

I consider the first alternative to be more "correct".