私のモジュールで$ stateを使用すると問題が発生する

Question

$ stateサービスを使用して定義された特定の状態をロードしようとしています。問題は、私がそれをしようとするときにすべての種類のエラーを取得しているということです。私は循環依存関係について読み、また使用して同じようにStackOverflowの他のスレッドで提供された方法を試してみた：

$injector.get($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'] 
      } 
     }; 
    }]); 

私は取得していますエラーは、次のいずれかです。

Failed to instantiate module home due to: Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/ $injector/unpr?p0=%24state at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412 at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344) at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78) at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163) at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445 at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222

Answer 1

あなたが$stateProviderと$stateと混同します。

$stateProviderはProviderであり、$stateはServiceである。彼らは同じではありません。短い答え：$stateProviderをconfigフェーズで使用し、コントローラに$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'); 
    } 
    ]);