nicht erfasste Fehler: [$ Injektor: modulerr] versuchen $ module

Question

Ich versuche, die modal Service von Winkel Bootstrap zu injizieren zu verwenden:

Controller

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

Meine app (index.js):

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

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

ich bin jedoch nicht über diese Fehlermeldung bekommen, und ich sehe nicht, was das Problem ist:

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

Um die modale injizieren verwenden die $uibModal

Ihr Controller wäre dann:

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

Answer 2

Sie haben dieses Skript zu laden:

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

Answer 3

Sie den Controller nicht

Anstelle dieser

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

Verwendung dieses

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

richtig geschlossen hat