Nodejs / HapiJs with Angular.js

Question

can someone explain me how to combine nodejs (hapi server) with AngularJs? I thought I can just catch every request made to my Hapi server and react to those requests using angularjs' routes / REST etc…

The server is running and serves me my index.html as I expect, but however I am to stupid to hook in my app.js for the angular stuff. I guess my approach is completely wrong.

Hapi

server.route({
    method: 'GET',
    path: '/{p*}',
    handler: function (request, reply) {
        reply.file('public/index.html');
    }
});

index.html (header)

<script src="CDN/angular.min.js"></script>
<script src="./app.js"></script>

Inline AngularJs code in my index.html works properly. I'm thankful to every response or some resources I can look at.

Answer 1

your approach is for an api and not for serving static files. Server static files like this:

// static file
server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory: {
            path: Path.join(__dirname, 'public/app')
        }
    }
});

see more info here http://hapijs.com/tutorials/serving-files

Answer 2

Your guess is correct. If you're willing to work with Hapi and AngularJS, the recommended way would be make your Hapi app as an RESTful web service using JSON to transmit data, and your AngularJS app would be your web interface.

This way you can leverage the best of both sides. AngularJS would use its services ($http, $resource) to get data from your web service, and present it through the correct views for your application routes.

All of this is basically the MEAN stack, but you'll use Hapi instead of Express.

Answer 3

While Lugg's suggestion certainly works, it would only be applicable if you don't have a web server. You should organize your client application separate from your server application, or at least put your server application in a folder above your doc root.

The client application will be setup just as a static website. Your web server will handle serving up the index.html and all the replated Angular files. Your HTML and Angular/Javascript will handle requesting partials, js modules, etc. This way you benefit from all your web server functionality and modules.

The server side can then be dedicated to listening for API requests and responding to them. It should not deliver your client app files. It should typically deliver JSON responses.

This approach is simpler and creates a good client / server separation. It keeps the server side focused on delivering data and the client side focused on handling the UI. This separation of concerns then also allows other clients to be written and communicate with your server application.

I believe my answer is simply an expansion on Hodes answer. I tried to make my answer a bit more explicit, but I think the general idea is the same.