Why module 'ui.bootstrap' is not available?

angularjs twitter-bootstrap angular-ui-bootstrap

12,937

Solution 1

Make sure ui-bootstrap-1.3.3 is loaded correctly in your app.

Please find working plunker below:

http://plnkr.co/edit/evG4XQ9ih9Cx0d1WF6YU?p=preview

Solution 2

you are missing ui-bootstrap-tpls.js file.

add this file in your page.

see example working plunkr

12,937

Author by

Vikas Prasad

I try to do things that I don't know how to do!!

Updated on June 24, 2022

Comments

Vikas Prasad almost 2 years

I am trying this simple tutorial to try UI Bootstrap: https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
But I am running into two problems.

SyntaxError: expected expression, got '<' at ui-bootstrap-1.3.3.js:5:0

This is the first problem. I have not edited anything in the file, yet it says unexpected token for the very first line <!DOCTYPE html>

And the other one is as below:

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I saw answers to all the related questions, some of them suggesting to include the other dependencies while other suggesting to make sure of the order of the dependencies. Tried everything but no joy.

Below is my html and js code. Please have a look
HTML

<html>
<head>
<style type="text/css"> 
            @import "css/bootstrap.css";
            @import "css/style.css";
        </style>
        <script src="js/angular.js"></script>
        <script src="js/angular-animate.js"></script>
        <script src="js/angular-touch.js"></script>
        <script src="js/ui-bootstrap-1.3.3.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="mainController">

  <div class="text-center">
    <p>Example of Angular and the normal Bootstrap JavaScript components</p>
    <p class="text-success">This will work</p>
  </div>

  <h2>Buttons</h2>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
      Breakfast
    </label>
    <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
      Lunch
    </label>
    <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
      Dinner
    </label>
  </div>

  <pre><code>{{ bigData | json }}</code></pre>

  <h2>Collapse</h2>

  <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
    Toggle Panel
  </a>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div collapse="isCollapsed">
      <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <pre><code>{{ isCollapsed }}</code></pre>

</div>
</body>
</html>

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])

.controller('mainController', function($scope) {

  // BUTTONS ======================

  // define some random object
  $scope.bigData = {};

  $scope.bigData.breakfast = false;
  $scope.bigData.lunch = false;
  $scope.bigData.dinner = false;

  // COLLAPSE =====================
  $scope.isCollapsed = false;

});

Not sure what's going wrong.

Edit Version details area as follows
Bootstrap v3.3.6

angular
angular-animate
angular-touch all are having version AngularJS v1.5.3