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

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 提要，然后分配所有数据

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

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

但这会导致一系列问题。

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

Answer 1

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

所以，您不能在配置阶段拨打http，如果您在run 阶段拨打电话，您必须等到主要的http 拨打电话（我们称之为/site_data/）。

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

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 调用，您的网站就会被加载。

更新

根据 cmets，您正在尝试构建一个混合应用程序，所以 take a look at this demo。

  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;
      })
    }
  }

我通过在解析http 后创建一个模块创建了一个constant，然后我手动引导了angularJS 模块。

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

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