JSFiddle - React, Tailwind, and code Playground

by Vikas

HTML

<!DOCTYPE html>
<html>

<head>
  <script src="//unpkg.com/show-current-browser-url"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
  <title>Plunk demonstrating ui-router transitions issue</title>
</head>

<body ng-app="myApp">

  <div>
    <a ui-sref="hello">Hello</a>
    <a ui-sref="about">About</a>
  </div>

  <ui-view></ui-view>

</body>

</html>

JavaScript

var myApp = angular.module('myApp', ['ui.router']);

myApp
  .run(['$trace', function($trace) {
    $trace.enable('TRANSITION');
  }])
  .run(['$state', function($state) {
    $state.defaultErrorHandler(function() {
      console.log('Default error handler fired!');
    });
  }])
  .run(['$transitions', function($transitions) {
    $transitions.onError({}, function(transition) {
      console.log('Transition erred!', transition.error());
    });
  }])
  .component('hello', {
    template: '<h3>Hello!</h3>',
  })
  .component('about', {
    template: '<h3>About</h3>',
  })
  .service('dataService', function($q) {
    return {
      getData:  function getData () {
        return $q.reject({ reason: 'error reason' });
      }
    }
  })
  .config(function($stateProvider, $uiRouterProvider) {
    $stateProvider.state({
      name: 'hello',
      url: '/hello',
      component: 'hello'
    }).state({
      name: 'about',
      url: '/about',
      component: 'about',
      resolve: {
        data: ['dataService', function (dataService) {
          return dataService.getData();
        }]
      }
    });
  });