I'm sure this problem has a simple answer, but, for once, I'm stumped. I want to have a URL like http://www.website.com/item/1234 display information about an item with id '1234'. I have an Angular controller set up to query for it and render its data. This works, provided the id is valid. However, I can't figure out how to pass the id, in the first place. I have tried lots of routing examples, but none of them work when I try to implement them, so I'm missing something.
Here is the server route in Express/Node:
router.get('/item/:id', function(req, res, next) {
res.render('item');
});
Here is the Angular route:
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/item/:id', {
controller: 'ShowItem'
});
$locationProvider.html5Mode(true);
}]);
The controller is trying to access 'id' here:
app.controller('ShowItem', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
console.log($routeParams.id);
var itemID = $routeParams.id;
$http({
method: 'GET',
url: '/queries/get_item',
params: {
itemID: itemID
}
}).success(function(data, status, headers, config) {
if (data) {
$scope.itemValue = data;
$scope.type = $scope.itemValue['SaleType'];
$scope.setAllBidHistory(false);
if (Date.getStamp() >= $scope.itemValue['ExpirationTimeStamp']) {
$scope.expired = true;
} else {
$scope.expired = false;
}
}
}).error(function(data, status, headers, config) {
alert('There was an error fetching item: '+status);
});
...
}]);
The page renders, but $routeParams.id is undefined.