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 :)
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.