Cleanup of files and config options

* Todo routes outsourced into own file
* Added config.js for more than database options
 * http port
 * logging format
* Header comments contain filepath
* Added some NPM packages to be able to start integrating tests for what I've written so far.

app/models/todo.js

@@ -1,4 +1,4 @@
-// public/models/todo.js
+// app/models/todo.js
 // grab the mongoose module
 var mongoose = require('mongoose');
 

app/routes.js

@@ -1,64 +1,15 @@
-var Todo = require('./models/todo');
+// app/routes.js
+
 var path = require('path');
 
 module.exports = function (app) {
-    // api ---------------------------------------------------------------------
+    // Add route for TODOs
-    // get all todos
+    require('./todos')(app);
-    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) {
-                console.log(err);
-                res.status(400)
-                    .send(err);
-                return;
-            }
-
-            // 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(path.join(__dirname,'../public/views/', 'index.html')); // load the single view file (angular will handle the page changes on the front-end)
+        // load the single view file (angular will handle the page changes
+        // on the front-end)
+        res.sendFile(path.join(__dirname,'../public/views/', 'index.html'));
     });
 };

app/todos.js

@@ -0,0 +1,51 @@
+// app/todos.js
+var Todo = require('./models/todo');
+var path = require('path');
+
+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 (err) {
+                console.log(err);
+                res.status(500).send(err)
+                return;
+            }
+             // return all todos in JSON format
+            res.json(todos);
+        });
+    });
+
+    // 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) {
+                console.log(err);
+                res.status(500).send(err);
+                return;
+            }
+            res.status(200).send("Todo created");
+        });
+
+    });
+
+    // delete a todo
+    app.delete('/api/todos/:todo_id', function (req, res) {
+        Todo.remove({
+            _id: req.params.todo_id
+        }, function (err, todo) {
+            if (err) {
+                console.log(err);
+                res.status(500).send(err);
+                return;
+            }
+            res.status(200).send("Todo deleted");
+        });
+    });
+};

config/config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    db: {
+        url: 'mongodb://localhost:27017/somedb'
+    },
+    http: {
+        port: 8080,
+        logging: {
+            // See https://github.com/expressjs/morgan#predefined-formats
+            format: 'dev'
+        }
+    }
+}

config/db.js

@@ -1,3 +0,0 @@
-module.exports = {
-    url: 'mongodb://localhost:27017/somedb'
-}

index.js

@@ -25,17 +25,16 @@ var bodyParser = require('body-parser');
 // simulate DELETE and PUT (express4)
 var methodOverride = require('method-override');
 
+// For path joining
+var path = require('path');
 
 // configuration ===============================================================
 
 // config files
-var db = require('./config/db');
+var config = require('./config/config.js');
-
-// set our port
-var port = process.env.PORT || 8080;
 
 // connect to mongoDB (credentials in config/db.js)
