JSFiddle - React, Tailwind, and code Playground

by Rick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div id="app">
  <h3 ng-loading>Loading</h3>
  <span ng-cloak>{{ done }}</span>
  <pre ng-cloak>{{ tokens }}</pre>
</div>

JavaScript

/**
* Main angular module
*/
angular.module('app', ['OAuth']).config(function () {
  console.log('running config');
}).run(function ($rootScope,TokenStore) {
  console.log('running module');
  $rootScope.tokens = TokenStore.getTokens();
  $rootScope.done = TokenStore.getTokens() ? 'Booted!' : 'Failed';
}).directive('ngLoading', function () {
  return function (scope, el) {
    el.remove();
  }
})

/**
* Dependency module
*/
angular.module('OAuth',[])
.factory('TokenStore', function($timeout) {
  return {
    init: function() {
    	return $timeout(function() {
        window.tokens = {
          access_token: Math.random().toString(36).substring(7),
          expires_in: 3600,
          token_type: 'Bearer'
        };
      }, 2000);
  	},
    getTokens: function() {
      return this.token = this.token || window.tokens;
    }
  };
})

/**
 * Bootstrap the app if an asyncronous service
 * has resolved. Useful if this service is a 
 * critical dependency throughout the entire
 * application (e.g.: OAuth tokens)
 */
angular.element(document).ready(function () {
  var $injector = angular.injector(['ng','OAuth']);
  var TokenStore = $injector.get('TokenStore');
  TokenStore.init().then(function () {
    var el = document.getElementById('app');
    angular.bootstrap(el, ['app']);
  });
});