AngularJs: Calling Service/Provider from app.config

Question

I would like to call my service from within app.config.

When searching for this, I found this question with a solution that i tried to follow (not the accepted answer, but the solution below with the title " Set up your service as a custom AngularJS Provider ")

However with that solution and with the suggested alternative as well i run into problems when i am trying to call the service from within my app.config (The service does not seem to be called at all). I am new to angular and javascript and don't really know how to debug this properly (i am using firebug). I hope you can help me with some pointers and possibly a solution.

Current Code (trying to implement the "possible alternative" from the linked question:

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

$provide.service('RoutingService',function($routeParams){
    var name = $routeParams.name;
    if (name == '') {name = 'testfile'}

    var routeDef = {};
    routeDef.templateUrl = 'pages/' + name + '/' + name + '.html';
    routeDef.controller = name + 'Ctrl';
    return routeDef;
})

//Here i would like to get a hold of the returned routeDef object defined above.
$routeProvider.when('/name:', {
                        templateUrl: RoutingService.templateUrl, 
                        controller: RoutingService.controller
                    });

My previous attempt was to declare the Service like this via a provider:

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

ServiceModule.provider('routingService', function routingServiceProvider(){
      this.$get = [function RoutingServiceFactory(){

         return new RoutingService(); 
      }]
});

function RoutingService(){
    this.getUrlAndControllerFromRouteParams = function($routeParams){
        var name = $routeParams.name;

        var routeDef = {};
        routeDef.templateUrl = 'pages/' + name + '/' + name + '.html';
        routeDef.controller = name + 'Ctrl';
        return routeDef;
    }
}

and tried to call it like i would usually call a service in a controller (after adding the RoutingServiceModel to the dependencies of myApp of course). In both cases the templateUrl and controller are not set when i navigate to my views, so I guess i am missing some dependencies, or am not calling the service correctly.

Any ideas?

Answer 1

during the config phase, only providers can be injected (with the exception of the services in the AUTO module--$provide and $injector).

Please check this working demo: http://jsfiddle.net/nxbL66p2/

angular.module('Joy',[])
.config(function($provide) {
  $provide.provider('greeting', function() {
    this.$get = function() {
      return function(name) {
        alert("Hello, " + name);
      };
    };
  });
})
.controller('MyCtrl', ['$scope', 'greeting', function ($scope, greeting) {
    $scope.greet = function () {
        greeting('Joy');
    };
}]);

Simple HTML:

<div ng-app="Joy">
    <div ng-controller="MyCtrl">
        <div ng-click="greet()">Click to greet.</div>
    </div>
</div>

Reference: https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Answer 2

Angular's terminology is a bit of a mess, because 'service' and 'provider' may designate different things, depending on the context. According to the statement in the manual ,

An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

You can't inject services in config (except constant ), only service providers, and your RoutingService is inapplicable there.

Technically, you can get a service there with

RoutingServiceProvider.$get();

But it will make a separate instance (rather than singleton object), and the usage of $routeParams makes no sense at the moment when it is being called in config .

You can have templateUrl as function (see the manual ), while dynamic controller names aren't suitable for route configuration, define them within templates with ng-controller instead.