I have only just started trying out NodeJS. Having a little experience with Angular, I thought of trying out a MEAN stack to-do app tutorial from scotch.
I understand what is happening and how angular, node and my view are supposed to be working together. But they just aren't. I've made sure not to miss anything. Here is my code.
Server.js is in the root folder
// server.js
// set up ========================
var express = require('express');
var app = express(); // create our app w/ express
var mongoose = require('mongoose'); // mongoose for mongodb
var mongodb = require('mongodb');
var morgan = require('morgan'); // log requests to the console (express4)
var bodyParser = require('body-parser'); // pull information from HTML POST (express4)
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
// configuration =================
mongoose.connect('mongodb://<user>:<pass>@proximus.modulusmongo.net:27017/uwa8sIje'); // connect to mongoDB database on modulus.io
app.use(express.static(__dirname +'/public')); // set the static files location /public/img will be /img for users
app.use(morgan('dev')); // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride());
// creating mongoose model ================================
var Todo = mongoose.model('Todo', {
text: String
});
// Todo is the mongo db. Creating API for CRUD in the db
//============================================================
app.get('/api/todos', function(req, res) {
Todo.find(function (err, todos) { //within 'get' we are looking for all the entries in the db
if(err) {
res.send(err) //checking for errors
}
res.json(todos); //response sends all listed todos in JSON
})
})
app.post('/api/todos', function(req, res) { //to post a new todo
Todo.create({ //creating a new post. information comes from AJAX request from Angular
text: req.body.text,
done: false
}, function(err, todo) { //checking errors
if(err) {
res.send(err);
}
Todo.find(function (err, todos) { //after post is added, find and display all existing todos again
if(err) {
res.send(err)
}
res.json(todos);
})
})
})
app.delete('/api/todos/:todo_id', function(req, res) { //delete a todo
Todo.remove({ //remove a todo from database
_id: req.params.todo_id, //todo id to be removed is provided by the request url(params)
}, function(err, todo) {
if(err) {
res.send(err);
}
Todo.find(function (err, todos) {
if (err) {
res.send(err)
}
res.json(todos);
})
})
})
//======================================================================
app.get('*', function(req,res) {
res.sendfile('./public/index.html') //load this single view file. angular will handle the
//page changes on the front end
})
// listen (start app with node server.js) ======================================
app.listen(8080);
console.log("App listening on port 8080");
My angular controller lies in the public folder along with my view
var Todoz = angular.module('Todoz', []);
function mainController($http, $scope) {
$scope.formData = {};
$http.get('/api/todos')
.success(function (data) {
$scope.todos = data;
console.log(data);
})
$scope.createTodo = function() {
$http.post('/api/todos', $scope.formData)
.success(function (data) {
$scope.formData = {};
$scope.todos = data;
})
.error(function (data) {
console.log('Error' + data)
})
}
$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id)
.success(function (data) {
$scope.todos = data;
console.log(data);
})
.error(function (data) {
console.log(data)
});
};
Todoz.controller("mainController", mainController);
}
and my minimal view
<head>
<title>
To-Do-and-Node-To-Do
</title>
</head>
<body ng-app="Todoz">
<h1>The To-do-ist</h1>
<div ng-controller="mainController">
<div>
<input type="text" ng-model="formData.text"></input>
<button type="submit" ng-click="createTodo()">Submit</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="./core.js"></script>
</body>
When I start the server with 'nodemon server.js' my console logs a /GET request and the app shows on my port 8080. However when I try to post a new item from my text-box and expect it to console.log, it doesn't do anything. My browser console returns this
POST http://localhost:8080/api/todos net::ERR_CONNECTION_REFUSED angular.js:8632
Error core.js:23
POST http://localhost:8080/api/todos net::ERR_CONNECTION_REFUSED angular.js:8632
Error core.js:23
Please help. I have no clue what is going wrong.
