Get data from AJAX before loading AngularJS ap

Question

We are preparing for upgrading our AngularJS app and refactoring for that. Currently we are running into an architectural issue:

Our app currently loads JSON through a jQuery AJAX call, this sets up all of the data and then bootstraps the app.

We need to move the AJAX call to Angular however, so that we can bootstrap the app without waiting for the AJAX to return (which is necessary for the upgrade)

$.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']);
});

I've been trying something along the lines of the below, where the initService gets the JSON feed and then assigns all of the data

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

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

But this results in a bunch of issues.

How do we properly load our AngularJS app, that requires data from AJAX to operate?

Answer 1

Ok, as per my understanding, You need json data before anything else of the UI loads (since it's a data which is required before the site even loads itself).

So, you can't make http on config phase and if you call in run phase, you have to wait till the main http call is made(Lets call it /site_data/).

1. Don't use ng-app in index.html

2. In app.js file

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

This approach has a drawback that your site will be loaded once the http call is resolved.

Update

As per the comments, you are trying to build a hybrid application, so 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;
      })
    }
  }

I have created a constant by creating a module after http is resolved and then I manually bootstrapped angularJS module.

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

Something like this might be helpful for the situation that you are describing.