Angular "Unkown Provider" - 如何在路由提供程序配置中使用工厂?



与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"
          })
      })
;

svcState应该是提供商而不是服务。因为在配置阶段将无法访问服务/工厂。您需要将svcState的实现更改为提供商,以便在Angular的Config Block中可用。

提供商实施后,您可以在Config Block中使用svcStateProvider注入该提供商。

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

查看此答案要了解有关提供商的更多信息

这是我更改的:

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

最新更新