Angular“Unkown Provider” - 如何在 routeProvider 配置中使用工厂？

Question

在使用 Angular 时，我试图更好地理解如何使用工厂、服务、常量、路由和其他核心概念。所以我用 node、express、jade 和 angular 构建了一个简单的演示应用程序。

现在我想在 routeProvider 配置中使用一个值。我创建了一个常数，这很好用。为了使其更灵活以供将来使用，我随后建立了一个工厂，但这因“未知提供者”而失败。这是Angular中的实例化序列问题吗？为什么我不能将工厂注入.config 部分？在我尝试使用服务而不是工厂之前，同样的错误。希望我没有犯简单的拼写错误或语法错误，到目前为止我还没有发现任何错误。

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 应该是提供者而不是服务。因为在配置阶段将无法访问服务/工厂。您需要将svcState 的实现更改为provider，以便它可以在angular 的配置块中使用。

在提供程序实施后，您可以在配置块中使用svcStateProvider 注入该提供程序。

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

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

  }) 

查看this answer 了解更多关于提供者的信息

Answer 2

这是我改变的：

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()
            })

    })

;