Inject bootstrap in angularjs

Question

I looked over examples, but I couldn't find way to fix it. I am trying to inject 'ui.bootstrap' in my angular app. This is index.hml and my controller below:

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

This is my 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'}

After trying t inject i get errors:

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

I don't see any script tag with the ui-bootstrap library. Please read the get started. Also note that you are loading two versions of bootstrap's css files, you shouldn't do that. Besides that you should define the library as module dependency, not a controller one (angular.module("app", ["ui.bootstrap"]) — devqon
– devqon, Commented Jun 22, 2017 at 6:40
ui.bootstrap is a module. You need to add it to your app module's dependency list, not in your controller's $inject property — Phil
– Phil, Commented Jun 22, 2017 at 6:42

devqon · Accepted Answer · 2017-06-22 06:48:19Z

There are several things wrong with your code.

First of all, I don't see any script tag that references the ui-bootstrap js files. Add them to your head:

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

Secondly, the ui-bootstrap is a module, so you should add them to your module dependencies:

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

On a small note, you are loading in the bootstrap.css twice (also with different versions):

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

You should remove one of them.

I'd also lose jQuery and the bootstrap.js files. They are not required in an AngularJS app and may even cause conflicts

Collectives™ on Stack Overflow

Inject bootstrap in angularjs

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related