Using $routeParams for custom views? - angularjs

Question

i was making a gallery using angular, i categorized images so when the gallery loads, each category is represented by an image, when user clicked on the image they would see the entire images of that gallery.
for that i made an array so each image representing a category has a block that is an array and consist information of all images in that category. and using that block for loading those images.
so i was trying to use $routeParams so i could make a url for each category to load data in that view, the representative image of categories are loading fine but i can't load the images of that category in the view.
my module code is:
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'contentsCtrl',
templateUrl: 'views/contents.php'
})
.when('/news/', {
controller: 'newsCtrl',
templateUrl: 'views/news.php'
})
.when('/notes/', {
controller: 'notesCtrl',
templateUrl: 'views/notes.php'
})
.when('/records/', {
controller: 'recordsCtrl',
templateUrl: 'views/records.php'
})
.when('/gallery/', {
controller: 'galleryCtrl',
templateUrl: 'views/gallery.php'
})
.when('/gallery/:galleryID', {
controller: 'imagesCtrl',
templateUrl: 'views/images.php'
})
.when('/statute/', {
controller: 'statuteCtrl',
templateUrl: 'views/statute.php'
})
.when('/forms/', {
controller: 'formsCtrl',
templateUrl: 'views/forms.php'
})
.when('/about/', {
controller: 'aboutCtrl',
templateUrl: 'views/about.php'
})
.when('/contact/', {
controller: 'ContactCtrl',
templateUrl: 'views/contact.php'
})
.when('/post/', {
controller: 'PostCtrl',
templateUrl: 'views/post.php'
})
.otherwise({redirectTo: '/'});
});
and the code for the controller is:
(function () {
var imagesCtrl = function ($scope, $http, $routeParams) {
$http.get("includes/gallery.php").success(function (response) {
$scope.gallery = response.gallery;
});
var galleryID = $routeParams.galleryID;
$scope.images = $scope.gallery[0];
function init() {
// Search gallery for the galleryID
for (var i = 0, len = $scope.gallery.length; i < len; i++) {
if ($scope.gallery[i].imageCategory == parseInt(galleryID)) {
$scope.images = $scope.gallery[i].category;
break;
}
}
}
init();
};
imagesCtrl.$inject = ['$scope', '$http', '$routeParams'];
angular.module('myApp').controller('imagesCtrl', imagesCtrl);
}());
and this is the view:
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">{{ galleryID }}</h1>
</div>
Back to Gallery
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 thumb" ng-repeat="image in images">
<img class="img-responsive" src="./uploads/images/{{ image.imageName}}" alt="" style="width:400px; height:160px;">
</div>
so anyone knows what is the problem? i would appreciate the help!

Answer 1

You're calling your init() function just after sending the $http request. It thus tries finding the gallery in $scope.gallery, but $scope.gallery is initialized long after, when the response to the $http request is available.
The code should be:
$http.get("includes/gallery.php").success(function (response) {
$scope.gallery = response.gallery;
init();
});
function init() {
// Search gallery for the galleryID
for (var i = 0, len = $scope.gallery.length; i < len; i++) {
if ($scope.gallery[i].imageCategory == parseInt($routeParams.galleryID)) {
$scope.images = $scope.gallery[i].category;
break;
}
}
}
That said, Why do you get all the galleries from the server for each page, supposed to render a single gallery. You should send the gallery ID to the server, and the server should respond with that category only, instead of always responding with all the galleries.

Answer 2

Another approach is to use $routerresolve, the router will wait for these promises to be resolved or one to be rejected before the controller is instantiated.
Route Setup:
.when('/gallery/', {
controller: 'galleryCtrl',
templateUrl: 'views/gallery.php'
resolve: {
gallery: ['$http', function($http) {
return $http
.get('includes/gallery.php')
.then(
function success(response) {
return response.data;
},
function error(reason) {
return false;
}
);
}
]
}
})
The controller should looks like this:
(function (angular) {
var imagesCtrl = function ($scope, $http, $routeParams, gallery) {
$scope.gallery = gallery;
var galleryID = $routeParams.galleryID;
$scope.images = $scope.gallery[0];
function init() {
// Search gallery for the galleryID
for (var i = 0, len = $scope.gallery.length; i < len; i++) {
if ($scope.gallery[i].imageCategory == parseInt(galleryID)) {
$scope.images = $scope.gallery[i].category;
break;
}
}
}
init();
};
imagesCtrl.$inject = ['$scope', '$http', '$routeParams', 'gallery'];
angular.module('myApp').controller('imagesCtrl', imagesCtrl);
}(angular));