2017-01-06 56 views
2

雖然在hapi中製作api之後。我決定在hapijs的文件夾結構中創建一個視圖文件來呈現html文件。我在hapijs上使用了handlebars引擎和Vision支持庫來顯示html文件。當我運行正常的html代碼時,一切似乎都很好,但是當我使用角碼時,它會產生一些Parse錯誤。我認爲可能存在視圖引擎句柄問題。請幫助視圖引擎上的角度代碼nodejs的手柄

這是錯誤,當我運行的節點服務器,打哪兒視圖中使用高致病性禽流感//配置文件名爲

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> 

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

回答

1

我已經看到各種博客和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' 
      } 
     }); 
0

以上回答是不足以滿足我們的要求。所以我分享了我們可以在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

公共

--helpers

--- controller.js

server.js