Injecting services/constants into provider in Angularjs


The problem here is I am able to access the getRoutes(), but I am unable to access the injected constant -"configuration". What am I missing? Thanks.

(function () {
    'use strict';

    var app = angular.module('app');

    app.constant('configuration', {
       PARTIAL_PATH: "/app/components/partials"

    app.module('app', [

    var routeServiceModule = angular.module('routeService', ['common']);

    routeServiceModule.provider('routeConfig',function () {

    this.getRoutes = function () {
        return [
                url: '/login',
                config: {
                    title: 'admin',
                    templateUrl: 'app/components/login/login.html'
            }, {
                url: '/',
                config: {
                    templateUrl: 'app/components/dashboard/dashboard.html',
                    title: 'Dashboard'

    this.$get = ['configuration', function (configuration) {

        var service = {
            getRoutes: getRoutes(),
            configuration: configuration.PARTIAL_PATH

        return service;

app.config(['$routeProvider', 'routeConfigProvider', function ($routeProvider, routeConfigProvider) {
        //Unable to get the configuration value
       //Console is returning as "undefined"
        routeConfigProvider.getRoutes().forEach(function(r) {
            $routeProvider.when(r.url, r.config);
        $routeProvider.otherwise({ redirectTo: '/' });

Created a plunkr demo :

Problem courtesy of: Krishh


(Regarding your last comment, with the plnkr)

The result is expected.

At config time (within app.config() ), you access raw providers, as you defined them, which allows you to call "private" methods or fields (testItem1) and to configure it for run time use. "private" because they won't be accessible at run time.

At run time (within and the rest of your app), when you ask for a dependency for which you wrote a provider, the angular injector hands you the result of the $get method of your provider, not the provider itself, so you can't access the "private" function.

This page was my path to enlightenment : AngularJS: Service vs provider vs factory

Solution courtesy of: zrz


I think you may be over complicating the route stuff. You may have a very good reason for it but as I do not know it may I suggest keeping it simple with something more like this:

MyApp.config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        activeTab: 'home'

MyApp.controller('HomeController', function ($route) {

I would be interested in knowing why you may not able to use this routing pattern or purposely chose something different.

Discussion courtesy of: Jordan Papaleo

I think it has to do with the way you are creating your initial module. Try this:

    var app = angular.module('app', []);

    app.constant('configuration', {
       PARTIAL_PATH: "/app/components/partials"

    var routeServiceModule = angular.module('routeService', ['app']);
Discussion courtesy of: victormejia

This recipe can be found in it's original form on Stack Over Flow.