MEAN stack Angular shows Object from Express but not HTML

Question

I am trying to make a Blog site and I am stuck at creating single 'post' view page. When I got /post/id page from href everything works but when I refresh the page manually or share the link I get page like this:

{"_id":"56fa7443c1542bdc3bdb3857","user":{"_id":"56fa6b0cc83017643c50c5ad",

Been stuck at this for days, how can I fix this?

Express code (./app/backend/routes/post.js)

router.get('/:id', function (req, res) {
    Model.findById(req.params.id, function(err, post){
        return res.status(200).send(post);
    })
    .populate('user');
});

Angular PostCtrl code (./app/frontend/js/controller/post.js)

$http.get('/post/'+$routeParams.id).success(function (post) {
    post.text = $sce.trustAsHtml(post.text);
    $scope.post = post;

}).error(function (error, status) {
    $scope.errorMessage = error + ' (code:' + status + ')';
});

Routes (./app/frontend/js/app.js)

$routeProvider
.when('/', {
  templateUrl: 'views/main.html',
  controller: 'MainCtrl'
})
.when('/post/:id', {
  templateUrl: 'views/post.html',
  controller: 'PostCtrl'
})

Answer 1

I got it fixed. I had to change Angular routing from .when('/post/:id' to .when('/blog/:id' and change the hrefs to /blog/:id .

It seems angular and express routing cant be the same. Express seems to still send the data to /post/:id and angular gets the data from there and displays it to /blog/:id now. After refreshing the page everything seems to work fine now. Just need to hide sensitive data in /post/:id now or find a way users can get access to /post/:id .

Answer 2

I am trying to understand your code and this is what I could come up with

// this is how the route should be using populate
router.get('/post/:id', function (req, res) {
  Model.findOne({_id: req.params.id}).populate('user').exec(function (error, post) { 
    if (post) {
      res.status(200).json(post);
    } else {  
      // handle error here...
    }
  })
});

Every other thing looks okay.

I hope this helps.