Loading a view routed by a URL parameter (e.g., /users/:id) in MEAN stack
- by Matt Rowles
I am having difficulties with trying to load a user by their id, for some reason my http.get call isn't hitting my controller.
I get the following error in the browser console:
TypeError: undefined is not a function
at new <anonymous> (http://localhost:9000/scripts/controllers/users.js:10:8)
Update
I've fixed my code up as per comments below, but now my code just enters an infinite loop in the angular users controllers (see code below).
I am using the Angular Express Generator for reference
Backend - nodejs, express, mongo
routes.js:
// not sure if this is required, but have used it before?
app.param('username', users.show);
app.route('/api/users/:username')
.get(users.show);
controller.js:
// This never gets hit
exports.show = function (req, res, next, username) {
User.findOne({
username: username
})
.exec(function (err, user) {
req.user = user;
res.json(req.user || null);
});
};
Frontend - angular
app.js:
$routeProvider
.when('/users/:username', {
templateUrl: function( params ){ return 'users/view/' + params.username; },
controller: 'UsersCtrl'
})
services/user.js:
angular.module('app')
.factory('User', function ($resource) {
return $resource('/api/users/:username', {
username: '@username'
}, {
update: {
method: 'PUT',
params: {}
},
get: {
method: 'GET',
params: {
username:'username'
}
}
});
});
controllers/users.js:
angular.module('app')
.controller('UsersCtrl', ['$scope', '$http', '$routeParams', '$route', 'User', function ($scope, $http, $routeParams, $route, User) {
// this returns the error above
$http.get( '/api/users/' + $routeParams.username )
.success(function( user ) {
$scope.user = user;
})
.error(function( err) {
console.log( err );
});
}]);
If it helps, I'm using this setup
