2013-03-20 8 views
5

anglejsアプリでは、カスタムサービスを使用して、アプリケーションのメインデータである「アイテム」を保持しようとしています。しかし、サーバーへの別のajax要求を避けるために、最初のページのロード時にデータをサービスにブートストラップします。これを行うことについて、最もクリーンな方法は何でしょうか?ここでAngularJS - ページロード時のサービスへのデータのブートストラップ

参照のための私のサービスの抜粋です:

app.factory('items', function() { 
    var itemsService = {}, 
     items = []; 

    itemsService.list = function() { 
     return items; 
    }; 

    itemsService.add = function() { 
     /* ... */ 
    }; 

    return itemsService; 
}); 

そして、私は+ヒスイのNode.js + expressjsを使用していますので、私が使用してページにデータを注入することになるバックエンドで:

!{JSON.stringify(items)} 
+0

重複している可能性があります。オリジナルでのより良い回答 - [Angular.jsで$リソースサービスによって取得されたデータをブートストラップする方法](http://stackoverflow.com/questions/12451864/how-to-bootstrap-data-as-it- – EBarr

答えて

3

サーバーからのブートストラップされたデータをグローバルJavaScript変数に入れます。あなたのサービスは、そのグローバル変数にitemsを割り当てます(または、データをitemsにコピーしてください)。

+0

それは私が考えていたものでしたが、その割り当て/コピーはどこで私のコード内で発生すべきですか? 'items = []'を 'items = window.bootstrappedData'(ここでbootstrappedDataはグローバルなjavascript変数)に置き換えるだけで、サービスを作成するための' app.factory'呼び出しの中で実行するだけでは機能しないようです。 –

+0

私はあなたが試したところで課題/コピーを書きます。私が確認できると思うのは、グローバル変数 'bootstrappedData'にデータを割り当てるJavaScriptコードがAngularより前に実行されていることを確認することだけです。 –

+0

は私のところでは小さなエラーでした。データを置いたスクリプトタグの型属性は 'js/data'に設定されていましたので、javascriptとして実行されていませんでした。 > _ < –

1

どのようにこのようなものについて:これはあなたのitemsのを前提とし

app.run(['items', function (items) { 
    items.load(); 
}]) 

erviceは、$ httpまたは$ resourceのいずれかを使用して実際のAjaxの作業を行うload関数(またはそのようなもの)を持っています。

+0

)私は 'load()'関数を呼び出すだけで、まだそのデータをロードするためにそのAjaxリクエストを作成しています。インラインのjavascriptの 'items'の配列を使用して、またはあなたの答えを完全に誤解していますか? –

+0

"load"関数は、成功関数が新しいデータセットをインライン "items"変数に割り当てるAjaxリクエストを実行すると仮定しています。したがって、 "load"は何も返しません。その唯一の目的は、内部の "items"配列にデータを取得することです。 – Jollymorphic