Angular code on Hapijs by view engine Handlebar of nodejs

Question

Though after making api in hapi. I decided to make a view file inside folder structure of hapijs to render html file. I have used handlebars engine and Vision support library on hapijs to display the html file. Everything seems fine when I run normal html code but when I use angular code, it gives some Parse error. I think there might be issue with view engine handlebars. Please help

Here is error when I run node server and hit the route where view called

 Error: Parse error on line 144:
    ...             <td> {{(titleData.Success
    -----------------------^
    Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_SEXPR': Parse error on line 144:
    ...             <td> {{(titleData.Success 

// HTML code here

<div class="table-responsive" ng-controller="titleController">
<h4 align="center">Title Data</h4>
<table ng-init="titleData.total = {}" class="table table-condensed" border="1">
    <thead>
        <tr>
            <th>#</th>
            <th colspan="2"><center>SeWise</center></th>
            <th colspan="2"><center>intWise</center></th>
            <th colspan="2"><center>sons</center></th>
        </tr>
        <tr>
            <th>Stus</th>
            <th>Cou</th>
            <th>%</th>
            <th>Cou</th>
            <th>%</th>
            <th>Fible</th>
            <th>Nlexible</th>
        </tr>

    </thead>
    <tbody ng-repeat="titleData in data">
        <tr>
            <td> Success</td>
            <td> {{titleData.Success}}</td>
            <td> {{(titleData.Success/(titleData.Success+titleData.Fail+titleData.Partial)*100).toFixed(2)}}</td>
            <td>{{titleData.SuccessDp}}</td>
            <td>{{(titleData.SuccessDp/(titleData.SuccessDp+titleData.FailDp)*100).toFixed(2)}}</td>
            <td>{{titleData.Fible}}</td>
            <td>{{titleData.NonFible}}</td>

        </tr>
        <tr>
            <td> Partial</td>
            <td>{{titleData.Partial}}</td>
            <td> {{(titleData.Partial/(titleData.Success+titleData.Fail+titleData.Partial)*100).toFixed(2)}}</td>
            <td colspan="2"> </td>
            <!-- <td> </td> -->
            <td colspan="2"> </td>
            <!-- <td> </td> -->
        </tr>
        <tr>
            <td> Failed</td>
            <td ng-init="total.titleData.Success = data.total.titleData.Success + titleData.Success+titleData.Fail+titleData.Partial"> {{titleData.Fail}}</td>
            <td> {{ (titleData.Fail/(titleData.Success+titleData.Fail+titleData.Partial)*100).toFixed(2)}}</td>
            <td ng-init="total.titleData.SuccessDp = titleData.SuccessDp + titleData.FailDp"> {{titleData.FailDp}}</td>
            <td> {{(titleData.FailDp/(titleData.SuccessDp+titleData.FailDp)*100).toFixed(2)}}</td>
            <td colspan="2"> </td>
            <!-- <td> </td> -->
        </tr>

        <tr>
            <th>
                Total
            </th>
            <th colspan="2">
                {{total.titleData.Success}}
            </th>

            <th colspan="2">
                {{total.titleData.SuccessDp}}
            </th>

            <th colspan="2">

            </th>

        </tr>
    </tbody>
</table>

// configure document using hapi-swagger

server.register([
        Inert,
        {
            'register': HapiSwagger,
            'options': swaggerOptions
        },
    ], function (err) {
    if (err) {
        throw err;
    }

         /**
   * view configuration
   */
  server.views({
    engines: {
      html: Handlebars
    },
    path: __dirname + '/view',
    // layout: 'index'
  });



    server.route({
        method: 'GET',
        path: '/yoyo',
        handler: {
           view: 'index'
        }
    });

Answer 1

The above answer is not enough to meet our requirement. So I am sharing the solution in which we can use js files externally in HTML.

var Path =require('path');
    server.views({
                engines: { html: require('ejs') },
                // compileMode: 'sync',
                relativeTo: __dirname,
                path: __dirname + '/view',
                layoutPath: 'index',


        });

        //Routes for apis

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


        server.route({
            method: 'GET',
            path: '/view',
            handler: {
               view: 'index'
            }
        });

Example directory structure I follow like this:

view

--index.html

public

--helpers

---controller.js

server.js

Answer 2

I have seen various blogs and github all were complaining about template engine handlebars so I switched to ejs yet another template engine and code works fine but there is one problem that it fails to render the js files if they are included externally.

Here is code , you can see

server.views({
            engines: { html: require('ejs') },
            // compileMode: 'sync',
            relativeTo: __dirname,
            path: __dirname + '/view',
            layoutPath: 'index',


        });

        //Routes for apis


        server.route({
            method: 'GET',
            path: '/view',
            handler: {
               view: 'index'
            }
        });