Separate pages for items in MEAN application - node.js

Question

I'm writing application with Node, Express, Mongoose and Angular. I can display all items on a page. My next step is to write separate page for items from database, so i create route:
app.get '/products/:product_id', (req, res) ->
Product.findById req.params.product_id, (err, product) ->
res.send(err) if (err)
res.render('product.html', { name: product.name } )
return
return
Everything cool, i can display name with <%= name %> in product.html, but Angular doesn't work. Without '/:product_id' work.
This is my route to get all products:
app.get '/api/products', (req, res) ->
Product.find (err, products) ->
if (err)
res.send(err)
res.json(products); # return all products in JSON format
return
return
And on the front side:
$http.get('/api/products')
.success (data) ->
$scope.products = data
console.log(data)
return
.error (data) ->
console.log('Error: ' + data)
return
So, how i can write application, in which i go to http://mydomain.com/products/53c68728c7e5a5381a000002 then one item will display? (53c68728c7e5a5381a000002 is id)

Answer 1

If I understand correctly, you're not sending the id on the angular side.
In that case, you should create a $resource service :
myApp.factory('ProductService', [ '$resource', function($resource) {
return $resource('http://mydomain.com/products/:id', {
id : '#_id'
});
} ]);
And then call it in your controller :
myApp.controller('MyCtrl', ['$scope', 'ProductService', '$routeParams',
function($scope, ProductService, $routeParams) {
$scope.findOne = function() {
$scope.product = ProductService.get({
id : $routeParams.id
});
};
} ]);
It will only work if you include your service in the controller declaration (aswell as routeParams if it's not there already), and if you have your routes set up correctly on the front-end side :
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/product/:id', {templateUrl: 'partials/product.html', controller: 'MyCtrl'});
}]);

Answer 2

I had to do some reserach to make sure I am not wrong because I don't have a lot of experience with MEAN. However, looking at meanjs and their implementation, it seems to remain the same.
According to the sample articles routes.js https://github.com/meanjs/mean/blob/master/app/routes/articles.server.routes.js
app.route('/articles/:articleId')
.get(articles.read) //<----THIS GUY RIGHT HERE
.put(users.requiresLogin, articles.hasAuthorization, articles.update)
.delete(users.requiresLogin, articles.hasAuthorization, articles.delete);
They do a call to articles.read. So we find that function in the controller section.
https://github.com/meanjs/mean/blob/master/app/controllers/articles.server.controller.js
This function grabs and returns the req.article
exports.read = function(req, res) {
res.jsonp(req.article);
};
Which if you dig deeper is found using mongoose and added to the req.
exports.articleByID = function(req, res, next, id) {
Article.findById(id).populate('user', 'displayName').exec(function(err, article) {
if (err) return next(err);
if (!article) return next(new Error('Failed to load article ' + id));
req.article = article;
next();
});
};
and in the articles angular controller
https://github.com/meanjs/mean/blob/master/public/dist/application.js
$scope.findOne = function () {
$scope.article = Articles.get({ articleId: $stateParams.articleId });
};
You are still returning HTML as part of the request. Let angular handle the routing and pull the data from a request to your node server.
app.get '/products/:product_id', (req, res) ->
Product.findById req.params.product_id, (err, product) ->
res.send(err) if (err)
res.json({ name: product.name })
return
return
Or something to that effect. When your resource or even a simple http request is made to /products/:product_id then whatever you are returning via the res is what it tries to parse. If you are doing res.render it is going to return that as a response and break because you are expecting something else.
EDIT In reference to the comment on what tutorial you are using *
Add to Server Side - This will add an api route to return JSON data for that product/product_id
//View a product
app.get('/api/products/:product_id', function(req, res) {
Product.findOne({
_id : req.params.product_id
}, function(err, product) {
if (err)
res.send(err);
res.json(product);
});
});
Add To Front-end Angular Controller - Do this wherever you are doing your http.get for the product
//id is a placeholder for however you are passing in the product id
$http.get('/api/products/' + id)
.success(function(data) {
$scope.product = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});

Answer 3

Still doesn't work.
Routes (backend):
app.get '/products/:product_id', (req, res) ->
Product.findById req.params.product_id, (err, product) ->
res.send(err) if (err)
res.render('product.html', { name: product.name } )
return
return
App.js (Front):
config(['$routeProvider', ($routeProvider) ->
$routeProvider.when('/products/:id', {templateUrl: 'views/product.html', controller: 'StoreControllerOne'});
Controllers.js (Front):
.controller 'StoreControllerOne', ['$scope', '$http', 'ProductService', '$routeParams',
($scope, $http, ProductService, $routeParams) ->
$scope.findOne = ->
$scope.product = ProductService.get({
id : $routeParams.id
});
console.log($scope.product.id)
return
]
Services.js (Front):
.factory('ProductService', [ '$resource', ($resource) ->
return $resource('/products/:id', {
id : '#_id'
});
]);
When i go to www.mydomain.com/products/53c92d5dda9cef6c23000002, JS console said, that can't find www.mydomain.com/products/javascripts/app.js for example, bu this file is in www.mydomain.com/javascripts/app.js. Because adding ../ in html file is not good practice and it not work with directives.