JSFiddle - React, Tailwind, and code Playground

by suppenhuhn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>
<div ng-app='app'>
  <app></app>
</div>

JavaScript

console.clear();
angular.module('app', [])

.component('app', {
  template: `
  	<div ng-repeat='user in $ctrl.users'>
    	{{ user.id }} {{ user.username }} {{ user.username }}
    </div>
  `,
  controller: function(api) {
    var ctrl = this;
    ctrl.users = [];

    api.users.loadJSON()
      .then(function(users) {
        console.log("loadJSON() fertig");
        ctrl.users = users;


        api.users.loadIMG()
          .then(function(bilderArray) {
            console.log("loadIMG() - imgArray: " + bilderArray);
            return bilderArray; // wohin geht dieses return eigentlich ?
          })
          .finally(function() {
            console.log("chain done");
          });
      })

  }
})


.factory('api', function($q, $timeout) {

  var imgArray = []; // wird befüllt in handleComplete()

  function loadIMG() {
    // Preload JS anstossen ->
    var queue = new createjs.LoadQueue(true);
    queue.addEventListener("fileload", handleFileLoad);
    queue.addEventListener("complete", handleComplete);
    queue.loadManifest({
      src: "mein-pfad-zum-manifest",
      type: "manifest"
    }, true);

    function handleFileLoad(event) {
      // hier für jedes geladene Bild -> imgArray.push()
    }

    function handleComplete() {
      console.log("Bilder fertig geladen - jetzt erst Promise loadIMG auflösen");
      imgArray = ["Bild1", "Bild2", "Bild3"];

    }

    return $q(function(resolve, reject) {
      $timeout(function() {

        resolve(imgArray);
      }, 1000);
    })
  }

  function loadJSON() {

    return $q.when([{
      id: 1,
      username: 'foo'
    }, {
      id: 2,
      username: 'bar'
    }]);
  }






  return {
    users: {
      loadJSON: loadJSON,
      loadIMG: loadIMG
    }
  };
});