Develop Reference

Can't set headers after they are sent at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:344:11)

I get error when push child row record (add Histories) from two clients which enter this add Histories page at the same time. It works fine if only push child record one by one client (i.e, enter add Histories pages to push record in client 1 and then enter add Histories pages to push record).
Is there some record lock handling required in AngularJS?
The error in the NodeJS service is:
Error: Can't set headers after they are sent.
at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:344:11)
at ServerResponse.header (/home/oracle/node/ang_backend1/node_modules/express/lib/response.js:718:10)
at ServerResponse.send (/home/oracle/node/ang_backend1/node_modules/express/lib/response.js:163:12)
at ServerResponse.json (/home/oracle/node/ang_backend1/node_modules/express/lib/response.js:249:15)
at /home/oracle/node/ang_backend1/routes/datas.js:53:21
at /home/oracle/node/ang_backend1/node_modules/mongoose/lib/model.js:3324:16
at /home/oracle/node/ang_backend1/node_modules/mongoose/lib/document.js:1924:15
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
It also cause the backend nodejs stop and needs restart.
The HistoryaddController is:
.controller('HistoryaddController', function($scope, $cordovaNetwork, $ionicPopup, $rootScope, $filter, $state, $stateParams, Movie, $ionicLoading, $ionicPlatform, $ionicHistory, $http, $timeout) {
$scope.loadMovie = function() {
$scope.movie = Movie.get({ id: $stateParams.id }).$promise.then(function(results) {
console.log(results);
$scope.movie = results;
});
};
$scope.loadMovie();
$scope.themovie = {
details: '',
};
$scope.updateMovie = function() {
$scope.movie.Histories.push($scope.themovie);
$scope.movie.$update(function() {
$state.go('movies');
});
};
})
The backend mongo model for this collection is:
var mongoose = require('mongoose');
var autoIncrement = require('mongoose-auto-increment');
mongoose.Promise = global.Promise;
var connection = mongoose.createConnection("mongodb://localhost:27017/mymongodb");
autoIncrement.initialize(connection);
var Schema = mongoose.Schema;
var DataSchema = new Schema({
sort: { type: Schema.Types.ObjectId, ref: 'Sort' },
custname: String,
problem: String,
opendate: { type: Date, default: Date.now },
enddate: { type: Date },
lastupdate: { type: Date },
assignedon: { type: Date },
openby: String,
updateby: String,
assignedto: String,
severity: String,
product: String,
srstatus: String,
reportby: String,
custowner: String,
vendorid: String,
Histories: [{
details: String
}]
});
DataSchema.plugin(autoIncrement.plugin, 'Data');
module.exports = mongoose.model('Data', DataSchema);
The backend route is :
var Data = require('../app/models/data'); // get the mongoose model
var express = require('express');
var router = express.Router();
router.route('/:id')
.put(function(req, res) {
Data.findOne({ _id: req.params.id }, function(err, data) {
if (err)
res.send(err);
for (prop in req.body) {
data[prop] = req.body[prop];
}
// save the movie
data.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Data updated!' });
});
});
})
<form name="myForm1">
<ion-view title="Add Detail">
<ion-header-bar align-title="center" class="bar-balanced">
<ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-balanced">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
</ion-header-bar>
<ion-content overflow-scroll="true" class="padding">
<div class="list" >
<label class="item item-input">
<input type="text" placeholder="customer" ng-model="movie.custname" required>
</label>
<label class="item item-input">
<input type="text" placeholder="problem" ng-model="movie.problem" required>
</label>
<label class="item item-input">
<textarea ng-trim="false" rows=8 placeholder="Details" ng-model="themovie.details" required></textarea>
</label>
</div>
<button class="button button-full button-balanced" clicked-disable ng-disabled="myForm1.$invalid" ng-click="updateMovie()">
Add
</button>
</ion-content>
</ion-view>
</form>
Appreciated if you can point out what I should fix. The problem that I get is when two client app (i.e, client app1 and client app 2) enter this Historiesadd page -> input records -> save. It will get this error. If client1 enter this Historiesadd page -> input record -> save. And then client2 enter this Historiesadd page -> input record -> save. It will not get this error. That mean, the second client cannot enter the Histroiesadd page until the first client save the record successfully. It can avoid this error. I am not sure if it is backend node express issue or fontend Angular. Thanks

I think the problem relies here.
for (prop in req.body) {
data[prop] = req.body[prop];
}
// save the movie
data.save(function(err) {
if (err)
res.send(err);
res.json({ message: 'Data updated!' });
});
You are attempting to resend json back to client after it has been already resend. Make sure save is already complete before return back the json. Try to put res.json outside callback
// save the movie
data.save(function(err) {
if (err)
res.send(err);
});
res.json({ message: 'Data updated!' });

Using epilogue, is it possible to get back a resource without associations?

