current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
    
You need an entry point in your server.js that runs the app. Are you using express? – Zeokav 21 hours ago
    
Yes I am using express. I defined all the API routes in the server.js file. I'm just not sure how to connect it to the angular side – Timothy Fisher 21 hours ago
up vote 1 down vote accepted

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)

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.