2013-07-12 11 views
7

This質問、多くの中で、アプリケーションが起動する前にロードする必要があるコントローラレベルresolveを使用することを示しています。非同期プリロードされたデータのためのコントローラではなく、角のないアプリケーションの解決

は、私は彼らがすべてのデータに依存している場合、私にとんでもないだろうresolveを使用して...各モジュール内のすべて個別に定義されたルートで、コントローラの多くを持っています。私はまた、データに依存する指令を持っています(自動補完検索など)。

"各コントローラが表示される前にデータをロードする(角度サービスを使用する)"の方がいいですか?私はアプリケーションをロードする必要があり、asyncはデータをフェッチし、ローディングまたはコントローラテンプレートを示すrootScopeデータを使ってng-showを使用します。私はapp.runに入れようとしましたが、正常に動作するようにはできませんでした...そのブロック内の何かの非同期は、アプリケーションを呼び起こすようです。

ヘルプ?

答えて

1

ここに私がしたことがあります。私はこのソリューションの巨大なファンではありませんが、これまで私がこれまで思いつくことができた最高のものです。

まず第一に、あなたがそうのように、各ルートに複数のresolvesを持つことができます:あなたはconfigブロックにアプリケーションサービスを注入することはできませんので

resolve: { 
    UserAccount: app.resolves('UserAccount'), 
    Posts: app.resolves('Posts') 
} 

を、私は別のファイルに大きな古いオブジェクトを作成しました私のサービスへのショートカットが含まれています

app.resolves = (function(){ 
    // Resolves allow us to use `deferred`s to only 
    // load our template after the data it requires 
    // has been provided by the server. 
    var resolve = {}; 

    resolve.UserAccount = 
    ['Users', function (Users) { 
    return Users.fetchActive(); 
    }]; 

    resolve.Posts = 
    ['Posts', function(Posts) { 
    return Posts.getAllPosts(); 
    }]; 

    // Public API 
    // @param string name 
    return function (name) { 
    return resolve[name] 
    }; 
})(); 
+1

特定の「アプリ」解決方法はありませんか?私は15の異なるコントローラを持っている場合、私は1回だけ "解決"オブジェクトを指定したい(app ... resolve:mydata)、同じブロックではなく15回。 –

+0

しかし、解決ファイルは興味深いアプローチです。 –

+0

多分あなたは次のようなことを試すことができます:http://jsfiddle.net/N9eAz/ 私はそこにJavaScriptのエラーがないことを超えてテストしていません。あなたの 'app.resolveUsers()'関数は約束を返すべきです、または各メンバーが約束であるオブジェクトを返すべきです。あなたのルート宣言の直後にあなたのアプリケーションの設定にある限り、私はそれがトリックを行うだろうと思うだろう。 – jdp

0

私が作ったアプリレベルの解決の構成には明白な方法はありませんから、あなたができる最善のことは、実際にデコレータを使用して$routeProvider能力を変更され、と思います。これにより、resolveの設定が各アプリケーションルートに設定されているかどうかを確認し、非同期データをロードするか、必要なデータを継続する特別な解決プロミスを追加/マージすることができます。必要。

私は今この同じ問題に苦しんでいます。ジェネリックで再利用可能なコードをここに作り、GitHubですぐに私のソリューションを投稿しようとします。この回答を適切な例で更新しようとします。

1

私はこの質問が古いことを知っていますが、受け入れられた答えもクリーンなものもないので、これも解決しようとしています。

アプリごとの解決状態を有するの欠如は、今しばらくの間、私を盗聴し、これは私が最終的に思い付いたソリューションです。要するにhttp://jsfiddle.net/gabrielcatalin/cvyq0oys/

、私は角モジュールエンハンサー(デコレータ)を作成し、これは2つの方法をさらにサポートします:解決方法準備完了()。 AngularEnhancerスニペットだけangular.js後にロードする必要がロードされており、実装前に、そのよう:

angular.module('myApp', []) 
    .ready(function() { 
     alert('The app is ready to be used!'); 
    }) 
    .resolve(['$q', function ($q) { 
     // The resolve can wait for a promise to be resolved 
     var differed = $q.defer(); 

     setTimeout(function() { 
      differed.resolve();  
     }, 1000); 

     return differed.promise; 

     // Or a true value 
     // return true; 

     // Or even a truish value 
     // return 'value'; 
    }]) 
    .ready(function() { 
     // The order of where the ready() appear doesn't matter 
     alert('This is just another alert to show that it can have as many as possible!'); 
    }); 

とhtml:

<script type="text/javascript" src="angular.js"> 
<script type="text/javascript" src="angularEnhancer.js"> 
<script type="text/javascript" src="main.js"> 

これは、実装がどのように見えるかです

<body> 
    <div ng-if="!appReady" class="splash-screen">This is just the splash screen!</div> 
    <div ng-if="appReady">Welcome to the app!</div> 

    <script> 
     angular.element(document).ready(function() { 
      angular.bootstrap(document, ['myApp']); 
     }); 
    </script> 
</body> 

皆様からのご意見をお待ちしております。