Issue when using $state in my module

Question

i'm trying to use the $state service to load a particular state i defined. The problem is that i'm getting all kind of errors when trying to do it. I've read about the circular dependencies and also tried the methods provided in other threads of stackoverflow like using:

$injector.get($state)

But it also fails, i'm getting unknown provider $state error. Hope someone can help me...

this is my code:

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

The error i'm getting is the following one:

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

You confused with $stateProvider and $state.

$stateProvider is a Provider, and $state is a Service. They are not the same. Short answer: you use $stateProvider at config phase, and use $stateProvider in your controller.

Your error happens because you injected $state service in your .config, which is wrong:

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

Remove the $state and you are okay:

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