How to inject $httpParamSerializer for use in templateUrl

Question

I am trying to inject $httpParamSerializer for use in templateUrl but I am having some issues. There isn't any good documentation and examples of how to use $httpParamSerializer.

Example code:

angular.module('myApp', ['ngRoute']).config(
  function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
        .when('/data/dashboard', {
            templateUrl: function(params) {
             //NEED TO USE IT HERE
            }
        })
})

Things that didn't work, placing it like this:

function($routeProvider, $locationProvider, $httpProvider,$httpParamSerializer ) {

Also in the moduler, like this:

angular.module('myApp', ['ngRoute', '$httpParamSerializer']).config(

Any insight why this isn't working would help.

Answer 1

Since you're in the config you need to get it from the provider itself. That is, inject the provider and call $get

angular.module('myApp', ['ngRoute']).config(
  function($routeProvider, $locationProvider, $httpProvider, $httpParamSerializerProvider) {

    // get the serializer from the provider
    var paramSerializer = $httpParamSerializerProvider.$get();
    console.log(paramSerializer({a:1})); // test it

    $routeProvider.when('/', {
      templateUrl: function(params) {
        // you can use paramSerializer(here
      }
  });
});

Working version of your jsfiddle: http://jsfiddle.net/kh9oeq1y/16/

Answer 2

This forum suggests it's a problem with your angular version. Check that you're using at least 1.4.0.