通过nodejs的视图引擎Handlebar在Hapijs上的Angular代码答案

【问题标题】：Angular code on Hapijs by view engine Handlebar of nodejs通过nodejs的视图引擎Handlebar在Hapijs上的Angular代码
【发布时间】：2017-05-20 22:19:28
【问题描述】：

虽然在hapi中制作了api之后。我决定在 hapijs 的文件夹结构中创建一个视图文件来呈现 html 文件。我在 hapijs 上使用了车把引擎和 Vision 支持库来显示 html 文件。当我运行正常的 html 代码时，一切似乎都很好，但是当我使用角度代码时，它会给出一些 Parse 错误。我认为视图引擎车把可能存在问题。请帮忙

当我运行节点服务器并点击视图调用的路由时出现错误

 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代码

<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>

// 使用 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'
        }
    });

【问题讨论】：

标签： javascript angularjs node.js handlebars.js hapijs

【解决方案1】：

以上答案不足以满足我们的要求。所以我分享了我们可以在HTML中外部使用js文件的解决方案。

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'
            }
        });

我遵循的示例目录结构如下：

查看

--index.html

公开

--帮助者

---controller.js

server.js

【讨论】：

【解决方案2】：

我看到各种博客和 github 都在抱怨模板引擎把手，所以我切换到 ejs 另一个模板引擎和代码工作正常，但有一个问题是它无法渲染 js 文件如果它们被包含在外部中。

这是代码，你可以看看

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'
            }
        });

【讨论】：