I have
epilogue.resource({
model: db.Question,
endpoints: ['/api/questions', '/api/questions/:id'],
associations: true
});
So when I hit /api/questions, I get back all the associations with the resources. Is there something I can pass to not get the associations in certain cases? Or should I create a new endpoint:
epilogue.resource({
model: db.Question,
endpoints: ['/api/questions2', '/api/questions2/:id']
});

One way of doing is by using milestones you can define milestone for list and read behaviour in certain case, you have access to req object so you can do changes accordingly
https://github.com/dchester/epilogue#customize-behavior
Here is an example of list call modification
// my-middleware.js
module.exports = {
list: {
write: {
before: function(req, res, context) {
// modify data before writing list data
return context.continue;
},
action: function(req, res, context) {
// change behavior of actually writing the data
return context.continue;
},
after: function(req, res, context) {
// set some sort of flag after writing list data
return context.continue;
}
}
}
};
// my-app.js
var epilogue = require('epilogue'),
restMiddleware = require('my-middleware');
epilogue.initialize({
app: app,
sequelize: sequelize
});
var userResource = epilogue.resource({
model: User,
endpoints: ['/users', '/users/:id']
});
userResource.use(restMiddleware);

Track and count clicks with AngularJS and post to MongoDB

I want to be able to track the click from a user on an item and have it update the JSON object associate with it and display the number of all the clicks. I know how to create and delete an object, but how do I add a new name and value and update the object when the user clicks and appropriate vote button? Any help will be greatly appreciated and I thank you in advance.
The HTML
<body ng-controller="mainController">
<div class="table-responsive">
<table class="table">
<tr>
<td>Vote</td>
<td>Song</td>
<td>Edit</td>
</tr>
<tr ng-repeat="todo in todos">
<td><button class="btn btn-success icon-thumbs-up" alt="Up vote this song if you like it.">Vote</button></td>
<td>{{ todo.text }}</td>
<td><button class="btn btn-danger fa fa-times" ng-click="deleteTodo(todo._id)" alt="Remove the song if you need to make an edit and then add it back."></button></td>
</tr>
</table>
</div>
</body>
The Model
var mongoose = require('mongoose');
module.exports = mongoose.model('Todo', {
text : String,
done : Boolean
});
The Service
angular.module('todoService', [])
// super simple service
// each function returns a promise object
.factory('Todos', function($http) {
return {
get : function() {
return $http.get('/api/todos');
},
create : function(todoData) {
return $http.post('/api/todos', todoData);
},
delete : function(id) {
return $http.delete('/api/todos/' + id);
}
}
});
Server side Angular
var Todo = require('./models/todo');
module.exports = function(app) {
// api ---------------------------------------------------------------------
// get all todos
app.get('/api/todos', function(req, res) {
// use mongoose to get all todos in the database
Todo.find(function(err, todos) {
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err)
res.send(err)
res.json(todos); // return all todos in JSON format
});
});
// create todo and send back all todos after creation
app.post('/api/todos', function(req, res) {
// create a todo, information comes from AJAX request from Angular
Todo.create({
text : req.body.text,
done : false
}, function(err, todo) {
if (err)
res.send(err);
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// delete a todo
app.delete('/api/todos/:todo_id', function(req, res) {
Todo.remove({
_id : req.params.todo_id
}, function(err, todo) {
if (err)
res.send(err);
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err)
res.json(todos);
});
});
});
// application -------------------------------------------------------------
app.get('*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
};
Client side Angular
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get()
.success(function(data) {
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
$scope.loading = true;
if ($scope.formData.text != undefined) {
// call the create function from our service (returns a promise object)
Todos.create($scope.formData)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos.unshift(data); // assign our new list of todos
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
});

Here is what you would do.
Add a new field to schema to store the votes:
votes: {type: Number, default: 0}
Add a new handler on the server side to increment vote when it gets a request:
app.get('/api/todos/:todo_id/vote', function(req, res) {
Todo.update({_id: req.params.todo_id}, { $inc: {votes: 1} } ), function(err,doc){
...
}
}
Add a new function to AngularJS service to call this new API handler:
vote: function(id) {
return $http.get('/api/todos/' + id + '/vote');
}
Wire up ngClick on ngRepeated elements to call the new Svc function. NOTE: You would need Todos svc in your scope to do this as below, otherwise create a wrapper function in the scope as you have done.
<td>
<button data-ng-click="Todos.vote(todo._id)"
class="btn.." alt="Up vote this....">Vote
</button>
</td>
then display in your view somehow the new "votes" field of the ToDo Models coming back.
Check this out: http://meanjs.org/ You can get a lot of good examples working with Angular, node and Mongo, look at the "articles" module that comes with it.
I didn't try any of this but it should give you the basic idea what to do. Also, realize there is nothing here to stop a user from upvoting more than once. Hope it helps!

Sails.js Set model value with value from Callback

i need to provide something like an association in my Model. So I have a Model called Posts with an userid and want to get the username from this username and display it.
So my ForumPosts.js Model looks like the following:
module.exports = {
schema: true,
attributes: {
content: {
type: 'text',
required: true
},
forumTopicId: {
type: 'text',
required: true
},
userId: {
type: 'integer',
required: true
},
getUsername: function(){
User.findOne(this.userId, function foundUser(err, user) {
var username = user.username;
});
console.log(username);
return username;
}
}
};
I know that this return will not work because it is asynchronus... But how can i display it in my view? At the Moment i retrive the value with:
<%= forumPost.getUsername() %>
And for sure get an undefined return...
So the question is: How can I return this value - or is there a better solution than an instanced Model?
Thanks in advance!

Off the top of my head, you can just load associated user asynchronously before rendering:
loadUser: function(done){
var that = this;
User.findOne(this.userId, function foundUser(err, user) {
if ((err)||(!user))
return done(err);
that.user = user;
done(null);
});
}
then in your controller action:
module.exports = {
index: function(req, res) {
// Something yours…
forumPost.loadUser(function(err) {
if (err)
return res.send(err, 500);
return res.view({forumPost: forumPost});
});
}
}
and in your view:
<%= forumPost.user.username %>
This is kind of a quick and dirty way. For a more solid and long-term solution (which is still in development so far) you can check out the alpha of Sails v0.10.0 with the Associations API.

So this particularly case of associations between your models. So here you have a User model and ForumPost model and you need the user object in place of your user_id as user_id works as a relationship mapping field to your User model.
So if your are using sails V0.9.8 or below you need to handle this logic in your controller where ever you want to access User model attributes in your view.
In your controller write your logic as:
model.export = {
//your getForumPosts method
getForumPosts : function(req,res){
var filters = {};
forumPost.find(filters).done(function(err,posts){
if(err) return res.send(500,err);
// Considering only one post obj
posts = posts[0];
postByUser(posts.user_id,function(obj){
if(obj.status)
{
posts.user = obj.msg;
delete posts.user_id;
res.view({post:posts});
}
else
{
res.send(500,obj.msg);
}
});
}
}
}
function postByUser(user_id,cb){
User.findOne(user_id).done(function(err,user){
if(err) return cb({status:false, msg:err});
if(user){
cb({status:true, msg:user});
}
}
}
and then you can access your post object in your view.
Or else you can keep watch (at GitHub) on next version of sails as they have announced associations in V0.10 n it is in beta testing phase as if now.

AngularJS redirection after ng-click

I have a REST API that read/save data from a MongoDB database.
The application I use retrieves a form and create an object (a job) from it, then save it to the DB. After the form, I have a button which click event triggers the saving function of my controller, then redirects to another url.
Once I click on the button, I am said that the job has well been added to the DB but the application is jammed and the redirection is never called. However, if I reload my application, I can see that the new "job" has well been added to the DB. What's wrong with this ??? Thanks !
Here is my code:
Sample html(jade) code:
button.btn.btn-large.btn-primary(type='submit', ng:click="save()") Create
Controller of the angular module:
function myJobOfferListCtrl($scope, $location, myJobs) {
$scope.save = function() {
var newJob = new myJobs($scope.job);
newJob.$save(function(err) {
if(err)
console.log('Impossible to create new job');
else {
console.log('Ready to redirect');
$location.path('/offers');
}
});
};
}
Configuration of the angular module:
var myApp = angular.module('appProfile', ['ngResource']);
myApp.factory('myJobs',['$resource', function($resource) {
return $resource('/api/allMyPostedJobs',
{},
{
save: {
method: 'POST'
}
});
}]);
The routing in my nodejs application :
app.post('/job', pass.ensureAuthenticated, jobOffers_routes.create);
And finally the controller of my REST API:
exports.create = function(req, res) {
var user = req.user;
var job = new Job({ user: user,
title: req.body.title,
description: req.body.description,
salary: req.body.salary,
dueDate: new Date(req.body.dueDate),
category: req.body.category});
job.save(function(err) {
if(err) {
console.log(err);
res.redirect('/home');
}
else {
console.log('New job for user: ' + user.username + " has been posted."); //<--- Message displayed in the log
//res.redirect('/offers'); //<---- triggered but never render
res.send(JSON.stringify(job));
}
});
};

I finally found the solution ! The issue was somewhere 18inches behind the screen....
I modified the angular application controller like this :
$scope.save = function() {
var newJob = new myJobs($scope.job);
newJob.$save(function(job) {
if(!job) {
$log.log('Impossible to create new job');
}
else {
$window.location.href = '/offers';
}
});
};
The trick is that my REST api returned the created job as a json object, and I was dealing with it like it were an error ! So, each time I created a job object, I was returned a json object, and as it was non null, the log message was triggered and I was never redirected.
Furthermore, I now use the $window.location.href property to fully reload the page.