Setting up Express with Angular

Question

I can setup Angular in my web app using ASP/Visual Studio rather easily, but I want to get into the Node world, more specifically Express. I'm not truly understanding a basic route handler for Express, that will support the paradigms that Angular has.

For example, when setting up an Express file, there's a million examples, but almost all of them use Jade for templating, and I'm against Jade's syntax and have no desire to utilize it.

So far, I have this for my Express server (I have commented out some questions regarding my decisions made so far):

var express     = require('express'),
    path        = require('path');

var app = express();

var env = process.env.NODE_ENV || 'development';

// 1) Is this really necessary if I'm going to utilize Angular routing for views?
app.set('views', path.join(__dirname, '/app/views'));
app.use(express.static(__dirname + '/public'));

// 2) I'm assuming this is the desired pattern for utilizing Angular.
//  A catch-all handler that serves up an html file, which will then
//  hand off the rest of the routing to Angular?
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

const PORT = 3000;
app.listen(PORT);
console.log('Listening on port: ' + PORT);

The questions I have are:

• Is app.set('views', ...) necessary in an Angular app through Express or is it really intended for a Jade/EJS templating workflow? If it's useful to Angular, what path should I point it to? My Angular views? Or just the static html file that will serve as the container to all angular views?

• I'm assuming app.use(express.static(...)) is still needed for ensuring Express can serve up public static resources, like css/javascript.

• Is an app.get('*', ...) { res.sendFile('path/to/index.html') } route handler the accepted pattern for serving up one html file, which will contain all necessary Angular usage?

• For Angular, is it normal to only have one html file for the entire of your application, and then just use Angular's routing and controllers/views to handle the rest?

Answer 1

Is app.set('views', ...) necessary in an Angular app through Express or is it really intended for a Jade/EJS templating workflow? If it's useful to Angular, what path should I point it to? My Angular views? Or just the static html file that will serve as the container to all angular views?

If you need to render a view on the server side and then send it to the client, you need this. Otherwise (in your case) no. You can just send the file to the user or generate a user-specific output based on the parameters that user has sent to the server. It could be anything, HTML file, json or just simple text.

I'm assuming app.use(express.static(...)) is still needed for ensuring Express can serve up public static resources, like css/javascript.

You are right. If you need to serve the static content as well, the best way is to use express.static , however you can catch the requests and serve the content by yourself.

Is an app.get('*', ...) { res.sendFile('path/to/index.html') } route handler the accepted pattern for serving up one html file, which will contain all necessary Angular usage?

If for each and every other requests that the previous routes didn't catch, you need to send the exact same file, yes it is fine.

Remember if you need to serve other HTML files as templates and they are not in the same directory as you pointed in express.static to, the client could not have access to html files. I'll discuss it in a bit.

However, I believe it is a good practice to define all the routes and not just put a * to catch them all. It is better to define a pattern at least, it would be easier to maintain the code later on.

For Angular, is it normal to only have one html file for the entirety of your application, and then just use Angular's routing and controllers/views to handle the rest?

Depends on your application. In most of the cases yes.

I've done several big angular projects, I only have one route that actually serves the main html file, and one that serves static files (pictures, js, css). I also have a route that points to the templates directory which should be served as static contents. Those are the templates that AngularJS need to work with.

For the communication between your angular app and the server, you'll probably need other routes as well. You could create RESTful API end-points to create a communication layer for the client and the server.

I usually have these two lines in the server code to keep the all the templates in the same folder. It makes it easier to manage and define work flows:

app.use(express.static(path.join(__dirname, 'public')));
app.use('/templates', express.static(path.join(__dirname, 'templates')));

For communication between the server and the client:

app.post('/login', function (req, res) {
// deal with login information ...
    res.send({
        done: true,
        errors: []
    });
});

app.post('/search', function (req, res) {
    // do the search ...
    res.send({
        done: true,
        results: []
    });
});

Remember if you use * at some point in your app, the other routes that you defined after that, will never catch the request.

And

I'm against Jade's syntax and have no desire to utilize it.

Yes, me too! But there are other options as well, I personally prefer ejs . If you are using express-generator you can just pass -e switch and it'll create everything compatible with ejs .

$ express -e

Also, take a look at here .