具有API路由的Node.JS和AngularJS路由

Question

So I am using Node.JS with Express as my backend and my servlet for API. I'm using AngularJS as my front end.

Through many Google searches, I finally solved my problem of using ngRoute with AngularJS and Node.js. And ended up with this:

var index = require('./routes/index');
var auth  = require('./routes/auth');

var app = express();

app.set('views', path.join(__dirname, 'views'));

app.use('/api/auth', auth);
app.use('/', index);
app.use('*', index);

This is of course an excerpt of my app.js file at the root of my project.

Now when I make a call to my /api/auth/ I get told that node.js can't find my view. If I remove the app.use('*', index) the API works again but 'ngRoute' doesn't work.

How can I get to a point where both are working together? I also want to keep the address bar url as clean as possible.

My project was started with a call to yo node using yeoman if that helps any in the file/folder structure of my application.

Update

I'm not getting any answers or comments so maybe providing my full app.js file will be helpful and help me figure this out. Here it is.

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var auth = require('./routes/auth');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api/auth', auth);

app.use('/', index);
app.use('*', index);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

Update 2

I have come to notice that the statement "ngRoute doesn't work" is vague. If I remove app.use('*', index) I receive this error if I try to go to an address other than the base address. I also receive this error when trying to access the api/auth

Error: Failed to lookup view "error" in views directory "/Users/mitch/websites/splatform/views"

Update 3

The index.js file that my routes in app.js refer to includes this as well.

app.get('/', function(req, res, next) {
    res.sendFile(path.join(__dirname, '../', 'views', 'index.html'));
});

But, API calls shouldn't be going to the index.js File. Should be going to Auth.js.

Update 4

As requested, here is my $routeProvider from AngularJS.

$routeProvider
            .when('/', {
                templateUrl: 'templates/home.html',
                resolve: {
                    lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load ('frontStyles');
                    }]
                }
            })
            .when('/app/login', {
                templateUrl: 'templates/login.html',
                resolve: {
                    lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load ('appStyles', 'appScripts');
                    }]
                }
            })
            .when('/app/dashboard', {
                templateUrl: 'templates/dashboard.html',
                resolve: {
                    lazy: ['$ocLazyLoad', function($ocLazyLoad) {
                        return $ocLazyLoad.load ('appStyles', 'appScripts');
                    }]
                }
            })
            .otherwise({ redirectTo: '/' });

        $locationProvider.html5Mode(true);

Also here is a simple run down of my file structure

app.js
routes
  --auth.js
  --index.js
views
  --index.html ( angularJS Base )
public
  --directives
  --fonts
  --images
  --javascripts
  --stylesheets
  --templates ( Views that angularjs uses in `ng-view`

Answer 1

Call api's routes first then angularjs index.

For example: routesWeb.js

    'use strict';
    var express = require('express');
    var path = require('path');

    module.exports = function(app) {

        var path_web = path.resolve(__dirname, '..');
        var path_origin = path.resolve(__dirname, '../../');

        app.use('/scripts',express.static(path_web + '/scripts'));
        app.use('/pages',express.static(path_web + '/pages'));
        app.use('/node_modules',express.static(path_origin + '/node_modules'));

        app.route('/*')
        .get(function(req, res){
            res.sendFile(path_web + '/pages/ng-index.html');
        });
    }

pessoaRota.js

'use strict';
module.exports = function(app) {

    var pessoasCtrl = require('../controllers/pessoasController');  

    app.route('/api/pessoas')
        .get(pessoasCtrl.obter_todos_pessoas);

    app.route('/api/pessoas/:pessoaId')
        .get(pessoasCtrl.obter_pessoa_por_id);

    app.route('/api/pessoasFeias')
        .get(pessoasCtrl.obter_pessoas_feias);

};

server.js

var express = require('express');
var app = express();
var port = process.env.PORT || 3000;
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
app.use(bodyParser.json());
app.use(cookieParser());


var server = app.listen(port, function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log("Aplicação está on nesse endereço http://%s:%s", host, port)
});

require('./api/routes/pessoaRota.js')(app);
require('./web/routes/routesWeb.js')(app);

For more go here .