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

时间:2015-05-13 07:41:18

标签: angularjs angularjs-service ngroute angularjs-provider

在玩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"
          })

      })

;

2 个答案:

答案 0 :(得分:2)

svcState应该是提供者而不是服务。因为在配置阶段内无法访问服务/工厂。您需要将svcState的实现更改为提供程序,以便它可以在有角度的配置块中使用。

在提供程序实现之后,您可以在配置块中使用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以了解有关提供商的更多信息

答案 1 :(得分:0)

以下是我改变的内容:

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

    })

;