Consume REST API with 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);
  });
};

What type of error is returned when you comment out the top function and add an error handler of some sort to the second? — Pytth, Sep 28 '14 at 18:08
You get all objects because you use `Product.query` if you want one Product you need to use `Product.get({productId: 123}, function(value){do something})` — snies, Sep 28 '14 at 18:30

score 3 · Answer 1 · answered Sep 28 '14 at 18:12

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

Consume REST API with AngularJS

1 Answers1