2

我们正在准备升级我们的 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 提要，然后分配所有数据

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

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

但这会导致一系列问题。

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

4

1 回答 1

2

好的，根据我的理解，在加载 UI 的任何其他内容之前，您需要 json 数据（因为它是在站点加载自身之前需要的数据）。

所以，你不能http在配置阶段进行，如果你在run阶段调用，你必须等到主http调用完成（让我们调用它/site_data/）。

  1. 不要ng-app在 index.html 中使用

  2. 在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.....

这种方法有一个缺点，即一旦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模块。

angular.module('data',[]).constant('DATA',res);

这样的事情可能对您所描述的情况有所帮助。

于 2019-02-22T13:31:31.863 回答