1

This is the mong.js file which has the code to connect to the mongo server perform get,put,post operations

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
app.use(bodyParser.json());

mongoose.connect("mongodb://localhost/test");

var todoschema = new mongoose.Schema ({
 name : {type: String, required: true}
 });

var todomodel = mongoose.model('todolist',todoschema);

app.get('/',function(req,res){

    res.sendFile('C:\Users\Rohit\Desktop\New folder\todo.html');  
})

app.get('/todolist', function (req, res){
    todomodel.find(function(err,tasks){
      res.json(tasks);
     });
});

app.post('/todolist', function (req, res) {
  
  todomodel.insert(req.body, function(err, task) {
    res.json(task);
  });
});

app.delete('/todolist/:id', function (req, res) {
  
 todomodel.remove(req.params.id, function (err, task) {
    res.json(task);
  });
});

app.get('/todolist/:id', function (req, res) {
  
  todomodel.findById(req.params.id, function (err, task) {
    res.json(task);
  });
});

app.put('/todolist/:id', function (req, res) {
  
  todomodel.findAndModify({
     query: req.params.id,
     update: {$set: {name: req.body.name}},
     new: true}, function (err, task) {
      
      res.json(task);
    }
  );
});

app.listen(3000);
console.log("Server running on port 3000");

This the todo.html file , the todo list page look like this

<!DOCTYPE html>
<html ng-app="App">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="frontend.js"></script>

<style>
#list   
{ margin-left:320px;
  font-size: 40px;
  font-family:verdana;
}
button     
{ color:yellow;background-color:red;text-align:center;cursor:pointer;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  font-size:40px;
  padding: 14px 32px;
}
button:hover
{ background-color:peachpuff;
  color:tomato;
}
</style>
</head>

<body style="background-color:cyan;">

<div ng-controller="Ctrl">

<h1 style="text-align:center;font-family:verdana;">To-Do LiSt</h1>

<div style="margin-left:300px">
<input type="text" ng-model="task.name" style="background-color:black;color:white;font-size:40px;width:40%">
<button ng-click="addtask()">Add</button>&nbsp;
<button ng-click="updatetask()">Update</button>&nbsp;<button ng-click="clearfield()">Clear</button>
</div>

<ul>
<li id="list" ng-repeat="task in todolist">
{{task.name}}
<button ng-click="deletetask(task._id)">Delete</button>&nbsp;&nbsp;<button ng-click="edittask(task._id)">Edit</button>
</tr>
</table>

</div>


</body>
</html>

This is the frontend.js file which has the angular js part and the the functions by which my todo list page works

var App = angular.module('App',[]);
App.controller('Ctrl',['$scope','$http',function($scope,$http) {
         
    var reset = function(){
      $http.get('/todolist').success(function(response){
        $scope.todolist=response;
        $scope.task="";
        });
     };

  reset();

$scope.addtask = function() {
  $http.post('/todolist', $scope.task).success(function(response) {
       reset();
    });
 };

$scope.deletetask = function() {
  $http.delete('/todolist/'+ id).success(function(response){
      reset();
      });
   };
 
$scope.edittask = function(id) {
   $http.get('/todolist/'+ id).success(function(response){
       $scope.task=response;
     });
   };

$scope.updatetask = function(id){
   $http.put('/todolist/'+$scope.task._id, $scope.task).success(function(response){
       reset();
    });
 };

$scope.clearfield = function(){
   $scope.task="";
}

}]);

TypeError: path must be absolute or specify root to res.sendFile
    at ServerResponse.sendFile (C:\Users\Rohit\node_modules\express\lib\response.js:403:11)
    at C:\Users\Rohit\Desktop\New folder\mong.js:17:9
    at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\Rohit\node_modules\express\lib\router\route.js:131:13)
    at Route.dispatch (C:\Users\Rohit\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\Rohit\node_modules\express\lib\router\index.js:277:22
    at Function.process_params (C:\Users\Rohit\node_modules\express\lib\router\index.js:330:12)
    at next (C:\Users\Rohit\node_modules\express\lib\router\index.js:271:10)
    at jsonParser (C:\Users\Rohit\node_modules\body-parser\lib\types\json.js:100:40)
    at Layer.handle [as handle_request] (C:\Users\Rohit\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\Rohit\node_modules\express\lib\router\index.js:312:13)
    at C:\Users\Rohit\node_modules\express\lib\router\index.js:280:7
    at Function.process_params (C:\Users\Rohit\node_modules\express\lib\router\index.js:330:12)
    at next (C:\Users\Rohit\node_modules\express\lib\router\index.js:271:10)
    at expressInit (C:\Users\Rohit\node_modules\express\lib\middleware\init.js:33:5) 

I'm trying to display my html file when i open http://localhost:3000, but I'm not able to, Can you please guide me on how to do it , I'm new to all this , An easier solution would be more helpful so that I could understand it.

RohitB97
  • 440
  • 2
  • 6
  • 16

1 Answers1

0

Use:

res.sendFile('./todo.html');

OR

var path = require('path');
res.sendFile(path.join(__dirname + '/todo.html'));

Second ones better.

But again your frontend.js file would not load. So, best approach is to make a public folder and serve the static files using express.static middleware.

app.use(require('express').static('./public'));

for further explanation you can refer to: https://stackoverflow.com/a/36041093/2680461

Community
  • 1
  • 1
Nivesh
  • 2,573
  • 1
  • 20
  • 28
  • i put all the 3 files in a new folder on my desktop, wouldn't that work ? – RohitB97 May 31 '16 at 07:55
  • that would work, but unlike other web server nodeJs does not serve your static files e.g. JS,CSS,HTML on its own. either you write route for all the static files or simply put them in public folder and serve it using the express.static middleware. – Nivesh May 31 '16 at 07:57
  • so where do i have to create this public folder ?, this might be a silly question , but i'm new to this and i'm just trying to understand the path parameter of this express.static middleware , can u please tell me where do i have to create this public folder – RohitB97 May 31 '16 at 08:00
  • inside your new folder (project folder) where your mong.js resides. – Nivesh May 31 '16 at 08:03
  • so i have to put the todo.html and frontend.js files in a public folder inside the new folder ....right ? new folder should contain public folder and mong.js file ? – RohitB97 May 31 '16 at 08:06
  • yes, you can refer to the above solution link also. there is directory structure given in that answer – Nivesh May 31 '16 at 08:09
  • so was that huge error being shown , due to this mistake in path definition ? – RohitB97 May 31 '16 at 08:10
  • thanks a lot , can you suggest websites where i can improve my skills on mean stack, especially node and mongodb ? – RohitB97 May 31 '16 at 08:14
  • It's still showing the same error , i used app.use(express.static('.\public')) and res.sendFile('\todo.html') , it is still showing the same error – RohitB97 May 31 '16 at 08:31
  • man it is ```'./public'``` or ```'./todo.html'``` not ```'.\public'``` – Nivesh May 31 '16 at 11:34
  • still not working , it worked when i used \\ in the absolute path , instead of \ – RohitB97 May 31 '16 at 12:35