Angular (not working) & Routing changes (To be changed)

app.js

@@ -13,9 +13,28 @@ const app = express();
 const server = http.createServer(app);
 const io = require('socket.io').listen(server);
 
+const Middlewares = require('./server/api/config/middlewares/base/MiddlewaresBase');
+
+const mongoose = require('mongoose'),
+    db = mongoose.connection,
+    User = require('./server/models/user');
+
+mongoose.Promise = global.Promise;
+mongoose.connect('mongodb://localhost/draw');
+db.on('error', console.error.bind(console, 'connection error:'));
+db.once('open', function () {
+    console.log('Connected to DB');
+});
+
+
+
 //app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
+app.use('/auth', (req, res) => {
+    Middlewares.configuration; //Niet af...
+});
+
 server.listen(8085, () => {
     console.log('App listening at http://localhost:8085');
 });
@@ -28,11 +47,14 @@ app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: false}));
 app.use(cookieParser());
 //app.use(express.static(path.join(__dirname, 'public')));
-app.use(express.static('./build/'));
-//app.use('/*', express.static('./build/index.html'));
 
-app.use('/', routes);
-app.use('/users', users);
+//app.use(express.static('./build/'));
+//app.use('/*', express.static('./build/index.html')); //Always keep as last route
+app.use('/js', express.static(__dirname + 'build/'));
+app.use('/css', express.static(__dirname + 'build/'));
+app.get('/*', function (req, res) {
+    res.sendFile(__dirname + '/build/index.html');
+});
 
 
 io.on('connection', (socket) => {

gulpfile.babel.js

@@ -16,10 +16,10 @@ import concat from 'gulp-concat';
 import minifyCSS from 'gulp-minify-css';
 
 // Where our files are located
-var jsFiles = "public/assets/javascripts/*.js";
-var viewFiles = "views/*.ejs";
+var jsFiles   = "public/app/**/*.js";
+var viewFiles = "public/app/**/*.html";
 
-var interceptErrors = function (error) {
+var interceptErrors = (error) => {
     var args = Array.prototype.slice.call(arguments);
 
     // Send error to notification center with gulp-notify
@@ -32,12 +32,12 @@ var interceptErrors = function (error) {
     this.emit('end');
 };
 
-gulp.task('default', ['build', 'browser-sync'], function () {
+gulp.task('default', ['build', 'browser-sync'], () => {
     gulp.watch(['./views/**.**', './public/**/*'], ['build']);
     gulp.watch('./build/', browserSync.reload());
 });
 
-gulp.task('browser-sync', ['nodemon'], function () {
+gulp.task('browser-sync', () => {
     browserSync.init(['./build/**.**'], {
         port: 8080,
         proxy: {
@@ -48,25 +48,25 @@ gulp.task('browser-sync', ['nodemon'], function () {
 });
 
 gulp.task('nodemon', (cb) => {
-    var started = false;
+    /*var started = false;
 
     return nodemon({
-        script: 'app.js'
+        script: 'node run dev'
     }).on('start', function () {
         if (!started) {
             cb();
             started = true;
         }
-    });
+    });*/
 });
 
 gulp.task('build', ['browserify', 'css'], () => {
     gulp.start('html');
     //gulp.start() will have to be replaced by gulp.series() when gulp 4.0 is released.
 });
 
-gulp.task('browserify', ['views'], function () {
-    return browserify(['./public/assets/javascripts/main.js'])
+gulp.task('browserify', ['views'], () => {
+    return browserify(['./public/assets/javascripts/main.js', './public/app/app.js'])
             .transform(babelify, {presets: ["es2015"]})
             .transform(ngAnnotate)
             .bundle()
@@ -75,25 +75,25 @@ gulp.task('browserify', ['views'], function () {
             .pipe(gulp.dest('./build/'));
 });
 
-gulp.task('views', function () {
+/*gulp.task('views', () => {
     return gulp.src(viewFiles)
             .pipe(templateCache({
                 standalone: true
             }))
             .on('error', interceptErrors)
             .pipe(rename("app.templates.js"))
             .pipe(gulp.dest('./public/config/'));
-});
+});*/
 
-gulp.task('css', function () {
+gulp.task('css', () => {
     gulp.src('./public/assets/stylesheets/*.css')
             .pipe(minifyCSS())
             .pipe(concat('style.css'))
             .on('error', interceptErrors)
             .pipe(gulp.dest('./build'));
 });
 
-gulp.task('html', function () {
+gulp.task('html', () => {
     return gulp.src("./views/index.ejs")
             .pipe(ejs({}, {ext: '.html'}))
             .pipe(htmlreplace({
@@ -104,6 +104,16 @@ gulp.task('html', function () {
             .pipe(gulp.dest('./build/'));
 });
 
+gulp.task('views', () => {
+  return gulp.src(viewFiles)
+      .pipe(templateCache({
+        standalone: true
+      }))
+      .on('error', interceptErrors)
+      .pipe(rename("./public/app/config/app.templates.js"))
+      .pipe(gulp.dest('./src/js/config/'));
+});
+
 gulp.task('clean', () => {
     del(['./build/**', '!./build', '!./build/jquery-3.1.1.min.js']).then(paths => {
         console.log('Deleted files and folders:\n', paths.join('\n'));

package.json

@@ -4,8 +4,9 @@
   "description": "Project WebApps 3",
   "main": "app.js",
   "scripts": {
-    "start": "node app.js",
-    "test": "make test"
+    "dev": "nodemon --exec babel-node app.js",
+    "prestart": "babel ./app.js --out-dir ./build",
+    "start": "node ./build/app.js"
   },
   "repository": {
     "type": "git",
@@ -18,6 +19,7 @@
   },
   "homepage": "https://github.com/gevalo1/WebApps3#readme",
   "devDependencies": {
+    "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.7",
     "babel-plugin-transform-runtime": "^6.15.0",
@@ -47,13 +49,15 @@
   "dependencies": {
     "angular": "^1.5.8",
     "angular-ui-router": "^0.3.1",
+    "babel-cli": "^6.18.0",
     "babel-register": "6.18.0",
     "babel-runtime": "^6.18.0",
     "body-parser": "1.15.2",
     "cookie-parser": "1.4.3",
     "ejs": "2.5.2",
     "express": "4.14.0",
     "gulp": "^3.9.1",
+    "mongoose": "^4.6.6",
     "morgan": "1.7.0",
     "serve-favicon": "2.3.0",
     "socket.io": "1.5.1"

public/app.js → public/app/app.js

@@ -10,17 +10,17 @@ import './config/app.templates';
 // Import our app functionaity
 import './components';
 import './services';
+import './home';
 import './auth';
 
-
-// Create and bootstrap application
 const requires = [
+    'ui.router',
     'app.components',
     'app.services',
-    'app.auth',
+    'app.home',
+    'app.auth'
 ];
 
-// Mount on window for testing
 window.app = angular.module('app', requires);
 
 angular.module('app').constant('AppConstants', constants);

public/app/auth/auth.config.js

@@ -1,33 +1,33 @@
 function AuthConfig($stateProvider, $httpProvider) {
-  'ngInject';
+    'ngInject';
 
-  // Define the routes
-  $stateProvider
+    // Define the routes
+    $stateProvider
+            .state('app.login', {
+                url: '/login',
+                controller: 'AuthCtrl as $ctrl',
+                templateUrl: 'auth/auth.html',
+                title: 'Sign in',
+                resolve: {
+                    auth: function (User) {
+                        return User.ensureAuthIs(false);
+                    }
+                }
+            })
 
-  .state('app.login', {
-    url: '/login',
-	controller: 'AuthCtrl as $ctrl',
-    templateUrl: 'auth/auth.html',
-    title: 'Sign in',
-	resolve: {
-		auth: function(User) {
-			return User.ensureAuthIs(false);
-		}
-	}
-  })
+            .state('app.register', {
+                url: '/register',
+                controller: 'AuthCtrl as $ctrl',
+                templateUrl: 'auth/auth.html',
+                title: 'Sign up',
+                resolve: {
+                    auth: function (User) {
+                        return User.ensureAuthIs(false);
+                    }
+                }
+            });
 
-  .state('app.register', {
-    url: '/register',
-	controller: 'AuthCtrl as $ctrl',
-    templateUrl: 'auth/auth.html',
-    title: 'Sign up',
-	resolve: {
-		auth: function(User) {
-			return User.ensureAuthIs(false);
-		}
-	}
-  });
-
-};
+}
+;
 
 export default AuthConfig;

public/app/auth/auth.html

@@ -38,6 +38,13 @@ <h1 class="text-xs-center" ng-bind="::$ctrl.title"></h1>
                 placeholder="Password"
                 ng-model="$ctrl.formData.password" />
             </fieldset>
+
+              <!--<fieldset class="form-group">
+              <input class="form-control form-control-lg"
+                type="password"
+                placeholder="Confirm Password"
+                ng-model="$ctrl.formData.password" />
+            </fieldset>-->
 
             <button class="btn btn-lg btn-primary pull-xs-right"
               type="submit" ng-bind="$ctrl.title">

public/app/config/app.config.js

@@ -1,29 +1,29 @@
 import authInterceptor from './auth.interceptor';
 
 function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) {
-  'ngInject';
-
-  $httpProvider.interceptors.push(authInterceptor);
+    'ngInject';
 
-  /*
-    If you don't want hashbang routing, uncomment this line.
-    Our tutorial will be using hashbang routing though :)
-  */
-  // $locationProvider.html5Mode(true);
+    $httpProvider.interceptors.push(authInterceptor);
 
-  $stateProvider
-  .state('app', {
-    abstract: true,
-    templateUrl: 'layout/app-view.html',
-	resolve: {
-		auth: function(User) {
-			return User.verifyAuth();
-		}
-	}
-  });
+    /*
+     If you don't want hashbang routing, uncomment this line.
+     Our tutorial will be using hashbang routing though :)
+     */
+    // $locationProvider.html5Mode(true);
 
-  $urlRouterProvider.otherwise('/');
+    $stateProvider
+            .state('app', {
+                abstract: true,
+                templateUrl: 'layout/app-view.html',
+                resolve: {
+                    auth: function (User) {
+                        return User.verifyAuth();
+                    }
+                }
+            });
+
+    $urlRouterProvider.otherwise('/');
 
 }
 
-export default AppConfig;
+export default AppConfig;

public/app/config/app.constants.js

@@ -1,8 +1,7 @@
 const AppConstants = {
   //api: 'http://localhost:3000/api',
-  api: 'https://conduit.productionready.io/api',
   jwtKey: 'jwtToken',
-  appName: 'Conduit',
+  appName: 'EvilDraw',
 };
 
 export default AppConstants;

public/app/config/app.run.js

@@ -1,21 +1,21 @@
 function AppRun(AppConstants, $rootScope) {
-  'ngInject';
+    'ngInject';
 
-  // change page title based on state
-  $rootScope.$on('$stateChangeSuccess', (event, toState) => {
-    $rootScope.setPageTitle(toState.title);
-  });
+    // change page title based on state
+    $rootScope.$on('$stateChangeSuccess', (event, toState) => {
+        $rootScope.setPageTitle(toState.title);
+    });
 
-  // Helper method for setting the page's title
-  $rootScope.setPageTitle = (title) => {
-    $rootScope.pageTitle = '';
-    if (title) {
-      $rootScope.pageTitle += title;
-      $rootScope.pageTitle += ' \u2014 ';
-    }
-    $rootScope.pageTitle += AppConstants.appName;
-  };
+    // Helper method for setting the page's title
+    $rootScope.setPageTitle = (title) => {
+        $rootScope.pageTitle = '';
+        if (title) {
+            $rootScope.pageTitle += title;
+            $rootScope.pageTitle += ' \u2014 ';
+        }
+        $rootScope.pageTitle += AppConstants.appName;
+    };
 
 }
 
-export default AppRun;
+export default AppRun;