Question

我们正在准备升级AngularJS应用并为此进行重构。目前，我们遇到了一个架构问题：

我们的应用程序当前通过jQuery AJAX调用加载JSON，这将设置所有数据，然后引导应用程序。

但是，我们需要将AJAX调用移至Angular，以便我们可以引导应用程序而无需等待AJAX返回（升级是必需的）

$.get('/ajax/init').done(function (initData) {
  walletApp.run([
    'SomeService', function (someService) {
      // ...
    },
  ]);

  walletApp.config([
    'SomeProvider', function (someProvider) {
      // ...
    },
  ]);

  walletApp
    .factory('navInfo', function () {
      return initData.navInfo;
    })
    .factory('userInfo', function () {
      return initData.userInfo;
    });

  // ETC

  // Below is the important line
  angular.bootstrap(document, ['walletApp']);
});

我一直在尝试以下方法，其中initService获取JSON feed，然后分配所有数据

angular.module('walletApp')
  .run([
    'InitService', function (initService) {
      initService.get();
    },
  ]);

angular.bootstrap(document, ['walletApp']);

但这会导致很多问题。

我们如何正确加载需要AJAX数据才能运行的AngularJS应用？

Answer 1

好的，据我了解，您需要先加载json数据，然后再加载UI的其他任何内容（因为这是网站甚至加载自身之前都需要的数据）。

因此，您无法在配置阶段进行http的操作，如果您在run阶段进行调用，则必须等到进行主要的http调用后，（{ {1}}。

不要在index.html中使用/site_data/
在ng-app文件中
```
app.js
```

这种方法的缺点是，(function() { var initInjector = angular.injector(['ng']); var $http = initInjector.get('$http'); $http.get('/site_data/',{headers: {'Cache-Control' : 'no-cache'}}).then( function (response) { angular.module('walletApp.info', []).constant('SITE_CONF_DATA', response.data); angular.element(document).ready(function() { angular.bootstrap(document, ['walletApp']); //<-- manual bootstrapping of `ng-app` }); } ); })(); var app = angular.module('walletApp',['walletApp.info']); app.config(function(SITE_CONF_DATA){ // Bingo, you have the data }) app.run()..... app.controller... app.factory.....调用解决后，将加载您的网站。

更新

根据评论，您正在尝试构建混合应用程序，因此take a look at this demo。

http

在解决ngOnInit() { // Ensure AngularJS is only bootstrapped once. if (!angularJsBootstrapped) { this.http.get('https://jsonplaceholder.typicode.com/todos/1').delay(5000).subscribe(res => { angular.module('data',[]).constant('DATA',res); this.upgrade.bootstrap(document.body, [module.name]); setUpLocationSync(this.upgrade); angularJsBootstrapped = true; }) } }之后，我通过创建一个模块来创建constant，然后我手动引导了http模块。

angularJS

类似的事情对于您所描述的情况可能会有所帮助。

加载AngularJS ap之前从AJAX获取数据

1 个答案:

更新