Uncaught Ошибка: [$ Инжектор: modulerr] пытается внедрить $ модуль

Question

Я пытаюсь использовать сервис модальный от углового бутстрапе:

<script src="bower_components/angular/angular.min.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>  
    <script src="js/index.js"></script> 

Мой контроллер приложения (index.js):

var app = angular.module('emaApp', ['ui.bootstrap']); 

app.controller('mainCtrl', ['$scope', '$http', '$modal', function($scope, $http, $modal) { 
    // ... 
}]); 

Однако, я не получаю за это сообщение об ошибке, и я не вижу, в чем проблема:

jquery.min.js:2 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=emaApp&p1=Error%3A%…host%3A8080%2Fweb%2Fbower_components%2Fangular%2Fangular.min.js%3A21%3A332) 
    at angular.js:38 
    at angular.js:4759 
    at q (angular.js:357) 
    at g (angular.js:4720) 
    at eb (angular.js:4642) 
    at c (angular.js:1838) 
    at Mc (angular.js:1859) 
    at pe (angular.js:1744) 
    at HTMLDocument.<anonymous> (angular.js:32977) 
    at j (jquery.min.js:2) 

Answer 1

Чтобы использовать модальный впрыскивать $uibModal

Ваш контроллер будет затем:

app.controller('mainCtrl', ['$scope', '$http', '$uibModal', function($scope, $http, $uibModal) { 
    // ... 
} 

Answer 2

Вы должны загрузить этот скрипт:

<script src="..path_to_script../ui-bootstrap-tpls.js"></script> 

Answer 3

Вы не закрыть контроллер правильно

Вместо этого

app.controller('mainCtrl', ['$scope', '$http', '$modal', function($scope, $http, $modal) { // ... }

использования этого

app.controller('mainCtrl', ['$scope', '$http', '$modal', function($scope, $http, $modal) { // ... }]);