Consume REST API with AngularJS - angularjs

Question

I'm trying to pull an object by its _id from the mongodb database and place it in the $scope for later use. However when I try to do so, I get every object in the database, instead of the one I requested. I'm new to the mean-stack and do not understand what I am doing wrong.
If you have any further question please let me know.
server.js
var express = require('express'),
app = module.exports = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
productsController = require('./server/controllers/products-controller');
mongoose.connect('mongodb://localhost:27017/mean-demo');
app.use(bodyParser());
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});
app.get('/product/*', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});
app.use('/js', express.static(__dirname + '/client/js'));
app.use('/css', express.static(__dirname + '/client/css'));
app.use('/images', express.static(__dirname + '/client/images'));
app.use('/views', express.static(__dirname + '/client/views'));
//REST API
app.get('/api/products', productsController.products);
app.get('/api/products/:productId', productsController.product);
app.listen(3000, function() {
console.log('I\'m Listening...');
});
app.js
var app = angular.module('productApp', ['ngResource', 'ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/productsoverview.html',
controller: 'productsController'
})
.when('/product/:productId', {
templateUrl: '/views/productFocus.html',
controller: 'productFocusController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true)
}]);
app.controller('productsController', ['$scope', '$resource',
function($scope, $resource) {
var Product = $resource('/api/products');
$scope.products = [];
Product.query(function (results) {
$scope.products = results;
});
}]);
app.controller('productFocusController', ['$routeParams', '$scope', '$resource',
function($routeParams, $scope, $resource) {
var Product = $resource('/api/products/:productId',{productId:'#productId'});
Product.productId = $routeParams.productId;
console.log(Product.productId);
Product.query(function (result) {
console.log(result);
$scope.product = result;
});
}]);
productsController
var Product = require('../models/product');
exports.products = function (req, res) {
Product.find({}, function (err, results) {
res.json(results);
});
};
exports.product = function (req, res) {
Product.findOne({_id:req.params.productId}, function (err, obj) {
res.json(obj);
});
};

Answer 1

You are using ngResource a bit wrong.
Try to write a single resource, e.g.
app.resource('Product', ['$resource'
function($resource) {
return $resource('/api/products/:id', {id: '#id'},
{
'update': { method:'PUT' }
});
}]);
Now you can inject this resource into your controller:
app.controller('productsController', ['$scope', 'Product',
function($scope, Product) {
$scope.products = [];
// this gets ALL products (query)
Product.query(function (results) {
$scope.products = results;
});
// this gets ONE product by id (get)
Product.get({id: 123})
.$promise.then(function(product) {
$scope.product = product;
});
});
}]);
ngResource documentation