AngularJS - UI路由器 - 无法使用决心我提供的数据控制器 [英] AngularJS - UI Router - Unable to use resolve to provide my controller with data

问题描述

我试图用注入加载的数据下决心对象到我的控制器，但我得到一个未知提供商错误：

  

未知提供商：configServiceProvider＆LT; - ConfigService的

下面是我的code：

StateProvider

  $ stateProvider
    .STATE（'指数'，{
        摘要：真实，
        网址：/指数，
        templateUrl：＃，
        解析：{
            的ConfigService：功能（）{
                返回{
                    helloText：欢迎测试小组中的
                };
            }
        }
    }）
 

控制器

 函数MainCtrl（$范围的ConfigService）{
    $ scope.config = ConfigService的;
};angular.module（'点'，['ui.router']）
    的.config（配置）
    .controller（'MainCtrl'，MainCtrl）
 

段

\r

\r

功能配置（$ stateProvider，$ urlRouterProvider）{\r
  $ urlRouterProvider.otherwise（＃）;\r
\r
  $ stateProvider\r
    .STATE（'指数'，{\r
      摘要：真实，\r
      网址：/指数，\r
      templateUrl：＃，\r
      解析：{\r
        的ConfigService：功能（）{\r
          返回{\r
            helloText：欢迎测试小组中的\r
          };\r
        }\r
      }\r
    }）\r
};\r
\r
功能MainCtrl（$范围的ConfigService）{\r
  $ scope.config = ConfigService的;\r
};\r
\r
（函数（）{\r
  angular.module（点，[\r
      ui.router'，//路由\r
    ]）\r
    的.config（配置）\r
    .RUN（函数（$ rootScope，$州）{\r
      $ rootScope $状态= $状态。\r
    }）\r
    .controller（'MainCtrl'，MainCtrl）\r
}）（）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js\"></script>\r
＆LT; D​​IV NG-应用程序=点＆GT;\r
  ＆LT; D​​IV NG控制器=MainCtrl为主＆GT;\r
    ＆LT;格UI的视图＆gt;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

这就像我的决心对象被定义我的控制器加载后...我是新来的angularJS，我觉得我肯定失去了一些东西非常明显的。

感谢。

解决方案

的 NG-控制器和 UI-路由器状态决心是不相容的。这就是为什么你的另一个世界MainCtrl'不能与UI的路由器定义下决心/服务注入。

但有一个简单的方法，只是将其转换成状态：

  //全新根状态，提供根（index.html的）东西
//不影响URL或州的名字
.STATE（'根'，{
    摘要：真实，
    模板：'＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;'，//一个儿童国家目标
    解析：{
        的ConfigService：功能（）{//准备在层次中的任何状态
            返回{
                helloText：欢迎测试小组中的
            };
        }
    }，
    //全新的路线，以MainCtrl，这是UI的路由器的一部分，现在
    控制器：'MainCtrl'，
}）
 

原来的根的状态索引，现在被置于一个真实的，但是抽象，网址中不影响状态 - 根

  //调整状态
.STATE（索引，{//将注入父模板
    父：根
    摘要：真实，
    网址：/指数，
    templateUrl：...
    //解决不需要的，已经做了根
    //决心：{}
}）
 

调整的index.html

 ＆LT; D​​IV NG-应用程序=点＆GT;
  ＆LT;格UI视图=＆GT;＆LT; / DIV＆GT; //这里将被注入根州，MainCtrl
  //＆LT; D​​IV NG控制器=MainCtrl为主＆GT;
  //＆LT;格UI的视图＆gt;
  //＆LT; / DIV＆GT;
  //＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

也许还要检查 - 嵌套状态或观看与UI的路由器leftbar布局

I am trying to inject a resolve object with loaded data into my controller but I get an Unknown Provider error :

Unknown provider: configServiceProvider <- configService

Here is my code:

StateProvider

$stateProvider
    .state('index', {
        abstract: true,
        url: "/index",
        templateUrl: "#",
        resolve: {                
            configService: function () {
                return {
                    "helloText": "Welcome in Test Panel"
                };
            }
        }
    })

Controller

function MainCtrl($scope, configService) {
    $scope.config = configService;
};

angular.module('dot', ['ui.router'])
    .config(config)
    .controller('MainCtrl', MainCtrl)

Snippet

function config($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("#");

  $stateProvider
    .state('index', {
      abstract: true,
      url: "/index",
      templateUrl: "#",
      resolve: {
        configService: function() {
          return {
            "helloText": "Welcome in Test Panel"
          };
        }
      }
    })
};

function MainCtrl($scope, configService) {
  $scope.config = configService;
};

(function() {
  angular.module('dot', [
      'ui.router', // Routing
    ])
    .config(config)
    .run(function($rootScope, $state) {
      $rootScope.$state = $state;
    })
    .controller('MainCtrl', MainCtrl)
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<div ng-app="dot">
  <div ng-controller="MainCtrl as main">
    <div ui-view>
    </div>
  </div>
</div>

It's like my resolve object is defined after my controller has loaded... I'm new to angularJS and I feel like I am definitely missing something very obvious.

Thanks.

解决方案

The ng-controller and UI-Router state resolve are incompatible. That's why your "another-world" 'MainCtrl' cannot be injected with a resolve/service defined in UI-Router.

But there is a simple way, just convert it into state:

// brand new root state, providing root (index.html) stuff
// not effecting url or state names
.state('root', {
    abstract: true,
    template: '<div ui-view=""></div>', // a target for child state
    resolve: {                
        configService: function () {    // ready for any state in hierarchy
            return {
                "helloText": "Welcome in Test Panel"
            };
        }
    },
    // brand new line, with 'MainCtrl', which is part of UI-Router now
    controller: 'MainCtrl',
})

The original root state 'index' will now be placed inside of a real, but abstract, url not effecting state - 'root'

// adjusted state
.state('index', {    // will be injected into parent template
    parent: 'root'
    abstract: true,
    url: "/index",
    templateUrl: ...,
    // resolve not needed, already done in root
    //resolve: { }
})

Adjusted index.html

<div ng-app="dot">
  <div ui-view="></div> // here will be injected root state, with 'MainCtrl'
  //<div ng-controller="MainCtrl as main">
  //  <div ui-view>
  //  </div>
  //</div>

</div>

Maybe also check - Nested states or views for layout with leftbar in ui-router?

这篇关于AngularJS - UI路由器 - 无法使用决心我提供的数据控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！