web-dev-qa-db-ja.com

node.jsサーバー変数をangular / htmlビューに渡すにはどうすればよいですか？

サーバーを起動するapp.jsファイルにこのルートがあります

_app.get('/view/:item_id', function(req,res){
    var A = 5;
    res.render('view_item');
_

そして、私はこれを私のview_item.htmlに持っています：

_<p>{{A}}</p>
_

変数値-5を表示したいのですが、jadeなどのテンプレートエンジンを使用している場合は簡単です。サーバーコードの3行目をres.render({A:A},'view_item');に変更できます。

しかし、私はテンプレートエンジンとしてhtmlを使用しています。これまでの私の調査によると、angularでテンプレートエンジンを使用することは通常は悪い考えであり、angularの組み込みテンプレートシステムを使用してそれを行う方法は常にあります。どうすればよいですか？これ？どういうわけかそれを$ scopeに渡して、次のように含めますか？

_<script>
    $scope.A = {{A}};
</script>
_

私はこれがどこでも行われているのを見たことがないので、それが進むべき道だとは思いません。

javascriptnode.jsangularjstemplate-engine
12
user3727514

これは2段階のプロセスです。

  1. まず、express in nodeのようなライブラリ（サーバーライブラリ）を使用して、リクエストに応答する適切なルーティング（RESTサービス）を設定する必要があります。

サーバー側

//app = express();
    app.get('/api/:paramID1/:paramID2',function(req, res){
        return res.json({ A: 5 });
    });

  1. クライアント側では、次のようなサービスを呼び出すためにajax呼び出しが必要です。

    $http.get( "/api/1/abc").success(function( data ) {
  $scope.A= data; //from your sample;
  alert( "Load was performed. " + data );
});

RESTを使用する場合、POST、DELETE、UPDATE、またはGETの例で説明したものなど、ニーズに応じて呼び出すことができるさまざまなタイプの「メソッド」があることに注意してください。

11
Dalorzo

Angularを使用している場合は、おそらくシングルページアプリを構築する必要があります。これは、最新のフロントエンドフレームワークのほとんどに当てはまります。SPAの場合は、基本的なhtmlファイル（おそらくindex.html）次に、フレームワークが他のすべてのレンダリングを処理します。サーバーがテンプレートを発行する場合もありますが、それ自体がレンダリングされることはありません。

app.get('/view/:item_id', function(req,res){

これは、何かをレンダリングしたり、HTMLを返したりするものであってはなりません。代わりに、フロントエンドがレンダリングに使用するデータを返す必要があります-できればJSONとして。

res.json({A: 5});

次に、Angularを使用すると、次のようなことができます

$http.get("/view/1").success(function (data) {
    ctrl.A = data.A;
});

あなたのhtml/templateは次のようなものになります

<div ng-controller="ctrl as ctrl">
    <div>{{ctrl.A}}</div>

$http.getが完了すると、ctrl.Aが入力されます。

4
Explosion Pills