29

バックエンドからフロントエンドの AngularJS に値を渡す最良の方法は何ですか? 私は Django を使用しており、テンプレートは必要な値を吐き出すことができますが、これらの値を AngularJS に渡す際のベスト プラクティスが何であるかはわかりません。

ブログ投稿とそのコメントについて考えてみましょう。投稿 ID をサービスに渡すことで特定のブログ投稿のすべてのコメントを取得する AngularJS サービスがあり、Django が HTML テンプレートをレンダリングしていて、投稿 ID が何かを認識しているとします。ただし、この投稿 ID を AngularJS に渡し、続いてサービスに渡す必要があります。

1 つのアイデアは、それを非表示にして<input>、この入力をモデルに割り当てることです。あまり魅力的ではありません。

もう1つは、ディレクティブを持ち、このディレクティブの属性でこの値を渡すことです。この方法で、この属性の値にアクセスできます。

// Django (or any backend) is rendering {{ object.value }}
<div class="myDirective" data-object-id={{ object.value }}>
   ...
</div>

angular.module('myDirectives', []).
    directive('myDirective', function() {
        return {
            restrict: 'C',
            transclude: false,
            link: function postLink($scope, $element, $attrs) {
                // $attrs.objectId would have the value
            }
        }
    });

これらの 2 つのアプローチは問題ないように見えます。しかし、これを行うためのよりクリーンな方法があるかどうか疑問に思っていますか? AngularJS のベスト プラクティスに従うアプローチはありますか?

4

3 に答える 3

22

ビューから少数のモデル値のみを初期化する必要がある場合は、ng-initディレクティブが探しているものである可能性があります：http://docs.angularjs.org/api/ng.directive: ngInit

それを使用すると、次のように簡単に書くことができます。

<div ng-init="myModel=backend-generated-value-here">
   ...
</div>

上記のことを言っても、AngularJSはフルクライアントサイドのWebアプリケーションであるWeb2.0に焦点を合わせているため、ユースケースのベストプラクティスを見つけるのに少し苦労するかもしれません。現時点では、サーバー側の生成コンテンツでは理想的には機能しません。AngularJSの将来のバージョンで変更される可能性があります。

于 2012-11-24T20:05:48.930 に答える
9

特定の「ページ」（ビューへのバックエンド呼び出しを意味する）の初期値を設定するだけでよい場合は、実証したとおりに実行できます。次のように、JavaScriptを介してグローバル変数を設定することによってのみ、「よりクリーン」にします。

// Django (or any backend) is rendering {{ object.value }}
<script>
  var backendVars = {
    {{object.name}} : {{object.value}}
    //and any other objects, manually parsed
  }
</script>

そして、ブートストラップ プロセスで angular を使用して読み進めてください。

ただし、angularJS は独自の MVC であるため、必ずしもページ全体をリロードすることなく、データまたはバックエンド コントローラーのプロセスを設定/取得できるようにしたい場合があります。「最もクリーンな」方法は、必要なデータを返す Web サービス (たとえば、JSON を返すビュー) を作成し、$http または $resource サービスを介して取得することです。

angular.module('myApp', []).
  controller('MainCtrl', function($scope, $html) {
    $html({
    method: 'GET',
    url: '/your/JSON/view.json'
      }).
      success(function(data, status){
        $scope.yourData = data;
      }).
      error(function(data, status){
        //whatever you need to do if the data is not available
      });
  }

また、データとロジックをディレクティブに直接配置するべきではないことに注意してください-それらはDOM操作を目的としています-代わりにコントローラーで情報を取得し、スコープ継承、属性、または双方向を介してディレクティブに渡しますデータバインディング。それが役に立てば幸い。

于 2012-11-24T16:49:06.800 に答える
9

これを行う適切な方法は、サーバーが値 providerを使用してスクリプトをレンダリングし、アプリに依存関係を挿入することだと思います。そのようです：

index.php:

<html ng-app='myApp'>

<head>
    <title>AngularJS Back to Front</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src='index.js'></script>
    <?php
        $globals = array(
            'count' => 1, 
            'title' => 'Active users',
            'users' => array(
                'name' => 'john',
                'age'  => 21
            )
        );

        $globalsJSON = json_encode( $globals )
    ?>

    <script>
        myApp.value('globals', <?=$globalsJSON;?>);
    </script>
</head>

<body ng-controller="myController">
    <div>{{title}}</div>
</body>

</html>

index.js:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', [ 'globals', '$scope', function( globals, $scope ) {
    // Copy globals to scope
    for ( var property in globals ) {
        $scope[ property ] = globals[ property ];
    }
}]);
于 2014-07-11T11:25:04.110 に答える