javascript - Node.JS 和 AngularJS 路由以及 API 路由

Question

所以我使用 Node.JS 和 Express 作为我的后端，并使用 servlet 作为 API。我使用 AngularJS 作为前端。

通过多次Google搜索，我终于解决了将ngRoute与AngularJS和Node.js一起使用的问题。最终结果是这样的:

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);

这当然是我项目根目录下的 app.js 文件的摘录。

现在，当我调用 /api/auth/ 时，我被告知 node.js 找不到我的 View 。如果我删除 app.use('*', index) API 会再次工作，但 'ngRoute' 不起作用。

我怎样才能达到两者一起工作的地步？我还想保持地址栏 URL 尽可能干净。

我的项目是通过使用 yeoman 调用 yo Node 开始的(如果这对我的应用程序的文件/文件夹结构中的任何内容有帮助的话)。

更新

我没有得到任何答案或评论，因此提供完整的 app.js 文件可能会有所帮助并帮助我解决这个问题。在这里。

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;

更新2

我注意到“ngRoute 不起作用”这一说法含糊其辞。如果我删除 app.use('*', index) 如果我尝试访问基地址以外的地址，则会收到此错误。 尝试访问api/auth时我也收到此错误

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

更新3

我在 app.js 中的路由引用的 index.js 文件也包含此文件。

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

但是，API 调用不应该转到index.js 文件。应该去 Auth.js。

更新4

根据要求，这是我来自 AngularJS 的 $routeProvider。

$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);

这也是我的文件结构的简单总结

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

先调用api的路由，然后调用angularjs索引。

例如: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);

了解更多请访问here .