angularjsの初期データロード

Question

すべてのページが多くのデータソースに依存するWebアプリケーションを構築する場合、データの最初のビットを取得する最良の方法は何ですか？私がツイッターを見ると、ページの読み込み時に見えるツイートがHTMLソースにあり、AJAXを使って下にスクロールするたびにツイートが読み込まれることがわかります。しかし、すでにDOMに入っているデータをモデルに挿入する便利な方法はありません。

css、html、javascriptを取得するためにサーバに多くのラウンドトリップを行ったので、最初のデータを要求します。ページ上のjavascriptタグにデータを挿入するのは悪い考えでしょうか？そうすれば、javascript関数は初期データを追加できますか？

私は特にanglejsを求めていますが、一般的なテクニックがあれば教えてください。

Answer 1

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

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

anglejsの読み込み時にデータを取得するのはかなり一般的です。

Answer 2

this questionの回答によれば、ページ上のスクリプトタグ内のJSONオブジェクトが移動する方法のようです。もし誰かが良いアイデアを思いついたら、私はあなたの答えを受け入れるでしょう。

Answer 3

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

私はAngularjsがシングルページアプリケーション向けに設計されていることを知っています。そのため、データが怠惰に読み込まれるのは理にかなっています。

しかし、私たちがまだページを動的にレンダリングし、コンテンツをAngularjsに整理するタスクを委任するアプローチに移行しようとする場合。どのフレームワークがAngularJSビューを格納するのに適しているか。今、角度シードのようなプロジェクトテンプレートはすべて静的です。

つまり、サーバーはjsonオブジェクトが埋め込まれたページを提供します。その後、角度があり、クライアント側で引き継がれ、必要に応じて追加のコンテンツが取得されます。

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

bigblindが気づいたように、これはfacebook、gmail、twitterのようなサイトのようです。それらはページロードに埋め込まれたデータを含んでいます。その後、サービスを通じて追加のコンテンツをロードします。

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

バックエンド代議員クライアントにレンダリングされたページで初期データを提供するために、Webサービスを照会する作業：

アイデアは、以下のようなものです。その後、クライアントは、Webサービスに直接接続して追加のコンテンツを取得できます。

上記の設定を使用します。理想的な開発スタックは何ですか？

Answer 4

これを行う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(); 
      } 
     } 
    }; 
}); 

このディレクティブは、いずれかの最初のバウンド$スコーププロパティの値、または要素のtextvalueとして属性値をとります。

使用例：http://jsfiddle.net/6PNG8/

上

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

実施例本に詳しく説明するための多数の方法があります。たとえば、initdataをjsonとして解析してスコープとマージし、より複雑なバインド（$root.somepropなど）で動作させるなどです。しかし、基本は非常に簡単です。