Uncaught Error: [$injector:modulerr] - AngularJS not working

Question

I am trying to implement Modal popup on an image click by using Bootstrap Lightbox, but I'm not able to achieve the same. I followed an example which has identical code as below. I have downloaded the Lightbox components(*.lightbox.js and *.lightbox.css) and placed in the directory where my below HTML file resides. Can someone please help me out in fixing this issue.

<!doctype html>
<html ng-app="myApp">
<head>
<title>Sandesh</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>  
<link rel="stylesheet" href="angular-bootstrap-lightbox.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />   
</head>
<body ng-controller="GalleryCtrl">
  <ul>
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
    </a>
  </li>
</ul>
<script>
var app = angular.module('myApp',['bootstrapLightbox'])
.controller('GalleryCtrl', function ($scope, Lightbox) {       
   $scope.images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal($scope.images, index);
   };
});
</script>
</body>      
</html>

try this var app = angular.module('myApp', ['bootstrapLightbox']) — Durgpal Singh, Jun 21 '16 at 05:54

score 0 · Answer 1 · answered Jun 21 '16 at 06:18

First, confirm that the name of the modu:le is "bootstrapLightbox". If it actually is, import it in the module via:

var app = angular.module('myApp',['bootstrapLightbox']);

Determine if you want to define controllers, services and directives against the variable, or against the methods:

var app = angular.module('myApp',['bootstrapLightbox']);
app.controller('GalleryCtrl', function ($scope, Lightbox) { 
  // etc
});

or

angular.module('myApp',['bootstrapLightbox'])
    .controller('GalleryCtrl', function ($scope, Lightbox) { 
      // etc
    });

Then, this maybe is less important, but a good tip to show: if you use some object only inside your JS code, without affecting directly the DOM, better use plain variables instead of declaring them on the $scope. Here, you use $scope to declare an array or "image" objects, but then only use it inside your lightbox instead of directly using it in the DOM.

So, I'd turn this...

   $scope.images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal($scope.images, index);
   };

... into this:

   var images = [
    {
     'url': '9RyWebbb.jpg',
     'thumbUrl': 'Thumb_9RyWebbb.jpg'
    }
   ];
   $scope.openLightboxModal = function (index) {
      Lightbox.openModal(images, index);
   };

I hope it was useful for you!

score 0 · Accepted Answer · answered Jun 22 '16 at 15:03

Problem solved on including additional files as mentioned below:

<!doctype html>
<html ng-app="myApp">
.....
<link rel="stylesheet" type="text/css" href="ui-bootstrap-csp.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
....
....
</html>

Also note that the order in which we include these files also matters; for example in this case the pop-up functionality doesn't work if we add 'ui-bootstrap-tpls.min.js' before 'ui-bootstrap.min.js'

Anyways thanks all for your valuable suggestions :)..cheers!

Uncaught Error: [$injector:modulerr] - AngularJS not working

2 Answers2