├── README.md
├── package.json
├── public
    ├── controllers
    │   └── controller.js
    └── index.html
└── server.js


/README.md:
--------------------------------------------------------------------------------
 1 | # MEAN Stack RESTful API Tutorial - Contact List App
 2 | <h2>MEAN Stack RESTful API Tutorial - Contact List App</h2>
 3 | 
 4 | <img src="http://i288.photobucket.com/albums/ll175/michaelcheng429/meanstacktutorial_zpsu72ixs47.png" alt="mean stack tutorial app">
 5 | 
 6 | This repo contains the code for a RESTful API Contact List App that was built using the MEAN stack:
 7 | 
 8 | <ul>
 9 | <li>MongoDB</li>
10 | <li>Express</li>
11 | <li>AngularJS</li>
12 | <li>NodeJS</li>
13 | </ul>
14 | 
15 | <h3>YouTube Tutorial</h3>
16 | 
17 | Here is the 5-part YouTube tutorial for this MEAN stack app:
18 | 
19 | <h4><a href="https://www.youtube.com/watch?v=kHV7gOHvNdk">Part 1/5: Using MongoDB, Express, AngularJS, and NodeJS Together</a></h4>
20 | 
21 | <h4><a href="https://www.youtube.com/watch?v=7F1nLajs4Eo">Part 2/5: AngularJS and NodeJS App Tutorial</a></h4>
22 | 
23 | <h4><a href="https://www.youtube.com/watch?v=oVIeMfvgTz8">Part 3/5: MongoDB Tutorial: Downloading, Installing, and Basics</a></h4>
24 | 
25 | <h4><a href="https://www.youtube.com/watch?v=iFsYJG3fGro">Part 4/5: RESTful API, GET and POST Data</a></h4>
26 | 
27 | <h4><a href="https://www.youtube.com/watch?v=06_SIzYXgqQ">Part 5/5: RESTful API Tutorial, DELETE and PUT Data</a></h4>
28 | 
29 | <h3>Instructions</h3>
30 | 
31 | If you have trouble with the tutorial (especially since I had to modify the code due to an AngularJS update), simply clone this repo using 
32 | 
33 |     git clone git@github.com:michaelcheng429/meanstacktutorial.git
34 | 
35 | then install the Node modules with
36 | 
37 |     npm install
38 | 
39 | then make sure MongoDB is running with
40 | 
41 |     mongod
42 | 
43 | from your MongoDB directory, and then run the code with 
44 | 
45 |     node server
46 | 
47 | You might see a message that says, 
48 | 
49 |     Error: Module did not self-register.]
50 |     js-bson: Failed to load c++ bson extension, using pure JS version
51 |     
52 | Don't worry about this; the code will still work.
53 | 
54 | <h3>Have fun!</h3>
55 | 
56 | If you have any questions, feel free to leave a comment and I will try to help if I can!
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "contactlistapp",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "dependencies": {
 7 |     "body-parser": "^1.10.2",
 8 |     "express": "^4.11.1",
 9 |     "mongojs": "^0.18.1"
10 |   },
11 |   "devDependencies": {},
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1",
14 |     "start": "node server.js"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/michaelcheng429/meanstacktutorial.git"
19 |   },
20 |   "author": "",
21 |   "license": "ISC",
22 |   "bugs": {
23 |     "url": "https://github.com/michaelcheng429/meanstacktutorial/issues"
24 |   },
25 |   "homepage": "https://github.com/michaelcheng429/meanstacktutorial"
26 | }
27 | 


