Search code examples
angularjsbootstrap-lightboxangularbootstrap-lightbox

angular bootstrap lightbox throws unknown provider error


Am newbie to AngularJS and trying to learn stuffs. I am trying to create a gallery with angular-bootstrap-lightbox and I've included all the necessary dependencies required for the project. Dependencies included are:

<link href="css/angular-bootstrap-lightbox.min.css" rel="stylesheet" />
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-1.3.2.min.js"></script>
<script src="js/angular-bootstrap-lightbox.min.js"></script>
<script src="js/script.js"></script>

Below is my script.js file

angular.module('home', ["ngRoute", "bootstrapLightbox"]).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/home', { templateUrl: 'partials/home.html' }).
            when('/about', { templateUrl: 'partials/about.html' }).
            when('/gallery', { templateUrl: 'partials/gallery.html', controller: "galleryController" }).
            otherwise({ redirectTo: '/home', templateUrl: 'partials/home.html' });
        $locationProvider.html5Mode(true);
    }).controller("homeController", function ($scope, $http, $route) {
        //home controller stuffs
    }).controller('indexController', function ($scope, $location) {
        $scope.isActive = function (route) {
            return route === $location.path();
        }
    }).controller('galleryController', function ($scope, LightBox) {
        $scope.images = [
        {
            'url': 'images/g1.jpg',
            'caption': 'Optional caption',
            'thumbUrl': 'images/g1.jpg' // used only for this example
        },
        {
            'url': 'images/g1.jpg',
            'thumbUrl': 'images/g1.jpg'
        },
        {
            'url': 'images/g1.jpg',
            'thumbUrl': 'images/g1.jpg'
        }
        ];

        $scope.openLightboxModal = function (index) {
            Lightbox.openModal($scope.images, index);
        };
    });

But it always throws unknown provider error whenever I visit gallery page and this error will be pointing to Lightbox parameter mentioned along with $scope in galleryController. Not sure what is the dependency here. But it does not recognize LightBox. I've followed complete steps mentioned there but couldn't quite achieve this right. Any help appreciated.

Update

Below is the error am getting.

angular.js:13424 Error: [$injector:unpr] Unknown provider: LightBoxProvider <- LightBox <- galleryController
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=LightBoxProvider%20%3C-%20LightBox%20%3C-%20galleryController
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:68:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4418:19
    at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4423:45
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4571:39)
    at injectionArgs (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4595:58)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:4637:18)
    at $controller (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:10042:28)
    at A.link (http://localhost:63211/js/angular-route.min.js:18:216)
    at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js:9623:9) <ng-view class="ng-scope">(anonymous function) @ angular.js:13424
http://localhost:63211/gallery Failed to load resource: the server responded with a status of 404 (Not Found)

Solution

  • You need to change the dependency injected into galleryController from LightBox to Lightbox. (B is not capitalized in Lightbox.) That solves the problem.