Angularjs ui-router: Неизвестный поставщик: $stateProvider

У меня возникают проблемы с использованием плагина ui-router для AngularJS:

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

Затем я получаю эту ошибку при запуске:

Unknown provider: $stateProvider

Я включил javascripts в следующем порядке:

<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>

В чем может быть проблема?

[EDIT]

Я избавился от сообщения об ошибке, добавив "ui.compat" в качестве зависимости myApp. Я видел это в примере кода ui-router, но нигде в документации. О чем это?

Тем не менее, он все еще не работает. Я добавил ui-view в div в файле индекса приложения. Но страница остается пустой.

ОТВЕТЫ

Ответ 1

Следующий фрагмент кода должен выполнять эту работу. По крайней мере, в моем случае, так что дайте мне знать, работает ли это или нет.

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

Теперь о вашей проблеме с пустой страницей. Конечно, URL-адрес, который у вас есть в браузере, не соответствует определенному в вашем состоянии. Попробуйте "#/domiciliations/mandats" в своем браузере и посмотрите, будет ли представление отображаться соответствующим образом. Не то, чтобы вы, абсолютный url, были чем-то похожими с http://[HOST_NAME]/home.html#/domiciliations/mandats.

Ответ 2

Вам просто нужно включить модуль ui-router в качестве зависимости.

как показано ниже

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