UI路由器用于将服务注入子状态的未知提供程序解析

时间:2014-10-01 07:28:07

标签: angularjs angular-ui-router

在将服务注入子状态解析功能时获得未知提供程序。但如果在父状态中定义了一个解决方案,它就可以正常工作。下面是一些示例代码:

我定义了一个服务模块

angular.module('services', [])
  .factory('myService', function() {
    // my service here
  })

并初始化应用

var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 

    $urlRouterProvider) {
      $stateProvider.state('wizard', {
        url: '/wizard',
        abstract: true
      })
      .state('wizard.step1', {
        url: '/step1',
        templateUrl: ... ,
        resolve: {
          name: function(myService) {
            // do something with mySerice
          }
        },
        controller: function(name) {
          // controller codes here
        }
      })
    }]);

我在wizard.step1解析中收到错误未知提供程序抱怨myService的错误。但是如果我在父状态中添加一个随机解析,比如

$stateProvider.state('wizard', {
            url: '/wizard',
            abstract: true,
            resolve: {
              a: function() { return 1; }
            }
          })

然后它可以正常工作。不知道这里发生了什么?

3 个答案:

答案 0 :(得分:2)

在你的控制器中你必须注入你的服务MyService,所以定义类似这样的东西

  .state('wizard.step1', {
    url: '/step1',
    templateUrl: ... ,
    resolve: {
      name: ['myService', function(myService) {
        // do something with mySerice
      }]
    },
    controller: ['name', function(name) {
      // controller codes here
    }]
  })

答案 1 :(得分:1)

您必须在配置功能中注入您的服务:

var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', 'myService',
          function($stateProvider, $urlRouterProvider, myService) {
...

另一种方法是将您的解析代码嵌入到服务中并直接分配服务:

app.config(['$stateProvider', '$urlRouterProvider' ,'mySuperService',function($stateProvider, 

    $urlRouterProvider, mySuperService) {
    ...
    resolve: {
     name: mySuperService()
    }


.constant('mySuperService', function() {

   var serv= function(){
      // your code
   }
   return serv;
}

答案 2 :(得分:-1)

我得到了同样的错误。试试这段代码。它工作得很好......

  <script type="text/javascript">
            var myApp = angular.module('myApp', ['ui.router']);
            myApp.config(['$stateProvider','$urlRouterProvider',
                function ($stateProvider, $urlRouterProvider) { 
                    $stateProvider.
                    state('Page1', {
                        url: '/Page1',
                        templateUrl: 'Page1.html'
                    }).
                     state('Page2', {
                         url: '/Page2',
                         templateUrl: 'Page2.html'
                     })
                }]);
        </script>