1

So Im trying to work AngularJS and Node. I am trying to set up client side routing but Im having some problems.

EDIT

So I changed up some code following https://github.com/scotch-io/starter-node-angular that @PareshGami suggested. I get the URLS to be hit but now the actual content doesnt load.

Here is my updated Code:

server.js:

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    mongoose = require('mongoose');




app.use(bodyParser.json());


require('./server/routes')(app);

app.use('/js', express.static(__dirname + '/client/js'));
app.use('/views', express.static(__dirname + '/client/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/node_modules', express.static(__dirname +'/node_modules'));



app.listen(3000);
console.log('Im Listening...');
exports = module.exports = app;

my angular app.js:

(function (angular) {
    'use strict';
    var app = angular.module('eos', [
        'ngRoute',
        'ngResource',
        'eos.opsCtrl',
        'eos.dashboardCtrl'
        ]);

    app.config(function ($routeProvider, $locationProvider){
        $routeProvider.when(
           '/',
           {
               templateUrl: 'views/dashboard.html',
               pageName: 'Dashboard',
               controller: 'dashboardCtrl'
           }
       );
        $routeProvider.when(
           '/ops',
            {
                templateUrl: 'views/ops.html',
                pageName: 'Operations',
                controller: 'opsCtrl'
            }
        );
        $routeProvider.otherwise({redirectTo: '/'});
        $locationProvider.html5Mode(true);

    });

}(window.angular));

My routes.js (new):

var opsController = require('./controllers/opsController');

module.exports = function(app) {
//path.join(__dirname, 'client');
    // server routes ===========================================================
    // handle things like api calls
    // authentication routes

    app.get('/api/ops', opsController.list);
    app.post('/api/ops', opsController.create);


    // frontend routes =========================================================
    // route to handle all angular requests
    app.get('*', function(req, res) {
        res.sendFile('index.html', { root: './client' });
    });

};

Then rest is identical. And suggestions on why it is not loading the content in the ng-view?


FINALLY GOT IT TO WORK! My server.js was set up wrong.

Here is the correct server.js. Notice position of:

require('./server/routes')(app);

it needed to be father down for what I assume is the compile sequence

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    mongoose = require('mongoose'),
    methodOverride = require('method-override');





// get all data/stuff of the body (POST) parameters
app.use(bodyParser.json());
// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));




app.use(methodOverride('X-HTTP-Method-Override'));
app.use('/js', express.static(__dirname + '/client/js'));
app.use('/views', express.static(__dirname + '/client/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/node_modules', express.static(__dirname +'/node_modules'));


require('./server/routes')(app);
app.listen(3000);
console.log('Im Listening...');
exports = module.exports = app;
6
  • 1
    You should follow this tutorial scotch.io/tutorials/… very article. Commented Aug 14, 2015 at 3:04
  • thanks paresh-gami ill check it out! Commented Aug 14, 2015 at 3:25
  • @PareshGami I updated my code to be very similar to that tutorial. It did resolve my initial issue so thank you for the suggestion! Commented Aug 14, 2015 at 4:18
  • @PareshGami I GOT IT. If you want to suggest this as a answer I will gladly give you credit it for it! Commented Aug 14, 2015 at 4:54
  • Now its working fine? Commented Aug 14, 2015 at 5:56

1 Answer 1

1

I was directed by PareshGami to look over this site 'setting-up-a-mean-stack-single-page-application'. After following that I was able to get the routing to work. The key to my problem was the ordering of my server.js file and the require('./server/routes')(app); part.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.