How should I display data from backend in Node.js + jade + angularJS + mongoose

Question

I'm going to make web application (SPA) with:

• Backend: Node.js (express)
• Frontend: Jade + AngularJS
• Database: Mongoose

I will send data (as a form) to backend in this way ExpressJS AngularJS POST (Check ANSWER) It will be simple CRUD.

However i wondering how should I display data from backend? For example:

I'll run application

var Partner = require('../model/partners');
router.get('/', function (req, res) {
    Partner.find({}, function (err, partnerList) {
        if (err) throw err;

        res.render('campaign', {
            partnerList: partnerList
        });
    });
});

And how should i display data (partnerList). Maybe in this way?

- each item in partnerList
  = item.name

Or maybe there is another better way with angular to display data at view? I'm asking because later i'd like remove or update items from partnerList (CRUD operation). And it may be a problem because i will have to send item._id as a parameter to angular function?

For example if i will add button to remove record:

- each item in partnerList
  = item.name
  button(type='remove' ng-click="sub('#{item._id}')")

script.
  app.controller('view1Ctrl', function($scope, $http) {
    $scope.sub = function(id) {
        $http.post('/',id).
        success(function(data) {
            console.log("posted successfully");
        }).error(function(data) {
            console.error("error in posting");
        })
    }
});

Probably it won't work correct

Answer 1

As said in previous coment, from my point of view I prefere to send the minimum required data from the backend to the client, but it depends of you infrastructure and you concurrent users.

Example 1:

• You have a web app with +5K concurrent users, in this case is better handle all the huge stuff at frondend side or you will need to spend a lot of money in your backend hardware.

Practical case:

• Users POST a new comment in a blog page. You sanitize the text string at the backend and put it at you preferred datastore... But JUST respond with a simple json like {"status": "ok"}. If the frond end recive this, modify the DOM with the text string that the client sent to the backend in the POST stage, but not send again all the HTML with this (for example) 500 characters comment.
• If server responds with {"status":"error"}, modify the DOM to let the user know what's the problem about his comment (more specified json message {"status":"error", "data":"you comment is bigger than 500 chars"})

Problems:

• You need extra frontend code to handle these situations in the client side. So this "maybe" will inpact on the user the 1st time that it visits your page.

Pros:

• Less hardware costs
• Overall less server response times.
• More user interactive website modeling only certain parts of the DOM at any moment.
• ...

Example 2:

• You have a simple page with low concurrent users. Then you choose. Let you backend to handle everything? Or keep working with json responses?

---

I always use the 1st example. Hope this helps in your question.

Answer 2

I think the preferred method would be to set up a second route from express to specifically render JSON, then use angular's $http method to get that data and use it in your controller. If you want to do it with a single route, you can pass the JSON data as a string to your view on the server-side, but it might get a little unruly.

// app.js
...
partnerList: JSON.stringify(partnerList);
...

// index.jade
div(ng-repeat="item in partnerList")
  p {{ item.name }}
  button(type='remove', ng-click="sub(item._id)")
...
script.
  app.controller('view1Ctrl', function($scope, $http) {
    $scope.partnerList = JSON.parse(#{partnerList});
    ...

EDIT To use the JSON string example, you would have to render using the Unbuffered Code syntax. But I'm not sure how you would do that inside a script. block. To instead go the route of serving JSON separately, change your server routes to this:

var Partner = require('../model/partners');

router.get('/', function (req, res) {
    res.render('campaign');
});

router.get("/partner-list", function(req, res) {
    Partner.find({}, function (err, partnerList) {
        if (err) throw err;

        res.json({ partnerList: partnerList });
    });
});

Then your angular code will query that /partner-list path with $http.get().

script.
    app.controller('view1Ctrl', function($scope, $http) {
        $http.get("/partner-list").then(function(result) {
            $scope.partnerList = result.data.partnerList;
        });
        ...
    });