JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.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 }}
    </div>
  `,
  controller: function(api) {
    var ctrl = this;
    ctrl.users = [];

    // fetch users form api (async)
    api.users.fetch()
      .then(function(users) {
        console.log("then #1 fertig");
        ctrl.users = users;
        
        api.users.createPromise()
          .then(function(res) {
            console.log("then #2 fertig - res: " + res);
            return res; // wo geht dieses return eigentlich hin ?
          })
          .finally(function(res) { 
            console.log("chain done " + res ); // hier geht's nicht hin
          });
      })

  }
})


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

  function createPromise() {
    return $q(function(resolve, reject) {
      $timeout(function() {
        var res = "mein Wert";
        resolve(res);
      }, 1000);
    })
  }

  function fetch() {

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



  return {
    users: {
      fetch: fetch,
      createPromise: createPromise
    }
  };
});