7

この質問は、他の多くの質問の中でもresolve、アプリケーションの開始前にロードする必要がある非同期データにコントローラーレベルを使用することを示しています。

私は多くのコントローラーを持っており、各モジュールで個別に定義されたすべてのルートを使用しています...それらがすべて data に依存しresolveている場合、使用するのはばかげています。データに依存するディレクティブもあります (オートコンプリート検索など)。

「各コントローラーが表示される前に（角度サービスを使用して）データをロードする」より良い方法はありませんか？アプリケーションをロードし、データを非同期フェッチする必要があり、ロードまたはコントローラー テンプレートのいずれかを示す rootScope データで ng-show を使用します。私はそれを入れようとしましたapp.runが、正しく動作させることができませんでした...そのブロック内の非同期のものは、アプリケーションを動かしているようです。

ヘルプ？

4

3 に答える 3

1

この質問が古いことは知っていますが、受け入れられた回答も明確な回答もないため、これも解決しようとしています。

アプリごとに解決状態がないことがしばらくの間私を悩ませていましたが、これが最終的に思いついた解決策です: http://jsfiddle.net/gabrielcatalin/cvyq0oys/

要するに、私は Angular Module Enhancer(decorator) を作成しました。これは、resolve()とready()という 2 つのメソッドをサポートしています。AngularEnhancer スニペットは、次のように、angular.js がロードされた後、実装の前にロードする必要があります。

<script type="text/javascript" src="angular.js">
<script type="text/javascript" src="angularEnhancer.js">
<script type="text/javascript" src="main.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：

<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>

皆さんからのコメントをお待ちしています！

于 2014-10-16T16:36:27.283 に答える
1

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

まず、次のresolvesように、各ルートに複数のルートを含めることができます。

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]
  };
})();
于 2013-07-12T21:03:08.120 に答える
0

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

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

于 2013-10-04T03:25:29.027 に答える