web-dev-qa-db-ja.com

エクスプレスハンドルバーとAngular JS

バックグラウンド

現在、サーバーに NodeJS 、 Express Handlebars （Just Handlebars but server side）を使用し、できれば AngularJS 一部のクライアント側のもの。


問題

AngularJSとHandlebarsは、テンプレートに同じ構文を使用します
{{foo}}
これにより、AngularJSコードが最初にExpress Handlebarsによって解釈され、プルしようとしているデータがAngular not not Nodeにのみ存在するためエラーがスローされます。


質問

AngularJSとExpress Handlebarsを連携させる方法はありますか？


可能な解決策

  • AngularJS の構文を変更します
    • BackboneJSを見ていましたが、構文を変更できるようです。おそらく似たようなものがAngularJSがあるかもしれません。
  • Express Handlebarsでngヘルパーを作成します。
    • 解析されていないコンテンツを返すだけです。しかし、これを行う方法がわかりませんでした。
javascriptnode.jsangularjsexpresshandlebars.js
43
Noah Huppert

最初の解決策が可能です。AngularJSでは、次のようにテキスト補間の開始/終了シンボルを変更できます。

appModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

次に、テンプレートで使用できます。

<div>{[{message}]}</div>

参照： $ interpolateProvider documentation

お役に立てれば。

71
runTarm

代わりに、常にng-bind構文を使用できます。

<p ng-bind="user.profile.description"></p>
これは次と同じです
<p>{{user.profile.description}}</p>

Angular ngBind のドキュメントから：

通常、ngBindは直接使用せず、代わりに{{expression}}のような二重カーリーマークアップを使用します。

Angularがコンパイルされる前にテンプレートが生の状態でブラウザに一時的に表示される場合、{{expression}}の代わりにngBindを使用することをお勧めします。ngBindは要素属性であるため、ページがロードされている間、ユーザーには見えないバインディング。

18
teleaziz

AngularJSスタイルを維持するには、2番目のソリューションの方が優れています。Express Handlebarsでヘルパーを作成します。

Handlebars Webサイトへの参照： http://handlebarsjs.com/block_helpers.html 、ヘルパーを登録できますraw-helper

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

そして、quadruple-stash{{{{

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}
14
Isaddo

より良い方法があります：\ {{foo}}。ハンドルバーのコンテンツは、インラインエスケープまたは生のブロックヘルパーの2つの方法のいずれかでエスケープできます。口ひげブロックの前に\を付けて作成されたインラインエスケープ。生ブロックは{{{{口ひげブレースを使用して作成されます。これを見ることができます http://handlebarsjs.com/expressions.html#helpers

11
Peyton Zhao

AngularJSのデータバインディング構文（Handlebarに似ている）を使用することをお勧めし、NodeJSサーバーに静的なAngularJSソースコードを提供するようにします。テンプレートをクライアントにオフロードすることで、AngularJSや他のMVCフレームワーク（私のお気に入りはEmberJS）がWebページを動的に構築するのに最適であることは言うまでもなく、サーバーへの負荷を軽減します。

私は Yeoman のファンで、ここにNodeJSが提供するAngularプロジェクトを作成するためのジェネレーターがあります： https://github.com/yeoman/ generator-angular

9
Glavin001