AngularJS and Node.js with ExpressJS integration [closed]

Question

I am trying to write an app with Node.js with Express and Angularjs.

Is it possible that I allow AngularJS to handle all landing requests? and Node.js is purely for APIs? meaning that all routes written in Node.js will be like this:

app.get('/api/users', users.showAll);
app.post('/api/users', users.create);
app.get('/api/users/fb/:fbId', users.findByFb);
app.get('/api/users/:userId', users.show);
app.put('/api/users/:userId', users.update);
app.del('/api/users/:userId', users.del);

And AngularJS will be able to resolve URL by itself e.g. localhost/users/Some-Name?

What are some best practices to follow when integrating the two together?

ALso, is it recommended to have AngularJS and Node.js app to be separated into two different application? and what are some ways to do that?

Thanks in advance!!

Answer 1

Obviously, the design and nuances of any application will dictate how exactly it should be setup, but you can certainly have a single page web application running in Angular making AJAX requests back to your node.js server side API. I have created many small and medium sized apps in exactly this way.

Node.js can handle your API in the way you have designed, but you will need some initial route in node that users will initially hit to bring up the HTML page that bootstraps the angular.js application and loads any additional javascript and css libraries that you will need. You will define that route and then setup the static resources in your node application so that the browser can load these things to spin up the angular app.

The angular application itself will be contained in javascript files that will live in a static resources folder in your express app. Typically, something like /js/myNgApp.js will work to start - but you can get more exotic by separating out controllers, directives, services, etc into their own js files. This is something you can do later on.

Once the angular app is loaded and running in the browser, you will just need to use the $resource service in angular to define your ajax urls to the api in node then have the angular client perform get or post (or whatever) request to these urls.

If security is something you will need in the app, that needs to be implemented as a page and url before loading the angular application. There are security frameworks for express that can help you with this. I use passport.

In Chrome, the developer tools (especially the network tab) will become your best friend.