Onsenを使用して、JadeファイルをスプリッタでHTMLとしてレンダリングするNodeJsにサーバーサイドコードを書き込む方法

Question

私の温泉アプリでは、次のスプリッタがあります。以下に示すように、私は、ページの下部にあるファイルを含めることによって、（彼らは別のヒスイのファイルであるという事実にもかかわらず）ジェイドを使用して、HTMLのリスト項目から、他のすべてのページをレンダリングしています：

body(ng-controller='...') 
    ons-splitter(var='mySplitter') 
     ons-splitter-side(var='menu' side='left' width='220px' collapse swipeable) 
     ons-page 
      ons-list 
      ons-list-item(ng-click="root.load('home.jade')", tappable='') 
      | Home 
      ons-list-item(ng-click="root.load('search.jade')", tappable='') 
      | Search 
      ... more list items 

    ons-template(id='home.jade') 
     ons-page(ng-controller='...') 
     ons-toolbar 
     .left 
      ons-toolbar-button(ng-click='mySplitter.left.open()') 
      ons-icon(icon='md-menu') 
     .center 
      | My App 

     //- google maps stuff 
     ons-input#pac-input.controls(type='text', placeholder='Search Box') 
     div#map.col-md-12 

     ons-bottom-toolbar 
      .center 
      | MyApp 

    include search.jade 

私はこれが汚れたショートカットだと思って、ユーザがスプリッタ内の項目をクリックする前にsearch.jadeの内容（と私が含む他のすべてのファイル）を読み込みます。

私はこの機能を望んでいません。代わりにNodeJsにサーバーコードを入れて、ユーザーに表示する準備ができたらjadeファイルをhtmlでレンダリングしたいと考えています。このような何か：

jade.renderFile('search.jade') 

この角度のコードでは、現在、私は、スプリッタ内の項目からページをロードしています方法です：

mySplitter.content.load(page) 
    .then(function() { 
    $scope.pop = page; 
    mySplitter.left.close(); 
}); 

は、しかし、私はノードのルートでこれを記述する方法については非常に混乱しています。私はちょうど角度のスプリッター機能を放棄するのですか？

誰でも私のためにこれを明確にすることができます。ロードされるたびにjadeファイルをhtmlとしてレンダリングするノードルートを記述する明確な例を教えてください。

私がやろうとしています正確に何の参考のために、このスタックオーバーフローのポストから選択解答の溶液1を参照してください。stack overflow post

私は現在、そのポストから溶液2を使用しています。

私は、これはserver.js内の関連するコードであると考えている。しかし

app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

私はHTMLにヒスイを変更、私はエラーメッセージが表示されます。 エラー：モジュール「HTML」

すべてを見つけることができませんviewsフォルダ内のフロントエンドファイルは.jade拡張子を持ち、jadeで書かれています。

更新 ここでは、私はindex.jsというファイルに（ビューのフォルダ内にある）index.jadeにサービスを提供しています方法です：

module.exports = function(app){ 

    /* Get home page. */ 
    app.get('/', function(req, res, next) { 
    res.render('index', { title: 'My App' }); 
    }); 
} 

は、これは私の古いルートNodeJSルートでしたスプリッタのためにもはや使用されていません。

// get user search page 
    app.get('/user/search', function(req, res, next) { 
     return res.render('searchForTrainer'); 
    }); 

Answer 1

Hmm。あなたのコードは比較的小さく見えるので、私はそれが何をするかは、ビューからすべてのファイルを提供して実際にそれらをレンダリングするだけかもしれないと思います。だから、おそらくあなたはちょうどそれらを後で適切にアクセスすることに失敗しているでしょう。たぶん/search.htmlまたは/searchのようなURLがあるかもしれません（/search.jadeの代わりに）。あなたはそのようなURLにアクセスできるかどうか確認しようとしますか？

index.jadeファイルはstartingPoint: 'index.jade'などの他の方法で提供されていますか、またはviewsフォルダにもありますか？

基本的に、インデックスファイルが他のビューと同じ扱いをしている限り、すべてが正常であるはずです。

更新： あなたが提供したものでは、あなたがあなたのインデックスを提供している方法を見ることができます。

app.get('/', function(req, res, next) { 
    res.render('index', { title: 'Fitness App' }); 
}); 

それと同等のは、あなたが前に持っていた言ったこととまったく同じです。

app.get('/user/search', function(req, res, next) { 
    return res.render('searchForTrainer'); 
}); 

ここres.renderあなたのヒスイは、HTMLに変換し、それをクライアントに返すものです。スプリッターはhtmlを期待しているので、サーバーの使用開始時にサーバーを変更すべきではありません。ここで

は、プロセスがどのように見えるかです：

 Client   |  HTTP   |  Server 
         |      | 
content.load('page') →  GET /page  ↘ 
         |      | res.render('page') // convert jade to html 
    html is loaded  ← 200 OK html content ↙ 
in splitter.content |      | 

TL; DR - あなたは、古いルートすべてが問題ないはず使用している場合。スプリッターのページURLをsearch.jadeから/user/searchに変更することを忘れないでください。