Express.js and AngularJS - use static pages instead of express views

Question

I have a node.js backend with an express server. I would like to default all get requests to the angular app and use the angular routing to handle the requests. The express server would handle all of the api calls from the angular app. I have set up my express routes with all api calls at the top and the following code at the bottom:

app.get('*', function(req, res){
    res.sendfile('index.html', { root: path.resolve(__dirname + '/../../app') });
});

This works great for the default home page but it does not work well if there is a faux folder. E.g.

www.example.com (works)
www.example.com/product1 (works)
www.example.com/products/1 (does not work)

My HTML file references scripts using the following structure:

<script src="scripts/app.js"></script>

When I try to access a url with a faux folder (www.example.com/products/1) I get the following error: Cannot find file ‘products/scripts/app.js’

It is trying to use the folder in the url to find the file. Is there a way to resolve this? Or should I use express for the routing instead of angular?

Christian Smith · Accepted Answer · 2013-03-18 20:19:32Z

3

Try adding <base href="/"> into the head of your HTML document. This solved the same problem for me.

answered Mar 18, 2013 at 20:19

Christian Smith

8,0893 gold badges22 silver badges18 bronze badges

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

Comments

zemirco · Accepted Answer · 2013-03-02 20:58:52Z

2

The angular-express-seed is great to get you started with angular and express.

app.js

app.get('*', routes.index);

routes.js

exports.index = function(req, res){
  res.render('index');
};

You don't have to use jade. You can use any template engine you want or just static html files. Note that res.sendfile doesn't cache the file and shouldn't be used in production. The seed also has an example to show the json communication between client and server.

exports.name = function (req, res) {
  res.json({
    name: 'Bob'
  });
};

If you use express for the routing you'll lose the single page app feeling.

answered Mar 2, 2013 at 20:58

zemirco

16.4k8 gold badges67 silver badges103 bronze badges

Comments

Arne Jenssen · Accepted Answer · 2013-06-10 09:51:44Z

0

Give the script (and CSS files) an absolute path in the HTML

<script src="/scripts/app.js"></script>

answered Jun 10, 2013 at 9:51

Arne Jenssen

1,3333 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Express.js and AngularJS - use static pages instead of express views

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related