如何使用 Angular app.js 文件运行 NodeJS API？答案

【问题标题】：How to run NodeJS API with Angular app.js file?如何使用 Angular app.js 文件运行 NodeJS API？
【发布时间】：2017-05-15 09:22:54
【问题描述】：

我正在学习一些我在网上找到的教程，用于创建一个使用带有 MEAN 堆栈的 RESTful API 的 Web 应用程序。

我无法同时实现 API 服务器和 Angular 路由。我创建了一个server.js 文件来处理到/api/ 的路由，例如我有：

...
app.get('/api', function(req, res) {
    res.status(200).json({"message": "Welcome to the app"});
});

因此，当 API 服务器收到请求时，它只会发回一条 JSON 消息。现在我还有一个公用文件夹，其中包含一个 app.js 文件，其中包含 Angular 代码：

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'views/index.html',
        controller: 'AppController',
        resolve: {
            message: function(Message) {
                return Message.getMessage();
            }
        }
    })
    .service("Message", function($http) {
        this.getMessage = function() {
            return $http.get('/api')
            .then(function(response) {
                return response;
            }, function(response) {
                alert("Error retrieving message");
            });
        }
    })
    .controller("AppController", function(message, $scope) {
        $scope.message = message.data;
    });
});

所以当我从运行node server.js 的命令行启动我的服务器并转到localhost:5000（或任何端口）时，我得到一个Cannot GET /

我假设这是因为我的server.js 文件中没有到'/' 的路由。

如何先从 app.js 文件运行应用程序并让它使用 API？

【问题讨论】：

您的 server.js 中需要一个入口点来运行应用程序。你用的是快递吗？
是的，我正在使用快递。我在 server.js 文件中定义了所有 API 路由。我只是不确定如何将它连接到有角度的一面

标签： javascript angularjs node.js rest mean-stack

【解决方案1】：

您无法获取 /，因为该应用尚未安装到您的服务器上。为此，您需要从服务器创建一个入口点，该入口点将处理您的所有角度路由、视图、控制器等。
在您的 server.js 文件中，对于与您定义的任何 API 路由不匹配的每个请求，您需要将其转发到您的 Angular 应用程序，其中 ng-route 将加载与您请求的 URL 对应的视图。
挂载：

app.get('*', function(request, response){
  response.sendfile('/path/to/your/entry.html');
});

现在这个 entry.html 将包含您的 Angular 应用程序（或您为此使用的任何前端框架）

【讨论】：

【解决方案2】：

您不需要为 index.html 文件创建路由，只需将以下行添加到服务器文件并将 index.html 文件放入客户端文件夹。

app.use(express.static(path.join(__dirname, '<client_folder_name>')));

当您启动服务器并打开http://localhost:5000 时，index.html 文件会自动呈现。

【讨论】：

【解决方案3】：

您可以通过以下 4 个步骤来完成：

1- 创建您的 index.html 文件并将 apis 放入其中：

app.get('/api', function(req, res) {
    res.status(200).json({"message": "Welcome to the app"});
});

2- 需要在 server.js 中新建 index.html 文件：

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

3- 创建服务器并监听端口：

var server = app.listen(5000, function () {
    console.log('nodejs server is listening on port 5000!');
});

4- 在 server.js 中使用 index.html 文件：

app.use('/',routes);

【讨论】：