Вопросы Теги

Получите данные из AJAX перед загрузкой приложения AngularJS

Я просто написал это с помощью функции groupBy. 

// utils
const group = (source) => ({
  by: (grouping) => {
    const groups = source.reduce((accumulator, item) => {
      const name = JSON.stringify(grouping(item));
      accumulator[name] = accumulator[name] || [];
      accumulator[name].push(item);
      return accumulator;
    }, {});

    return Object.keys(groups).map(key => groups[key]);
  }
});

const chunk = (source, size) => group(source.map((item, index) => ({ item, index })))
.by(x => Math.floor(x.index / size))
.map(x => x.map(v => v.item));


// 103 items
const arr = [6,2,6,6,0,7,4,9,3,1,9,6,1,2,7,8,3,3,4,6,8,7,6,9,3,6,3,5,0,9,3,7,0,4,1,9,7,5,7,4,3,4,8,9,0,5,1,0,0,8,0,5,8,3,2,5,6,9,0,0,1,5,1,7,0,6,1,6,8,4,9,8,9,1,6,5,4,9,1,6,6,1,8,3,5,5,7,0,8,3,1,7,1,1,7,6,4,9,7,0,5,1,0];

const chunks = chunk(arr, 10);

console.log(JSON.stringify(chunks));

1
задан amphetamachine 4 March 2019 в 20:09
поделиться

1 ответ

Хорошо, насколько я понимаю, вам нужны данные json, прежде чем что-либо еще из пользовательского интерфейса загружается (так как это данные, которые требуются, прежде чем сайт сам загрузится).

Таким образом, вы не можете сделать http в фазе конфигурации, и если вы звоните в фазе run, вы должны подождать, пока не будет сделан основной вызов http (Позвоним ему /site_data/). [1119 ]

  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.....
[ 1122] У этого подхода есть недостаток, заключающийся в том, что ваш сайт будет загружен после разрешения вызова 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);

Нечто подобное может быть полезно для описываемой вами ситуации.

0
ответ дан Shashank Vivek 4 March 2019 в 20:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: