6

以下のコードのように、Angular がブートストラップされる前に、ファクトリ サービスのメソッドにアクセスすることは可能ですか?

多数のグローバル アプリケーション変数を設定するために、Angular が起動する前に多数の AJAX リクエストを作成する必要があります。私はこれのロジックを保持したり、Angular サービス内に応答を保存したり、promise を返すことを望んでいました...

<script src="scripts/app.js"></script>
<script src="scripts/factories/app.js"></script>

<script>
    angular.element(document).ready(function() {

        factoryName.startup().then(function() {
            angular.bootstrap(document, ['MyApp']);
        }, function(err) {
            console.log(error fetching bootstrap data);
        }

    });
</script>

同様の動作を得るために使用する別の方法はありますか?

4

2 に答える 2

4

以下は、アプリケーションをブートストラップする前に構成ファイルをロードする例です。

ブートストラップへの最初の呼び出しは、$http や $location などの角度付きサービスにアクセスするために行われます (この時点で独自のモジュールを挿入して、カスタム サービスにアクセスすることもできます)。

構成ファイルがロードされた後、メイン アプリケーションに対して angular.bootstrap が呼び出され、ロードされた構成が注入されたその場しのぎのモジュール (rsacAppBootstrap) の定数として設定されます。

実行ブロックから設定された promise を使用することよりも、少なくとも 2 つの利点があります。

  1. 構成に依存するすべての約束のボイラープレートの削減
  2. RequireJS を使用して、環境に基づいて条件付きで依存関係を読み込む機能

カスタム ブートストラップ スクリプト:

angular.bootstrap().invoke(function ($http, $location) {

  var env = $location.search()._env || null;
  if (env === true) {
    env = null;
  }

  var configUri = 'config/env.json';
  if (env) {
    configUri = configUri.replace('json', env + '.json');
  }

  var rsacAppBootstrap = angular.module('rsacAppBootstrap', [])
    .run(function ($rootScope, $location, $window) {
      var env = $location.search()._env;
      $rootScope.$on('$locationChangeSuccess', function () {
        var newEnv = $location.search()._env;
        if (env !== newEnv) {
          $window.location.reload();
        }
      })
    });

  function bootstrap(config) {
    rsacAppBootstrap.constant('rsacConfig', config || {});
    angular.element(document).ready(function () {
      var modules = ['rsacApp', 'rsacAppBootstrap'];
      if (config.modules){
        config.modules.forEach(function(v){
          modules.push(v);
        })
      }
      angular.bootstrap(document, modules);
    });
  }

  $http.get(configUri)
    .success(function (config) {
      config._env = env;
      if (config.require) {
        require(config.require, function(){
          bootstrap(config);
        });
      } else {
        bootstrap(config);
      }
    })
    .error(function () {
      bootstrap();
    });

});

構成ファイルの例:

{
  "_meta": [
    "Development environment settings"
  ],

  "require":[
    "//code.angularjs.org/1.2.3/angular-mocks.js",
    "components/rsacMock/js/rsacMock.js"
  ],

  "modules":[
    "ngMockE2E",
    "rsacMock"
  ],

  "resources": { ... }

}
于 2013-12-03T22:54:38.950 に答える