0

As an introduction to MEAN stack, I was doing this example on github on my local. This is a very basic Contact list CRUD application, with a single table (or document?).

I followed the guides and installed mongodb on my local successfully.

server.js:

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']);
var bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());

app.get('/contactlist', function (req, res) {
  console.log('I received a GET request');

  db.contactlist.find(function (err, docs) {
    console.log(docs);
    res.json(docs);
  });
});

app.post('/contactlist', function (req, res) {
  console.log(req.body);
  db.contactlist.insert(req.body, function(err, doc) {
    res.json(doc);
  });
});

app.delete('/contactlist/:id', function (req, res) {
  var id = req.params.id;
  console.log(id);
  db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
    res.json(doc);
  });
});

app.get('/contactlist/:id', function (req, res) {
  var id = req.params.id;
  console.log(id);
  db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
    res.json(doc);
  });
});

app.put('/contactlist/:id', function (req, res) {
  var id = req.params.id;
  console.log(req.body.name);
  db.contactlist.findAndModify({
    query: {_id: mongojs.ObjectId(id)},
    update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
    new: true}, function (err, doc) {
      res.json(doc);
    }
  );
});

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

public/controllers/controller.js:

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
    console.log("Hello World from controller");


var refresh = function() {
  $http.get('/contactlist').success(function(response) {
    console.log("I got the data I requested");
    $scope.contactlist = response;
    $scope.contact = "";
  });
};

refresh();

$scope.addContact = function() {
  console.log($scope.contact);
  $http.post('/contactlist', $scope.contact).success(function(response) {
    console.log(response);
    refresh();
  });
};

$scope.remove = function(id) {
  console.log(id);
  $http.delete('/contactlist/' + id).success(function(response) {
    refresh();
  });
};

$scope.edit = function(id) {
  console.log(id);
  $http.get('/contactlist/' + id).success(function(response) {
    $scope.contact = response;
  });
};  

$scope.update = function() {
  console.log($scope.contact._id);
  $http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function(response) {
    refresh();
  })
};

$scope.deselect = function() {
  $scope.contact = "";
}

}]);

public/index.html:

<!DOCTYPE>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

  <title>Contact List App</title>
</head>
<body>
  <div class="container" ng-controller="AppCtrl">
    <h1>Contact List App</h1>

    <table class="table">
      <thead>
        <tr>
          <th>Name</th>         
          <th>Email</th>
          <th>Number</th>
          <th>Action</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" ng-model="contact.name"></td>
          <td><input class="form-control" ng-model="contact.email"></td>
          <td><input class="form-control" ng-model="contact.number"></td>
          <td><button class="btn btn-primary" ng-click="addContact()">Add Contact</button></td>
          <td><button class="btn btn-info" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
        </tr>
        <tr ng-repeat="contact in contactlist">
          <td>{{contact.name}}</td>
          <td>{{contact.email}}</td>
          <td>{{contact.number}}</td>
          <td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
          <td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td>
        </tr>
      </tbody>
    </table>

  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>

package.json:

{
  "name": "contactlistapp",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.10.2",
    "express": "^4.11.1",
    "mongojs": "^0.18.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/michaelcheng429/meanstacktutorial.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/michaelcheng429/meanstacktutorial/issues"
  },
  "homepage": "https://github.com/michaelcheng429/meanstacktutorial"
}

The scripts that I wrote on mongo command line (windows 7):

use contactlist
db.contactlist.insert({name: 'Tom', email: 'tom@gmail.com', number: '(444)444-4444'})

The error on Chrome console when I open index.html:

GET http://localhost:63342/contactlist 404 (Not Found)(anonymous function) @ angular.js:9827m @ angular.js:9628f @ angular.js:9344(anonymous function) @ angular.js:13189$eval @ angular.js:14401$digest @ angular.js:14217$apply @ angular.js:14506(anonymous function) @ angular.js:1448e @ angular.js:4185d @ angular.js:1446sc @ angular.js:1466Jd @ angular.js:1360(anonymous function) @ angular.js:26125a @ angular.js:2744c @ angular.js:3014
controller.js:19 Object {name: "sa", email: "sa", number: "as"}email: "sa"name: "sa"number: "as"__proto__: Object
brainmassage
  • 1,234
  • 7
  • 23
  • 42
  • `contactList` != `contactlist` – str Nov 07 '16 at 11:25
  • @str Sorry forgot to change that, edited the post. It was an earlier error message. – brainmassage Nov 07 '16 at 11:30
  • http://localhost:63342/contactlist, when you are running your app on port 3000 – krakig Nov 07 '16 at 11:31
  • @krakig http://localhost:3000/contactlist Tried this on browser, but it shows nothing. – brainmassage Nov 07 '16 at 11:34
  • what do you mean by it shows nothing? Any error comes up? If no error is shown, that means that your correctly entered your route, but maybe the database didn't find any result – krakig Nov 07 '16 at 11:35
  • @krakig after a while Chrome gave error: The localhost page isn’t working – brainmassage Nov 07 '16 at 11:37
  • Do you have problems finding your index.html page, provided that you use the default localhost:3000 ? I don't see anything in your code configuring a route for index.html through express. Express can allow you to render a certain view (html page) if you configure the route ( default / ) to be able to render your page when a client requests to access a given route. Your CRUD routes for contactlist can be tested even if you don't configure views for these routes. using REST easy browser plugin – Osama Salama Nov 07 '16 at 12:15

1 Answers1

1

Your angular app is not being served by your node.js server, that means that when you call $http.get('/contactlist'), you are calling a route on the same domain with your angular app, which happens to be localhost:63342.

You could fix that by adding the domain in the request : $http.get('localhost:3000/contactlist')

krakig
  • 1,515
  • 1
  • 19
  • 33
  • That's due to the route being called from another domain. To allow CORS, just look at this thread : http://stackoverflow.com/questions/7067966/how-to-allow-cors-in-express-node-js – krakig Nov 07 '16 at 11:37