在我的模块中使用 $state 时出现问题

Question

我正在尝试使用 $state 服务来加载我定义的特定状态。问题是我在尝试这样做时遇到了各种错误。我已经阅读了有关循环依赖的信息，还尝试了 stackoverflow 其他线程中提供的方法，例如使用：

$injector.get($state)

但它也失败了，我收到了未知的提供者 $state 错误。希望有人可以帮助我...

这是我的代码：

'use strict';

angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])

    .config(['$stateProvider', '$translateProvider', '$state', 
             function($stateProvider, $translateProvider, $state){

        $translateProvider.useUrlLoader("home/mensajes");
        $translateProvider.useStorage("UrlLanguageStorage");
        $translateProvider.preferredLanguage("euk");
        $translateProvider.fallbackLanguage("en");

        $stateProvider
                .state("introduccion", {
                    url : "/prueba",
                    templateUrl : "resources/js/home/views/introduccion.html",
                    controller : "HomeController"
                });

        $state.go('introduccion');
    }]);

'use strict';

angular.module("home.controllers", ['home.services'])

    .controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {

              probar();

              function probar(){
                  $scope.texto = HomeService.prueba().get();
              }
    }]);

'use strict';

angular.module('home.services',['ngResource'])

    .factory('HomeService',function($resource){

        return {

            prueba: function() {
                return $resource('http://192.168.11.6:8080/web/home/prueba');
            }
        };
    });

'use strict';

angular.module('urlLanguageStorage',['ngResource'])

    .factory('UrlLanguageStorage', ['$location',function($location){

        return {
            put : function (name, value) {},
            get : function (name) {
                return $location.search()['lang']
            }
        };
    }]);

我得到的错误如下：

未能实例化模块主页，原因是：错误：[$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24state 在错误（本机） 在https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412 在https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84 在 d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344) 在 e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78) 在 Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163) 在 d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321) 在https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445 在 q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355) 在 g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222

Answer 1

您与$stateProvider 和$state 混淆了。

$stateProvider 是 Provider，$state 是 Service。她们不一样。简短回答：您在config 阶段使用$stateProvider，并在您的控制器中使用$stateProvider。

您的错误发生是因为您在.config 中注入了$state 服务，这是错误的：

.config(['$stateProvider', '$translateProvider', '$state'

删除$state就没事了：

angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
  //take out $state from config phase
  .config(['$stateProvider', '$translateProvider', '$state',
    function($stateProvider, $translateProvider, $state) {

      $translateProvider.useUrlLoader("home/mensajes");
      $translateProvider.useStorage("UrlLanguageStorage");
      $translateProvider.preferredLanguage("euk");
      $translateProvider.fallbackLanguage("en");

      $stateProvider
        .state("introduccion", {
          url: "/prueba",
          templateUrl: "resources/js/home/views/introduccion.html",
          controller: "HomeController"
        });
      //remove this line, set this in controller
      //$state.go('introduccion');
    }
  ]);