Angular “Unkown Provider” - how to use a factory w

Question

While playing around with Angular I try to understand better how to use factory, services, constants, routing and other core concepts. So I build a simple demo app with node, express, jade and angular.

Now I would like to use a value inside the routeProvider configuration. I created a constant, this works fine. To make it more flexible for future usage I build a factory then, but this fails with "unknown provider". Is this a question of instantiation sequence in Angular? Why I cannot inject the factory into the .config section? Before I tried the same with a service instead of a factory, with the same error. Hopefully I didn't make a simple typo or syntax error, so far I didn't find any.

angular
  .module('main', [
    'ngRoute'
  ])

  .constant('cApp', {
      'defaultPath': '/home'
  })

  .factory('svcState', function(){
      var appState;

      function getState(){
          return appState;
      }

      function init() {
          appState='/home';
      }

      init();

      return{
          getState: getState
      };
  })

  .config(function($routeProvider, svcState, cApp){

      $routeProvider
          .when('/home', {
              templateUrl: "partials/home"
          })
          .when('/info', {
              templateUrl: "partials/info"
          })
          .otherwise({
              //redirectTo: cApp.defaultPath  // this works fine
              redirectTo: svcState.getState   // this fails with "Error: [$injector:unpr] Unknown provider: svcState"
          })

      })

;

Answer 1

svcState should be provider rather than service. Because service/factory won't be accessible inside config phase. You need to change the implementation of svcState to provider so that it will be available in config block of angular.

After provider implementation you could inject that provider using svcStateProvider in config block.

.config(function($routeProvider, svcStateProvider, cApp){

  $routeProvider
      .when('/home', {
          templateUrl: "partials/home"
      })
      .when('/info', {
          templateUrl: "partials/info"
      })
      .otherwise({
          redirectTo: svcStateProvider.getState() //<--change herer
      })

  }) 

Look at this answer to know more about provider

Answer 2

Here is what I changed:

angular
    .module('main', [
        'ngRoute'
    ])

    .provider('appState', function(){
        var appState;

        this.setState = function(newState) {
            appState = newState;
        };

        this.getState = function() {
            return appState;
        };

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

        function init() {appState='/home';}
        init();

    })
    .config(function($routeProvider, appStateProvider){

        $routeProvider
            .when('/home', {
                templateUrl: "partials/home"
            })
            .when('/info', {
                templateUrl: "partials/info"
            })
            .otherwise({
                redirectTo: appStateProvider.getState()
            })

    })

;