How inject $stateProvider in angular application?

Question

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

html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
    <script src="test/appModule.js"></script>
</head>
<body>
    <div ng-app="appModule">
        <div ng-controller="appController">
            {{date}}
        </div>

    </div>
</body>
</html>

js (test/appModule.js)

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

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

stack trace

Error: Unknown provider: $stateProviderProvider <- $stateProvider
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:236
...

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) {
        $scope.date = 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.

Jon Snow · Accepted Answer · 2015-08-05T07:11:50.710

33

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

angular.module("appModule", ['ui.router']).controller('appController', ['$scope', '$state', function ($scope, $state) {
    $scope.date = 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 */
})];

edited Aug 05 '15 at 07:11

answered May 29 '14 at 10:22

Jon Snow

3,682
4
30
51

Hi @http://stackoverflow.com/users/2204158/jon-snow , how about '$urlRouterProvider'? can I use that in the controller or that one should also be only used in the config? If that's the case what should I use instead? Many thanks in advance. – Zardaloop Oct 21 '14 at 15:42
@FarzanMajdani depends on what you want to do, you could describe your case in a new question. Otherwise `$urlRouterProvider` can only be used in the config, but you can inject `$urlRouter` into controllers. NOTE that `$urlRouter` doesn't have all the methods from `$urlRouterProvider`. – Jon Snow Oct 21 '14 at 19:59
Thank you, wasted a lot of time trying to figure this out! – Richard Jan 01 '15 at 18:26
@JonSnow: My question is: why is it like that? And what part of the ui-router code makes this distinction between module config and e.g. controllers? – Oliver Aug 24 '15 at 07:52
This isn't exclusively a ui-router thing, its how Angular modules operate in general. You have configuration that's only available before the app has been bootstrapped (in this case `$stateProvider` that you use to register states) and configuration that you can do afterwards. I'd imagine it would be a mess if you were allowed to register new routes after app has been bootstrapped. I think this question does a better job at explaining it than me: http://stackoverflow.com/questions/15663019/angular-js-why-the-difference-between-module-config-injection-and-controller-in – Jon Snow Aug 24 '15 at 07:58

score 0 · Answer 2 · answered May 29 '14 at 10:30

var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router']);

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




 // For any unmatched url, redirect to /
 $urlRouterProvider.otherwise("/");

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

How inject $stateProvider in angular application?

2 Answers2

Linked