web-dev-qa-db-ja.com

anglejsでの初期データ読み込み

すべてのページが多くのデータソースに依存するWebアプリを構築する場合、データの最初のビットをフェッチするための最良の方法は何ですか？ Twitterを見ると、ページの読み込み時に表示されるツイートがHTMLソースにあり、下にスクロールするとAJAX）を使用してさらに多くのツイートが読み込まれます。しかし、便利な方法はありません。モデルに挿入するために、すでにDOMにあるデータを取得します。

Css、html、javascriptをフェッチするためにサーバーへのラウンドトリップを何度も行ったため、ページの読み込み直後に初期データを要求するのはばかげています。ページのjavascriptタグにデータを挿入して、javascript関数が初期データを追加できるようにするのは悪い考えですか？

私は特にangularjsを求めていますが、一般的なテクニックがある場合は、私にも知らせてください。

javascriptajaxangularjs
25
bigblind

とにかくページの読み込み時にコントローラーを参照するので、インラインスクリプトタグを用意する必要はありません。

デフォルトのモデルを設定して、初期ロード時に属性 ng-bind を使用するか、関数を呼び出してデータを返すことができます。

負荷時にangularjsでデータをフェッチするのはかなり一般的です。

4
Christopher Marshall

これを行う1つの方法は、バインディングが発生する前に初期化を処理するディレクティブを作成することです。例えば：

app.directive('initdata', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            if ( attrs.ngBind !== undefined)
            {
                $scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text();
            }
        }
    };
});

このディレクティブは、バインドされた$ scopeプロパティの初期値として属性値、または要素のtextvalueのいずれかを取ります。

使用例：

<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>

http://jsfiddle.net/6PNG8/ の実例

これについて詳しく説明する方法はたくさんあります。たとえば、initdataをjsonとして解析し、スコープとマージして、$root.somepropなどのより複雑なバインドで機能するようにします。しかし、基本は非常に単純です。

2
towr

AngularjsをZend_Http_ClientやGuzzleなどのバックエンドのHTTPクライアントと組み合わせて、サーバーにデータをフェッチさせるのが最善でしょうか。次に、レンダリング時にデータをjsonとしてjavascriptに渡します。

Angularjsがシングルページアプリケーション用に設計されていることは知っています。そのため、データを遅延ロードするのは理にかなっています。

ただし、ページを動的にレンダリングし、コンテンツを整理するタスクをAngularjsに委任するアプローチに移行する場合は、 AngularJSビューを含めるのに適したフレームワーク。現在、angular-seedのようなプロジェクトテンプレートはすべて静的です。

つまり、サーバーがjsonオブジェクトが埋め込まれたページを提供するという考え方です。次に、角度を付けて、クライアント側を引き継ぎ、必要に応じて追加のコンテンツをフェッチします。

したがって、連絡先の1ページ（例：index.html）の代わりに、profiles.html、products.htmlのような複数のページがあります。バックエンドの助けは、ページの右上にあるユーザー名のように頻繁に変更されないセクションがある場合に特に役立ちます。私にとっては、これらのデータをページにプリロードして、ページがロードされた後にサーバーに問い合わせる必要がない方が良いと思います。

Bigblindが気付いたように、これはfacebook、gmail、Twitterなどのサイトが行う方法のようです。これらには、ページの読み込み時に埋め込まれたデータが含まれています。その後、サービスを介して追加のコンテンツをロードします。

アイデアは以下のようなものです：

Webservice <---------- Backend------------> Frontend
     <------------------------------------------

バックエンドは、レンダリングされたページの初期データをクライアントに提供するためにWebサービスにクエリを実行するタスクを委任します。次に、クライアントはWebサービスに直接接続して、追加のコンテンツをフェッチできます。

上記のセットアップを使用して..理想的な開発スタックは何ですか？

2
chrony

この質問 の回答によると、ページのスクリプトタグ内のJSONオブジェクトが道のりのようです。誰かがもっと良いアイデアを思いついたら、私はあなたの答えを受け入れます。

1
bigblind