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

Question

I'm following a few tutorials I found online for creating a web app that uses a RESTful API with the MEAN stack.

I'm having trouble implementing both the API server and the Angular routes together. I've created a server.js file that handles routes to /api/ , so for example I have:

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

So when the API server gets a request it just sends back a JSON message. Now I also have a public folder with a app.js file that has the Angular code in it:

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

So when I start my server from the command line running node server.js and go to localhost:5000 (or whatever port it is), I get a Cannot GET /

I'm assuming this is because I don't have a route in my server.js file to '/' .

How do I run the app off the app.js file first and have it use the API?

Answer 1

You cannot GET / because the app has not been mounted to be served on your server. To do this, you need to create an entry point which will be server from the server, which in turn will handle all your angular routes, views, controllers, etc.
In your server.js file, for every request that does not match any of those api routes you defined, you need to forward it to your angular app, in which ng-route will load the view corresponding to the URL you requested.
To mount:

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

Now this entry.html will contain your angular app (or any front end framework you use for that matter)

Answer 2

You don't need to create route for index.html file just add below line to server file and place index.html file into client folder.

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

When you start your server and open http://localhost:5000 then index.html file automatically render.

Answer 3

You can do it with the following 4 steps:

1- create your index.html file and put apis in there:

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

2- require newly created index.html file in server.js:

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

3- create server and listen to a port:

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

4- use index.html file in server.js:

app.use('/',routes);