--------------------------------------------------------------------------------
/public/controllers/controller.js:
--------------------------------------------------------------------------------
 1 | var myApp = angular.module('myApp', []);
 2 | myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
 3 |     console.log("Hello World from controller");
 4 | 
 5 | 
 6 | var refresh = function() {
 7 |   $http.get('/contactlist').success(function(response) {
 8 |     console.log("I got the data I requested");
 9 |     $scope.contactlist = response;
10 |     $scope.contact = "";
11 |   });
12 | };
13 | 
14 | refresh();
15 | 
16 | $scope.addContact = function() {
17 |   console.log($scope.contact);
18 |   $http.post('/contactlist', $scope.contact).success(function(response) {
19 |     console.log(response);
20 |     refresh();
21 |   });
22 | };
23 | 
24 | $scope.remove = function(id) {
25 |   console.log(id);
26 |   $http.delete('/contactlist/' + id).success(function(response) {
27 |     refresh();
28 |   });
29 | };
30 | 
31 | $scope.edit = function(id) {
32 |   console.log(id);
33 |   $http.get('/contactlist/' + id).success(function(response) {
34 |     $scope.contact = response;
35 |   });
36 | };  
37 | 
38 | $scope.update = function() {
39 |   console.log($scope.contact._id);
40 |   $http.put('/contactlist/' + $scope.contact._id, $scope.contact).success(function(response) {
41 |     refresh();
42 |   })
43 | };
44 | 
45 | $scope.deselect = function() {
46 |   $scope.contact = "";
47 | }
48 | 
49 | }]);


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE>
 2 | <html ng-app="myApp">
 3 | <head>
 4 | <!-- Latest compiled and minified CSS -->
 5 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 6 | 
 7 | <!-- Optional theme -->
 8 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
 9 | 
10 |   <title>Contact List App</title>
11 | </head>
12 | <body>
13 |   <div class="container" ng-controller="AppCtrl">
14 |     <h1>Contact List App</h1>
15 | 
16 |     <table class="table">
17 |       <thead>
18 |         <tr>
19 |           <th>Name</th>         
20 |           <th>Email</th>
21 |           <th>Number</th>
22 |           <th>Action</th>
23 |           <th>&nbsp;</th>
24 |         </tr>
25 |       </thead>
26 |       <tbody>
27 |         <tr>
28 |           <td><input class="form-control" ng-model="contact.name"></td>
29 |           <td><input class="form-control" ng-model="contact.email"></td>
30 |           <td><input class="form-control" ng-model="contact.number"></td>
31 |           <td><button class="btn btn-primary" ng-click="addContact()">Add Contact</button></td>
32 |           <td><button class="btn btn-info" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
33 |         </tr>
34 |         <tr ng-repeat="contact in contactlist">
35 |           <td>{{contact.name}}</td>
36 |           <td>{{contact.email}}</td>
37 |           <td>{{contact.number}}</td>
38 |           <td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
39 |           <td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td>
40 |         </tr>
41 |       </tbody>
42 |     </table>
43 | 
44 |   </div>
45 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
46 | <script src="controllers/controller.js"></script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // MEAN Stack RESTful API Tutorial - Contact List App
 2 | 
 3 | var express = require('express');
 4 | var app = express();
 5 | var mongojs = require('mongojs');
 6 | var db = mongojs('contactlist', ['contactlist']);
 7 | var bodyParser = require('body-parser');
 8 | 
 9 | app.use(express.static(__dirname + '/public'));
10 | app.use(bodyParser.json());
11 | 
12 | app.get('/contactlist', function (req, res) {
13 |   console.log('I received a GET request');
14 | 
15 |   db.contactlist.find(function (err, docs) {
16 |     console.log(docs);
17 |     res.json(docs);
18 |   });
19 | });
20 | 
21 | app.post('/contactlist', function (req, res) {
22 |   console.log(req.body);
23 |   db.contactlist.insert(req.body, function(err, doc) {
24 |     res.json(doc);
25 |   });
26 | });
27 | 
28 | app.delete('/contactlist/:id', function (req, res) {
29 |   var id = req.params.id;
30 |   console.log(id);
31 |   db.contactlist.remove({_id: mongojs.ObjectId(id)}, function (err, doc) {
32 |     res.json(doc);
33 |   });
34 | });
35 | 
36 | app.get('/contactlist/:id', function (req, res) {
37 |   var id = req.params.id;
38 |   console.log(id);
39 |   db.contactlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
40 |     res.json(doc);
41 |   });
42 | });
43 | 
44 | app.put('/contactlist/:id', function (req, res) {
45 |   var id = req.params.id;
46 |   console.log(req.body.name);
47 |   db.contactlist.findAndModify({
48 |     query: {_id: mongojs.ObjectId(id)},
49 |     update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
50 |     new: true}, function (err, doc) {
51 |       res.json(doc);
52 |     }
53 |   );
54 | });
55 | 
56 | app.listen(3000);
57 | console.log("Server running on port 3000");


--------------------------------------------------------------------------------