Extending a service provider (provider)

Question

I'm trying to extend a service provider; more specifically $routeProvider from the ngRoute module

my extended provider looks like this:

angular
    .module('myapp')
    .provider('customRoute', customRoute)

function customRoute($routeProvider) {

    var extendedProvider = angular.extend({}, $routeProvider, {
        // Customization here
    });

    // These will print almost identical objects
    console.log(extendedProvider); 
    console.log($routeProvider);

    this.$get = function() {
        return extendedProvider;
    }
}

The config of the routes looks something like this:

angular
    .module('myapp')
    .config(Routes);

function Routes(customRouteProvider, $routeProvider) {

    /* This will print an object that looks the same as 
       the ones printed in the provider definition */
    console.log($routeProvider);

    /* This object does not look like the $routeProvider any more :( */
    console.log(customRouteProvider);

    customRouteProvider
        .when('/', {
             templateUrl: 'path/to/some/template.html',
            controller: 'SomeController',
        })
        .otherwise({
            redirectTo: '/'
        });
}

I've read this thread:

how can i extend a service

But they only talk about extending the "factory"-service

Can someone explain what is happening here? Help is much appreciated.

dfsq · Accepted Answer · 2014-12-02T11:22:39.173

In order to extend $routeProvider your customRoute function must return extended provider object:

function customRoute($routeProvider) {

    var extendedProvider = angular.extend({}, $routeProvider, {
        // Customization here
        mergeRoutes: function() {}
    });

    return extendedProvider;
}

After that you could for example you new custom method customRouteProvider.mergeRoutes:

customRouteProvider
    .when('/', {
        templateUrl: 'path/to/some/template.html',
        controller: 'SomeController',
    })
    .otherwise({
        redirectTo: '/'
    })
    .mergeRoutes({ ... });

Demo to play: http://plnkr.co/edit/mht94RFLScz2jHCwPcai?p=preview

For your purposes you don't need to mess with this.$get, you just need to add some new methods to $routeProvider. this.$get returns a service object instance/constructor for corresponding provider service ($route in case of $routeProvider).

Extending a service provider (provider)

1 Answers1