14

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.

2 Answers 2

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 */
})];
5
  • Hi @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, 2014 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, 2014 at 19:59
  • Thank you, wasted a lot of time trying to figure this out!
    – Richard
    Jan 1, 2015 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, 2015 at 7: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: stackoverflow.com/questions/15663019/…
    – Jon Snow
    Aug 24, 2015 at 7:58
0
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"
 })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.