在我的模塊中使用$ state時出現問題

Question

我試圖使用$ state服務來加載我定義的特定狀態。問題是，當我嘗試這樣做時，我會遇到各種各樣的錯誤。我讀過關於循環依賴，並試圖在計算器的其他線程提供諸如使用方法：

$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'); 
    } 
    ]);