I am brand new to AngularJS and I am attempting to get a slider to function that I found in an online example. Currently, the slider displays on the desired page (gallery.html) and the automatic image change is working fine. However, when I try to click on the next/previous button, it redirects me to a random empty page.
I suspect the issue lies with the hrefs on the arrows, but I am unsure how to proceed from here. Additionally, is my slider directive correctly placed at the top of gallery.html?
File structure:
Photography
- bower_components
- css
----- stylemain.css
- img
----- phones
---------- ...a bunch of png files...
- js
----- app.js
----- controller.js
- partials
----- gallery.html
- phones
----- ...a bunch of json files...
- index.html
This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!--<link rel="stylesheet" href="css/app.css">-->
<link rel="stylesheet" href="css/stylemain.css">
<!-- JS & ANGULAR FILES -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-touch.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<!--<script src="js/directives.js"></script>-->
</head>
<body>
<div class="template-header">
<div class="template-container">
<div class="template-logo">
<h1><a href="#/">title</h1>
</div>
<div class="template-nav">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/gallery">Gallery</a></li>
<li><a href="#/music">Music</a></li>
<li><a href="#/other-work">Other-work</a></li>
</ul>
</div>
</div>
</div>
<!-- BODY CONTENT -->
<div class="dynamic-body" ng-view></div>
</body>
This is my app.js:
'use strict';
/* App Module */
var mainApp = angular.module('mainApp', [
'ngRoute',
'galleryControllers'
]);
mainApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/', {
templateUrl:'partials/main.html',
})
.when('/gallery', {
templateUrl:'partials/gallery.html',
controller: 'mainImageCtrl',
})
.when('/:phoneId', {
templateUrl: 'partials/gallery-image.html',
controller: 'singleImageCtrl'
})
.when('/music', {
templateUrl: 'partials/music.html',
controller: 'singleImageCtrl'
})
.when('/other-work', {
templateUrl: 'partials/other-work.html',
controller: 'singleImageCtrl'
});
}
]);
This is my controller.js:
'use strict';
/* Controllers */
var galleryControllers = angular.module('galleryControllers', [
'ngAnimate'
]);
galleryControllers.controller('mainImageCtrl',['$scope', '$http',
function($scope, $http){
$http.get('phones/phones.json').success(function(data){
$scope.images = data;
});
}]);
galleryControllers.directive('slider', function($timeout) {
return {
restrict: 'AE',
replace: true,
scope: {
images: '='
},
link: function(scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
};
scope.$watch('currentIndex',function(){
scope.images.forEach(function(image){
image.visible=false;
});
scope.images[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow */
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,2000);
},2000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow */
}
};
});
// galleryControllers.controller('singleImageCtrl',['$routeParams','$scope',
// function($scope, $routeParams){
// $scope.phoneId = $routeParams.phoneId;
// }]);
This is my gallery.html:
<slider images="images"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query"/>
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<!-- Body content -->
<div class="slider">
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img ng-src="{{image.imageUrl}}" />
</div>
<div class="arrows">
<a href="#" ng-click="prev()">
<img src="img/left-arrow.png" />
</a>
<a href="#" ng-click="next()">
<img src="img/right-arrow.png" />
</a>
</div>
</div>
</div>
</div>
phones.json is simply a JSON file containing information about various phones.
Thank you in advance for any assistance provided!