Angular2のテンプレートと、サーバ側のテンプレートの共存

Question

###前提・実現したいこと
サーバ：node.js+express
JSフレームワーク：Angular2

という構成でWebアプリを作りたい

###問題
Angular2のtemplateにどうやってサーバ側で作ったhtml(テンプレート)を渡すか、良い方法が分からない。

###該当のソースコード
とりあえずこんな感じで渡しています。

サーバ側テンプレート(ect)

// JavaScriptの変数に、作ったテンプレートを入れる
<script>
  var template = (function() {/*
  <div id='<%- @id %>'>
    <h1><%- @upperHelper @title %></h1>
    <% include 'list' %>
  </div>
*/}).toString().match(/\/\*([^]*)\*\//)[1];
</script>

クライアント側js(typescript)

// サーバ側で作ったテンプレートをAngular2のテンプレートとして使う。
@Component({
    selector: 'my-app',
    template: _template
})

何か違うような気がするのですが、そもそもそんな構成にしないものでしょうか？
もし同じような事をしている方がおられたら教えて頂きたいですｍ(_ _)ｍ

Answer 1

以前、書いたプロジェクトの例です。
簡単になってしまいますが…
express-genelatorではきだされるデフォルトの構造が前提としてですが、リソースを提供するpublicフォルダ内にjsフォルダを作成、そのフォルダ内にangular側で利用するコンポーネントごとのフォルダを作成、その中にangularコンポーネントとなるjsファイル、テンプレートとなるhtmlファイルを設置。
jsファイルからtemplateUrlで同じ階層のhtmlファイルを指定。
最後に全部、browserifyで全てのjsファイルを結合して、読み込ませています。

TypeScriptの記述ですが、以下のリンクの構造を参考にさせていただきました。
https://github.com/likr/interactive-sem

Comments

[harufumi.abe]

回答ありがとうございます！
なるほど、expressのテンプレートと、Angular2のテンプレートは分離されているという感じですかね。
自分もテンプレートのカバー範囲は分かるべきかと、今はおもっています。

もう少し色んな回答を聞きたいので、もう少し受付中にしときたいとおもいますm(_ _)m