Question

是否有可能在 Angular被引导之前访问工厂服务的方法，类似于下面的代码？

我需要在Angular启动之前创建一些AJAX请求，以便设置许多全局应用程序变量。我原本希望为此保留逻辑和/或将响应存储在Angular服务中，并返回一个承诺......

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

是否有其他方法可用于获得类似的行为？

Answer 1

您可以在module run blocks进行首次服务呼叫。当为这些变量进行后续服务调用时，您可以从$ http的缓存中提供服务，或者在第一次调用时显式缓存该承诺。

// example
myApp.run(function(MyService) {
  // call your function when Angular starts up
  MyService.init();
});

Answer 2

下面是一个在引导应用程序之前加载配置文件的示例。

第一次调用bootstrap是为了获得对$ http和$ location等角度服务的访问权限（此时你也可以注入自己的模块来访问自定义服务）。

加载配置文件后，将为主应用程序调用angular.bootstrap，并将已加载的配置设置为注入的临时模块（rsacAppBootstrap）上的常量。

与使用运行块中的promise集相比，这至少有两个优点：

减少对依赖于配置的一切承诺的样板
能够使用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": { ... }

}

手动引导/初始化时访问Angular服务

2 个答案: