“渴望”加载AngularJS应用

I'm working on a new website which can be found under construction here: http://srgunltd.co.uk

I'm pulling data from the WordPress JSON API but if you notice when loading some pages there is a not insignificant delay between the page appearing, and the content appearing (1+ second usually). I could live with this if it wasn't AJAX driven, because this highlights the problem more.

So to avoid ambiguity, my question - are there any plugins or practices for AngularJS which allows "eager" loading of content, so it is readily available before page load?

I'm not sure there is necessarily an "angular" solution to this problem. I think this would fall under the application architecture umbrella. My first thoughts is that you would use a service and implement a caching system that is specific to your needs. Note: there could be cool libraries to help with this sort of thing, but I prefer custom solutions tailored to my needs.

I would do something like this maybe, but again, this is an application specific thing:

function dataCacheService($http){

  var dataCache {};
  return {
    // hooks to load data ahead of time
    getPage1 : function(){
      var data = "Data from Api";
      dataCache['page1'] = data;
    },
    getPage2 : function(){
      var data = "Data from Api";
      dataCache['page2'] = data;
    },
    // a check to see if cached data is available
    getCache = function(key){
      return dataCache[key] || false;
    }
  }

}

And then when your controller loads you can just call dataCacheService.getPage1() to preload the data. When your user goes to the page that requires that data, you can check to see if it exists dataCacheService.getCache('page1') or load as normal.

function page1Ctrl($scope,$http,dataCacheService){

  // check to see if the data is cached or go get it
  $scope.data = dataCacheService.getCache('page1') || getTheData();

  function getTheData(){
    //get it normally or whatever you need to do
  }

}

If you want an angular solution you can use this angular module: http://chieffancypants.github.io/angular-loading-bar/

but I think you have to change your code to become all angular oriented, so your loading-bar module must be associated to a controller written in angular code.

I hope this helps you.