2

Given the following code:

$routeProvider.when('/movies/:type', {
        title: 'Movies',
        templateUrl: 'pages/movies/movies.html',
        controller: 'MoviesCtrl'
      });

How can I access the :type param from inside the when function? I want to do something like so:

$routeProvider.when('/movies/:type', {
            title: 'Movies' + ' - ' + :type,
            templateUrl: 'pages/movies/movies.html',
            controller: 'MoviesCtrl'
          });

That value in title must be dinamically generated.

Thanks in adv.

Improve this question

3 Answers 3

Reset to default
4

I'm not sure why you are extending the route (config) object, but you are able to access routeParams from within your controller. That is also the recommended way.

The $routeParams service allows you to retrieve the current set of route parameters.

angular.module('MyModule').controller('MoviesCtrl',function($scope, $routeParams) {

    $scope.currentMovieType = 'Filmes-' + $routeParams.type;

});

Let's say your route is something like that /movies/scifi. In this case $scope.currentMovieType becomes scifi and you can use {{currentMovieType}} in your view to populate this value. You can find detailed informations in the documentation.

Note that the $routeParams are only updated after a route change completes successfully. This means that you cannot rely on $routeParams being correct in route resolve functions. Instead you can use $route.current.params to access the new route's parameters.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I can't set the property in a controller because that data is shared across some components, a breadcrumb one, for example. The breadcrumb path is dinamically set based in the title property I created in the router. As for the routeParams variable, this is just some var that happens to have the same name as the angular service. Sorry for the misunderstanding. I will remove it from the code.
Services and Factories are responsible to share data across components.
hm.. maybe it's time for some refactoring then. I'm kinda new to angular.
Yes, i think so. Once you get the concepts behind angular it's easy as pie to create (complex) applications. If you need further help, let me know!
1

It is not really possible, because the route config object is not as dynamic as you think. Whatever you put in the route configuration object, it cannot depend on the value that the route param is going to take in the future. Think of how this code gets executed : the configuration object will be evaluated only once, when the route is configured.

On the other hand, if you want to change the page's title when going through this route, you can do it using the $routeParamsservice to access the param value, and the $document service to change the page's title, either in a controller or in a resolveclause.

An example with the latter option: 

$routeProvider.when('/movies/:type', angular.extend({
  templateUrl: 'pages/movies/movies.html',
  controller: 'MoviesCtrl',
  resolve: {
    title: ['$routeParams','$document', function ($routeParams, $document) {
      var title = 'Filmes-' + $routeParams.type;
      $document.title = title;
      return title;
    }]
  }
}, routeParams));

That works also in a controller of course.

Some notes on your code :

  • I'm not even sure that there is a point setting a title property in a route config object, I don't see it in the documentation at least.
  • That second argument routeParams in that angular.extend call - the name is confusing, one could mistake it for the $routeParams service. I think you should call it routeDefaults or something like that instead.
Improve this answer

1 Comment

Thanks for your time. About the title property, it is there for 2 main purposes: to update the document.title and serve as a path for the breadcrumb component I created. It must be that way because I need something that the user can read and not some stripped-out-from-special-chars string . That way every time a new route is created everything we need to do is to config that property . And sorry for the routeParams variable - I should have ommited that in the sample code. This is only an object with shared properties between the routes, like prefix, suffix and so on.
0

Give a try to $location.absUrl(); requires some calculation too . https://docs.angularjs.org/api/ng/service/$location

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.