Unknown Provider error despite other controllers and services working

Question

This is what my app.js looks like where I have defined the states, controller and urls for all the templates:

angular.module('starter', ['ionic', 'starter.controllers','starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    ionic.Platform.fullScreen()
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      // StatusBar.styleDefault();
      StatusBar.hide();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/rubyonic/menu.html",
    controller: 'AppCtrl',
    reload: true
  })

  // .state('login', {
  //   url: "/login",
  //   templateUrl: "templates/rubyonic/login.html",
  //   controller: 'AppCtrl'
  // })

  .state('login', {
        url: '/login',
        templateUrl: "templates/rubyonic/login.html",
        controller: 'LoginCtrl'
    })


  .state('app.alerts', {
    url: "/alerts",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/alerts.html",
        controller: 'AppCtrl'
      }
    }
  })

   .state('app.studies', {
    url: "/studies",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/studies.html",
        controller: 'AppCtrl',
        reload: true
      }
    }
  })

   .state('app.study_collections', {
    url: "/studies/:studynodeRef",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/overview.html",
        controller: 'AppCtrl',
        reload: true
      }
    }
  })



  .state('app.rank-charts', {
    url: "/rank_charts",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/rank_charts.html",
        controller: 'AppCtrl'
      }
    }
  })

  // .state('app.overview', {
  //   url: "/overview",
  //   views: {
  //     'menuContent': {
  //       templateUrl: "templates/rubyonic/overview.html"
  //     }
  //   }
  // })

  .state('app.claim-details', {
    url: "/claim-details",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/claim_details.html",
        controller: 'AppCtrl'
      }
    }
  })

  .state('app.scorecards', {
    url: "/scorecards",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/scorecards.html",
        controller: 'AppCtrl'
      }
    }
  })

  .state('app.fnol', {
    url: "/fnol",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/fnol.html",
        controller: 'AppCtrl'
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');
})

Here is my Login Controller:

angular.module('starter.controllers', ['highcharts-ng'])

.controller('LoginCtrl', ['$scope','$stateProvider','UserService', function($scope,$stateProvider,UserService) {  

$scope.credentials = {
    username: localStorage.getItem('username') || '',
    password: localStorage.getItem('password') || ''
};

$scope.login = function(credentails) {
    UserService.login(credentails).then(function(user) {
        $scope.loginMessage = false;
        localStorage.setItem('username', $scope.credentials.username);
        localStorage.setItem('password', $scope.credentials.password);
        $state.go('app.studies') ;

    }
     , 
    function(data) {
        $scope.loginMessage = 'Username/Password Invalid';
    }
    );
}

if($scope.credentials.username && $scope.credentials.password){
    $scope.login($scope.credentials);
}

}])

and here is my UserService which is injected into the login controller:

angular.module('starter.services', [])

.factory('UserService', ['$rootScope', '$q', '$http', function($rootScope, $q, $http) {

    return {

        login: function(credentails) {
            var deffered = $q.defer();

            $http({
                method: 'post',
                url: 'http://localhost/platform/j_spring_security_check',
                params: {
                    'j_username': credentails.username,
                    'j_password': credentails.password
                }
            }).success(function(user, status, headers, config) {
                userLoggedIn = true;
                // $location.path('#/app/studies');
                localStorage.setItem('lastLoginTime', new Date().getTime());
                $rootScope.$broadcast('USER_LOGIN_SUCCESS');
                deffered.resolve(user);
            }).error(function(data, status, headers, config){
                $rootScope.$broadcast('USER_LOGIN_FAILED');
                deffered.reject(data);
            });

            return deffered.promise;
        },


        isUserLoggedIn: function() {
            return userLoggedIn;
        }

    };
}])

When I run my app I get the: Error: [$injector:unpr] Unknown provider: $stateProviderProvider <- $stateProvider <- LoginCtrl in my console. I know my controller and services are setup correctly because the other templates along with their controllers work. I would really appreciate if someone could help me fix this.

Answer 1

The reason behind you are getting error is, inside LoginCtrl you are trying to inject the Provider which is $stateProvider, Basically provider are not available inside the controller, They are accessible as service name,If would be $state instead of $stateProvider inside your controller

controller('LoginCtrl', ['$scope','$stateProvider','UserService', 

Should be

controller('LoginCtrl', ['$scope','$state','UserService',