JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div ng-app="test">
    <a href="#/">Home</a>
    <a href="#/t">Click</a>
    <div ng-view>
    </div>
</div>

JavaScript

var i = 1;
var data = angular.module('test', []).
config(function ($routeProvider) {
    $routeProvider.when('/', { controller: 'TestCtrl', 
                              template: '<span>{{test}}</span>',
                              resolve: {
                                  'someData': function ($q, $rootScope, OtherService) {
                                      var d = $q.defer();
                                      OtherService.then(function (data) {
                                          i += 1;
                                          if (i % 2) {
                                              setTimeout(function () {
                                                  $rootScope.$apply(function () { 
                                                      d.resolve('Some text ' + data);
                                                  });
                                              }, 1000);
                                          } else {
                                              d.resolve('Without promise ' + data);
                                          }
                                      });
                                      return d.promise;
                                  }
                              }});
});
data.factory('OtherService', function ($q, $rootScope) {
    var d = $q.defer();
    setTimeout(function () {
        $rootScope.$apply(function () {
            d.resolve('Data');
        });
    }, 3000);
    return d.promise;
});
data.controller("TestCtrl", ['$scope', 'someData', function ($scope, someData) {
    $scope.test = someData;
}]);