angularjs ui-router: Unknown provider: $stateProvider

Question

I'm having troubles using the ui-router plugin of AngularJS:

angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {  
    $stateProvider
        .state('mandats', {
            url: '/domiciliations/mandats',
            templateUrl: 'domiciliations/views/mandats.html',
            controller: 'mandatsCtrl'
        });
}])

I then get this error at startup:

Unknown provider: $stateProvider

I've included the javascripts in this order:

<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>

What could be the issue ?

[EDIT]

I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?

Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.

Answer 1

The following piece of code should do the job. At least in my case, so let me know if it works or not.

angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {  
    $stateProvider
        .state('mandats', {
            url: '/domiciliations/mandats',
            templateUrl: 'domiciliations/views/mandats.html',
            controller: 'mandatsCtrl'
        });
}])

Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.

Answer 2

You just need to include ui-router module as dependency.

like following

angular
    .module('myApp', ["ui.router"])
    .config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) { 
        ...
    }]);

Answer 3

Including the angular-ui v0.0.2 will fix the problem.