-mongoose.connect(db.url, function (error) {
+mongoose.connect(config.db.url, function (error) {
     if (error) {
         console.log("Error connecting to the MongoDB database.")
         console.log(error);
@@ -47,10 +46,10 @@ mongoose.connect(db.url, function (error) {
 // set the static files location /public/img will be /img for users
 app.use(express.static(__dirname + '/public'));
 // Bower components must also be publically available.
-app.use('/bower_components', express.static(__dirname + '/bower_components'));
+app.use('/bower_components', express.static(path.join(__dirname, '/bower_components')));
 
 // log every request to the console
-app.use(morgan('dev'));
+app.use(morgan(config.http.logging.format));
 
 // parse application/x-www-form-urlencoded
 app.use(bodyParser.urlencoded({
@@ -79,8 +78,8 @@ require('./app/routes')(app); // configure our routes
 
 
 // listen (start app with node server.js) ======================================
-app.listen(port);
+app.listen(config.http.port);
-console.log("App listening on port " + port);
+console.log("App listening on port " + config.http.port);
 
 // expose app
 exports = module.exports = app;

package.json

@@ -5,7 +5,16 @@
   "description": "A web-based frontend to browse through the repositories and images in your docker registry.",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "postinstall": "bower install",
+    "prestart": "npm install",
+    "start": "http-server -a localhost -p 8000 -c-1",
+    "pretest": "npm install",
+    "test": "karma start karma.conf.js",
+    "test-single-run": "karma start karma.conf.js  --single-run",
+    "preupdate-webdriver": "npm install",
+    "update-webdriver": "webdriver-manager update",
+    "preprotractor": "npm run update-webdriver",
+    "protractor": "protractor e2e-tests/protractor.conf.js"
   },
   "repository": {
     "type": "git",
@@ -34,12 +43,15 @@
     "morgan": "^1.6.1"
   },
   "devDependencies": {
+    "bower": "^1.7.7",
+    "http-server": "^0.9.0",
     "jasmine-core": "^2.4.1",
     "karma": "^0.13.21",
     "karma-chrome-launcher": "^0.2.2",
     "karma-firefox-launcher": "^0.1.7",
     "karma-jasmine": "^0.3.7",
     "karma-junit-reporter": "^0.3.8",
-    "protractor": "^3.1.1"
+    "protractor": "^3.1.1",
+    "shelljs": "^0.6.0"
   }
 }

public/js/app.js

@@ -3,5 +3,5 @@
 'use strict';
 
 var app = angular.module('docker-registry-frontend', [
-    'ngRoute', 'appRoutes', 'MainCtrl', 'TodoCtrl', 'TodoService'
+    'ngRoute', 'ngResource', 'appRoutes', 'MainCtrl', 'TodoCtrl', 'TodoService'
 ]);

public/js/appRoutes.js

@@ -11,7 +11,7 @@ angular.module('appRoutes', [])
                 controller: 'MainController'
             })
             .when('/todos', {
-                templateUrl: 'views/todo.html',
+                templateUrl: 'views/todos.html',
                 controller: 'TodoController'
             });
 

public/js/controllers/TodoCtrl.js

@@ -8,35 +8,34 @@ angular.module('TodoCtrl', [])
         function ($scope, $http, Todo) {
             $scope.formData = {};
 
-            // when landing on the page, get all todos and show them
+            $scope.fetchTodos = function() {
-            $scope.todos = Todo.get();
+                console.log("fetching todos...");
+                Todo.query(function(todos){
+                    $scope.todos = todos;
+                });
+            }
+
+            // Fetch todos on page load
+            $scope.fetchTodos();
 
-            // when submitting the add form, send the text to the node API
             $scope.createTodo = function () {
-                Todo.create($scope.formData);
+                console.log("creating todo...");
-                /*$http.post('/api/todos', $scope.formData)
+                Todo.save($scope.formData, function success () {
-                    .success(function (data) {
+                    // Reset input field on success
-                        $scope.formData = {}; // clear the form so our user is ready to enter another
+                    $scope.formData.text = '';
-                        $scope.todos = data;
+                    $scope.fetchTodos();
-                        console.log(data);
+                }, function error (err) {
-                    })
+                    console.log(err);
-                    .error(function (data) {
+                });
-                        console.log('Error');
-                        console.log(data);
-                    });*/
             };
 
-            // delete a todo after checking it
             $scope.deleteTodo = function (id) {
-                Todo.delete(id);
+                console.log("deleting todos...");
-                /*$http.delete('/api/todos/' + id)
+                Todo.delete({id: id}, function success () {
-                      .success(function (data) {
+                    $scope.fetchTodos();
-                          $scope.todos = data;
+                }, function error (err) {
-                          console.log(data);
+                    console.log(err);
-                      })
+                });
-                      .error(function (data) {
-                          console.log('Error: ' + data);
-                      });*/
             };
 
         }

public/js/services/TodoService.js

@@ -1,46 +1,13 @@
 // public/js/services/TodoService.js
-angular.module('TodoService', [])
+angular.module('TodoService', ['ngResource'])
-    .factory('Todo', ['$http', function ($http) {
+  .factory('Todo', ['$resource', function ($resource) {
-
+    return $resource('/api/todos', {}, {
-        return {
+        // See https://docs.angularjs.org/api/ngResource/service/$resource
-            // call to get all todos
+        // for a list of methods that are implemented by default (incl.
-            get: function () {
+        // get, save, query, remove, delete).
-                return $http.get('/api/todos')
+        delete: {
-                    .success(function (data) {
+            url: '/api/todos/:id',
-                        console.log(data);
+            method: 'DELETE',
-                    })
-                    .error(function (data) {
-                        console.log('Error: ' + data);
-                    });
-            },
-
-
-            // these will work when more API routes are defined on the Node side of things
-            // call to POST and create a new todo
-            create: function (todoData) {
-                return $http.post('/api/todos', $scope.formData)
-                    .success(function (data) {
-                        $scope.formData = {}; // clear the form so our user is ready to enter another
-                        $scope.todos = data;
-                        console.log(data);
-                    })
-                    .error(function (data) {
-                        console.log('Error');
-                        console.log(data);
-                    });
-            },
-
-            // call to DELETE a todo
-            delete: function (id) {
-                return $http.delete('/api/todos/' + id)
-                    .success(function (data) {
-                        $scope.todos = data;
-                        console.log(data);
-                    })
-                    .error(function (data) {
-                        console.log('Error: ' + data);
-                    });
-            }
         }
-
+    });
-    }]);
+  }]);

public/views/index.html

@@ -2,7 +2,7 @@
 <!doctype html>
 
 <!-- ASSIGN OUR ANGULAR MODULE -->
-<html ng-app="docker-registry-frontend">
+<html xmlns:ng="http://angularjs.org" ng-app="docker-registry-frontend">
     <head>
         <!-- META -->
         <meta charset="utf-8">
@@ -22,6 +22,7 @@
         <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="/bower_components/angular/angular.js"></script>
         <script src="/bower_components/angular-route/angular-route.min.js"></script>
+        <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
         <script src="/js/controllers/MainCtrl.js"></script>
         <script src="/js/controllers/TodoCtrl.js"></script>
         <script src="/js/services/TodoService.js"></script>
@@ -41,7 +42,7 @@
                 <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href="/">Todos</a>
+                        <a href="/todos">Todos</a>
                     </li>
                 </ul>
             </nav>

public/views/todos.html

@@ -8,7 +8,7 @@
 
 <!-- TODO LIST -->
 <div id="todo-list" class="row">
-    Error: Source sample is missing.
+    <button type="button" class="btn btn-primary" ng-click="fetchTodos()">Fetch Todos</button>
     <div class="col-sm-4 col-sm-offset-4">
 
         <!-- LOOP OVER THE TODOS IN $scope.todos -->