Injecting services/constants into provider in Angularjs

Question

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', [
        'routeService'
    ]);

    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.log(routeConfigProvider.configuration);
       //Console is returning as "undefined"
        routeConfigProvider.getRoutes().forEach(function(r) {
            $routeProvider.when(r.url, r.config);
        });
        $routeProvider.otherwise({ redirectTo: '/' });
    }
]);
})();

Created a plunkr demo : http://plnkr.co/edit/2TIqgxMxBJEPbnk2Wk6D?p=preview

Answer 1

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) {
    console.log($route.current.activeTab);
});

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

Answer 2

(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 app.run() 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

Answer 3

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']);