Routing problems using NodeJS and AngularJS

Question

I am building my first application using NodeJS & ExpressJS for the backend and AngularJS front end. I have all my front end routes working how I want, but I cannot figure out how to properly configure the Node backend so that when a specific URL is entered into the address bar, Node renders only the same Angular app every time.

For example, if I use <a href="/about">About</a> as a link to my about page in Angular, then the correct view will render and the address bar will show localhost:8080/about. However, if I just manually type in localhost:8080/about then Node responds with Cannot GET /about. Now I understand this is because my backend currently only handles the following:

var express = require('express');
var crypto = require('crypto');
var app = express();


app.set('views', __dirname + '/public');
app.engine('html', require('ejs').renderFile);
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
    res.render('index.html');
});

// API
app.get('/api/sync', function(req, res){
    // Here we generate a 32 byte string and make it the key
    var num = Math.floor(Math.random()*100);
    var key = crypto.createHash('md5').update(num.toString()).digest('hex');
    key = key.slice(0, key.length/2);

    console.log('Created key: ' + key);
    res.send(key);
});

var server = app.listen(8080, function(){
    console.log('Listening on port %d', server.address().port);
});

So what I want to do is make it so EVERY request to Node renders the same index.html page but then properly routes the view in Angular based on the URL. What is the best way to do this?

Matt Hintzke · Accepted Answer · 2014-05-21 19:30:45Z

2

I just realized that using:

app.get('*', function(req, res){
    res.render('index.html');
});

And placing this after all other routes I want to catch first will work.

answered May 21, 2014 at 19:30

Matt Hintzke

8,03216 gold badges62 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

slacktracer Over a year ago

That's the answer I was gonna give. =) I have a small system done with Angular and Node on GitHub, in case it may be of any help, here's a link: github.com/slacktracer/siga The routes had their own file: github.com/slacktracer/siga/blob/master/routes.js

Danny Allen · Accepted Answer · 2016-04-25 13:03:54Z

1

Since I don't have enough reputation yet to just add a comment, it's worth noting that res.render() won't work if you're not using a server-side template rendering engine (as you are using EJS). You would instead want to use something like res.sendFile() if you were just serving a static HTML and Angular page with all the routing set up in Angular.

app.get( '*', function( req, res ) {
    res.sendFile( __dirname + '/public/index.html' );
} );

edited Apr 25, 2016 at 13:03

answered Apr 25, 2016 at 12:40

Danny Allen

9791 gold badge11 silver badges26 bronze badges

Comments

diproart · Accepted Answer · 2014-05-22 21:20:38Z

The best way handle angular route in angular-app and backend route in backend.

Angular/Frontend:

 sampleApp.config(['$routeProvider',
 function($routeProvider) {
   $routeProvider.
    when('/', {
    templateUrl: 'templates/home.html',
    controller: 'MainController'
   }).
   when('/about', {
    templateUrl: 'templates/about.html',
    controller: 'AboutController'
   }).


   // >>> redirect other routes to
   otherwise({
    redirectTo: '/'
   });

}]);

Backend: For render static html you don't need app.get(...) simple place index.html into:

public/index.html

and express serve it as html. Other not exists pages(routes) return 404 error and it is right.

In this case API fully separate and independent and angular fully single page app. Express serve static resources needed for angular.

Collectives™ on Stack Overflow

Routing problems using NodeJS and AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related