Angular-Carousel Module fails to load

Question

I´m trying to implement the image gallery "angular-carousel" on my site. But Angular throws an error, when loading carousel:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

I'm running on Node and Express and I used a CDN Source for angular-carousel:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/0.3.12/angular-carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/0.3.12/angular-carousel.js"></script>

This is where I´d like to place the carousel:

<ul rn-carousel class="image">
    <li ng-repeat="x in img">
        <img ng-src="/uploads/{{project._id}}/{{x}}"/>
    </li>
</ul>

And here´s my Controller part:

var app = angular.module('myApp', ['ngRoute', 'angular-carousel']);
    app.controller('ProjectController',  function($scope,$http){
        var url = window.location.pathname;
        var id = url.substring(url.lastIndexOf('/') + 1);
        $http.get('/projects_view/'+id).success(function(data){ 
            $scope.project = data;
        });
        $http.get('/getpics/'+id).success(function (files){
            $scope.img = files;             
        });         
    });

Without carousel image loading works perfectly. Hoping for help :)

Yes this solved the error! But still no gallery there!? Have I implemented it wrong? — Wandkleister, Aug 08 '15 at 13:31

score 2 · Accepted Answer · answered Aug 08 '15 at 13:31

2

You missed to angular-touch.js because while creating angular-carousel module it needs ng-touch dependency, That's why while creating a angular-carousel module it search for ngTouch module. And which is not available there, So angular throws an $injector/modulerr error.

Code

angular.module('angular-carousel', [
    'ngTouch',
    'angular-carousel.shifty'
]);

Above code link here in angular-carousel.js API.

answered Aug 08 '15 at 13:31

Pankaj Parkar

134,766
23
234
299

Thank you for solving the error! Any idea why i still can`t see the carousel? No error throwing anymore, but no images. – Wandkleister Aug 08 '15 at 13:35
@Wandkleister does `files` contains an array of files collection? – Pankaj Parkar Aug 08 '15 at 13:38
It is an array of filenames, which i use in ng-repeat. – Wandkleister Aug 08 '15 at 13:40
It worked to list all the images in one folder. But carousel needs an array of files not paths, am I right? Do you have an idea for a workaround? – Wandkleister Aug 08 '15 at 13:44
1

@Wandkleister you are correct, you need to have return all of `fileName` that would apply on each element by looping on it like `$scope.img = ["a.jpg", "b.jpg"];` – Pankaj Parkar Aug 08 '15 at 13:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/85507/discussion-between-wandkleister-and-pankaj-parkar). – Wandkleister Aug 08 '15 at 13:46

Angular-Carousel Module fails to load

1 Answers1