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, imageService) {
    var ctrl = this;
    ctrl.users = [];
    ctrl.imgArray = [];

    api.users.loadJSON()
      .then(function(users) {
        console.log("loadJSON() fertig...users: " + users);
        ctrl.users = users; // Array
        return imageService.loadIMG(users);
      })

    .then(function(imgArray) {
      console.log("loadIMG() fertig...imgArray: " + imgArray);
    })

    .catch(function(err) {
        // handle error
        throw err;
      })
      .finally(function() {
        console.log("chain done");
      });


  }
})


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

  function loadJSON() {

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


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

.factory('imageService', function($q) {



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

  function loadIMG(users) {

    var q = $q.defer();
    // Preload JS anstossen ->
    var users = users; // wird später befüllt
    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");
      imgArray = ["Bild1", "Bild2", "Bild3"];
      q.resolve(imgArray);

    }

    return q.promise;

  }


  return {

    loadIMG: loadIMG

  };
});