Inject bootstrap in angularjs

Question

Ich schaute über Beispiele, aber ich konnte Weg nicht finden, es zu reparieren. Ich versuche, 'ui.bootstrap' in meine eckige App zu injizieren. Dies ist index.hml und mein Controller unter:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet"> 
    <link href="app-content/css/style.css" rel="stylesheet" /> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script> 
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="//code.angularjs.org/1.6.2/angular.min.js"></script> 
    <script src="//code.angularjs.org/1.6.2/angular-route.min.js"></script> 
    <script src="//code.angularjs.org/1.6.2/angular-cookies.min.js"></script> 
    <script src="app-content/js/jquery.matchHeight.js" type="text/javascript"></script> 
    <script src="/GuestBookProject/node_modules/angular-gravatar/build/angular-gravatar.js"></script> 

    <script src="app.js"></script> 
    <script src="app-services/authentication.service.js"></script> 
    <script src="app-services/flash.service.js"></script> 
    <script src="app-services/user.service.js"></script> 
    <script src="app-services/universal.service.js"></script> 
    <script src="navbar/navbar.controller.js"></script> 
    <script src="main/main.controller.js"></script> 
    <script src="review/review.controller.js"></script> 
    <script type="text/javascript" src="app-content/js/slick.min.js"></script> 

    <script src="https://use.fontawesome.com/be81ee5934.js"></script> 
    <script src="app-content/js/script.js"></script> 

Dies ist mein Controller:

(function() { 
'use strict'; 

angular.module('app').controller('MainController', MainController); 

MainController.$inject = ['$location', 'AuthenticationService', 'FlashService', 'UniversalService', '$scope', '$sce', '$rootScope','ui.bootstrap', 'ui.router']; 
function MainController($location, AuthenticationService, FlashService, UniversalService, $scope, $sce, $rootScop) { 
    var vm = this; 
    vm.allreviews = []; 
    vm.allusers=[]; 
    vm.allemails=[]; 
    vm.all=[]; 

    loadAllReviews(); 
    loadAllEmails(); 
    loadAllUsers(); 
    loadAll(); 

    $scope.rate = 1; 
    $scope.max = 10; 
    $scope.isReadonly = false; 

    $scope.hoveringOver = function(value) { 
     $scope.overStar = value; 
     $scope.percent = 100 * (value/$scope.max); 
    }; 

    $scope.ratingStates = [ 
{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'}, 
{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'}, 
{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'}, 
{stateOn: 'glyphicon-heart'}, 
{stateOff: 'glyphicon-off'} 

Nach t inject ich versucht, Fehler erhalten:

code.angularjs.org/1.6.2/angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=ui.bootstrapProvider%20%3C-%20ui.bootstrap%20%3C-%20MainController 
at https://code.angularjs.org/1.6.2/angular.min.js:6:425 
at https://code.angularjs.org/1.6.2/angular.min.js:44:374 
at Object.d [as get] (https://code.angularjs.org/1.6.2/angular.min.js:42:92) 
at https://code.angularjs.org/1.6.2/angular.min.js:44:436 
at d (https://code.angularjs.org/1.6.2/angular.min.js:42:92) 
at e (https://code.angularjs.org/1.6.2/angular.min.js:42:333) 
at Object.instantiate (https://code.angularjs.org/1.6.2/angular.min.js:43:240) 
at https://code.angularjs.org/1.6.2/angular.min.js:93:141 
at Object.link (https://code.angularjs.org/1.6.2/angular-route.min.js:7:322) 
at https://code.angularjs.org/1.6.2/angular.min.js:16:71 

Answer 1

Es gibt mehrere Dinge schief mit deinem Code.

Zunächst einmal, ich sehe keine Skript-Tag, das die ui-bootstrap Js-Dateien verweist. Fügen Sie sie zu Ihrem Kopf:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 

Zweitens, die ui-bootstrap ist ein Modul, so dass Sie sie zu Ihren Modulabhängigkeiten hinzufügen sollen:

angular.module("app", [ 
    "ui.bootstrap", 
    "ui.router" // the same goes for this one 
]); 

Auf einer kleine Notiz, Sie laden in der zweimal bootstrap.css (auch mit unterschiedlichen Versionen):

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

Sie sollen eine von ihnen entfernen.