Nodejs / HapiJs with Angular.js

Question

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

The server works and serves me as my index.html, as I expect, but nonetheless, I am stupid to cling to the app.js app for angular. 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 is working correctly. I am grateful for every answer or some resources that I can look at.

Answer 1

your approach is for api, not for serving static files. Static server files:

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

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

Answer 2

Your guess is correct. If you are ready to work with Hapi and AngularJS, it is recommended that you use your Hapi application as a RESTful web service using JSON to transfer data, and your AngularJS application will be your web interface.

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

All this is basically a MEAN stack , but you will use Hapi instead of Express.

Answer 3

Although the Lugg clause certainly works, it only applies if you don't have a web server. You must organize your client application separately from your server application or at least place your server application in a folder above your doc root.

The client application will be configured as a static website. Your web server will handle the maintenance of index.html and all replicated Angular files. Your HTML and Angular / Javascript will handle requesting partial, js modules, etc. Thus, you benefit from all the functions and modules of your web server.

Then the server side can be designed to listen to API requests and respond to them. It should not deliver your client application files. Usually it should deliver JSON responses.

This approach is simpler and creates a good client / server separation. It keeps the server side focused on data delivery, while the client side focuses on processing the user interface. This separation of concerns also allows other clients to write and chat with your server application.

I believe my answer is simply an extension of Hodes answer. I tried to make my answer more explicit, but I think the general idea is the same.

Answer 4

I use this code for the index file:

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

And this is for other directories:

 server.route({ method: 'GET', path: '/{param*}', handler: { directory: { path: path.resolve(path.resolve(__dirname, '..', 'directory_name')) } } }); 

For some versions of node you will need an inert query

 var Inert = require('inert');