AngularJS Ошибка Неизвестный поставщик: $$ jqLiteProvider <- $$ jqLite <- $animateCss <- $uibModalStack <- $uibModal

Я пытаюсь создать простой модал, который всплывает и дает различные пункты меню. Это должно быть легко, и я следовал за Plunker для модалов на сайте начальной загрузки UI, но я получаю ошибку:

$ uibModal - неизвестный поставщик

Здесь angular код:

angular.module('billingModule', ['ngAnimate', 'ui.bootstrap']);

angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) {
    $scope.openStoreBilling = function () {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'storeBillingContent.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

angular.module('billingModule').controller('OfficeBillingCtrl', function ($scope, $uibModal) {
    $scope.openOfficeBilling = function () {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'officeBillingContent.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

angular.module('billingModule').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
    $scope.close = function () {
        $uibModalInstance.dismiss();
    }
});

Я прочитал документацию об ошибках и понял, что это ошибка зависимости. Но я просто не вижу, где я ошибся. У меня angular 1.4.8 и пользовательский интерфейс 0.14.3.

Вот сценарии, которые я добавил:

<head runat="server">
    <title>DP Billing</title>
    <link href="../CSS/bootstrap.css" rel="stylesheet" />
    <link href="../CSS/base.css" rel="stylesheet" />
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-animate.js"></script>
    <script src="../Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="../Scripts/billing-modals.js"></script>
</head>

Ответ 1

Вы должны ввести зависимость в свой контроллер, используя скобки в объявлении контроллера.

Что у вас есть:

angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) { ... });

Что вы должны иметь:

angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) { ... }]);

То же самое относится к другим контроллерам

Лучший стиль:

angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', StoreBillingCtrlFunc]);

StoreBillingCtrlFunc function ($scope, $uibModal) { 
  ... 
}

Я бы рекомендовал использовать стиль в качестве подхода, чтобы избежать синтаксических ошибок. John Papa Angular Руководство по стилю - хорошее начало.

Если вы используете этот стиль, становится ясно, что именно вы декларируете и что именно вы вводите. Не говоря уже о путанице в наличии массива, где все элементы, за исключением последнего, являются зависимыми, а последний - самим контроллером.

angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);

StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];

StoreBillingCtrlFunc function($scope, $uibModal){
    ...
}