AngularJS: Trabalhando com Parâmetros Opcionais

Simpla, não?!

Mais um dia na firma, mais um dia tornando requisitos em realidade.

Eis que chega o seguinte:

Cauê, precisamos que em uma específica URL você trate da seguinte forma:
1. Verificar se existe algum parâmetro;
2. Se existir, faça isso…;
3. E se não existir, pode deixar o funcionamento como está.

Hmm, beleza. Então vamos trabalhar com parâmetros opcionais, hora tenho, hora não.

Como o job já havia sido inicializado há um bom tempo, já estava implementado com $routeProvider para as rotas, então é com ele que trabalharemos.

O Básico

Você deve conhecer a forma como definimos as rotas com o $routeProvider, se não, é mais ou menos assim:

// routes
app.config(function($routeProvider) {
 $routeProvider
  .when('/page', {
templateUrl: 'path/view.html'
})
 .otherwise({ redirectTo: '/' });
})

Para trabalharmos com parâmetros nas rotas, a gente só precisa passar o parâmetro assim:

.when('/page/:param', {
templateUrl: 'path/view.html'
})

Mas, e se o parâmetro precisar ser opcional? Como assim? Qual a dificuldade?

Se a gente acessar a rota /page/ sem passar um parâmetro, vai dar PAU, não vai dar pra acessar.

O FIX

Para que a gente possa acessar a rota normalmente e somente quando houver um parâmetro fazermos algo, é só adicionarmos um ? ao fim da passagem de parâmetro no seu código.

Assim ó:

.when('/page/:param?', {
templateUrl: 'path/view.html'
})

Para pegarmos o parâmetro no nosso controller é só trabalhar como você já trabalha: instancia o $routeParams e atribui o nome do parâmetro que você passou no seu app.config.

Exemplo:

app.controller("myCtrl", function($routeParams){
   var param = $routeParams.param;
});

FIM.

E aí, o que você achou? Conhece alguma outra forma de trabalhar com parâmetros opcionais?

Até.

Show your support

Clapping shows how much you appreciated Cauê Almeida’s story.