JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<div ng-app="Test">
	<a ui-sref="authroot.testA">Goto A</a>
	<a ui-sref="authroot.testB">Goto B</a>
	<a ui-sref="other">Goto Other</a>
	<div ui-view>Loading...</div>
    <textarea style="width:400px;height:400px;"></textarea>
</div>

JavaScript

function log(value) {
    console.log(value);
    var box = document.getElementsByTagName("textarea")[0];
    box.value += value+"\n";
}

(function(ng) {
	var app = ng.module("Test", ["ui.router"]);
	app.config(["$stateProvider", "$urlRouterProvider", function(sp, urp) {
		urp.otherwise("/testA");
		sp.state("authroot", {
			abstract: true, 
			url: "",
			template: "<div ui-view></div>", 
            resolve: {User: ["UserService", function(UserService) {
                log("Resolving dependency...");
                return UserService.GetUser();
            }]}
		});
		sp.state("authroot.testA", {
			url: "/testA", 
			template: "<h1>Test A {{User|json}}</h1>", 
			controller: "TestCtrl"
		});
		sp.state("authroot.testB", {
			url: "/testB", 
			template: "<h1>Test B {{User|json}}</h1>", 
			controller: "TestCtrl"
		});
		sp.state("other", {
			url: "/other", 
			template: "<h1>Other</h1>", 
		});
	}]);
	app.controller("TestCtrl", ["$scope", "User", function($scope, User) {$scope.User = User;}]);
	app.factory("UserService", ["$q", "$timeout", function($q, $timeout) {
		function GetUser() {
			log("Getting User information from server...");
			var d = $q.defer();
			$timeout(function(){
				log("Got User info.");
				d.resolve({UserName:"JohnDoe1", OtherData: "asdf"});
			}, 500);
			return d.promise;
		};
		return {
			GetUser: GetUser
		};
	}]);
})(window.angular);