How inject $stateProvider in angular application?

I try to use angular-ui, and try to inject $stateProvider:


<!DOCTYPE html>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="test/appModule.js"></script>
    <div ng-app="appModule">
        <div ng-controller="appController">


js (test/appModule.js)

var module = angular.module("appModule", ['ui.router']);

module.controller('appController', ['$scope', '$stateProvider',
    function ($scope, $stateProvider) {
        $ = new Date();

stack trace

Error: Unknown provider: $stateProviderProvider <- $stateProvider
    at Error (native)

If I remove $stateProvider and ui.router with comments everything will work:

var module = angular.module("appModule"/*, ['ui.router']*/);
module.controller('appController', ['$scope'/*, '$stateProvider'*/,
    function ($scope, $stateProvider) {
        $ = new Date();

So the problem with injection $stateProvider any ideas about resolving?

P.S. I have tried ui sample it works, but I cannot figure out why mine does not.



When using it in a controller you have to use $state:

angular.module("appModule", ['ui.router']).controller('appController', ['$scope', '$state', function ($scope, $state) {
    $ = new Date();

You can only use the state provider in the config, for example:

angular.module('appModule').config(['$stateProvider', function($stateProvider){
    /* do w/e with state provider */
var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router']);

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

 // For any unmatched url, redirect to /

 // Now set up the states
  .state('login', {
   url: "/",
   controller: "loginCtrl",
   templateUrl: "partials/login.html"


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.