JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<div ng-app="myApp">
<nav>
<a href="/categories">categories</a>
<a href="/login">login</a>
<a href="/TheSharpieOne">profile</a>
</nav>
<div ui-view=""></div>
</div>
JavaScript
var app = angular.module('myApp', ['ui.router']);
app.config(function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('default', {
url: '',
template: 'Default',
controller: function(){}
})
.state('categories', {
url: '/categories',
template: 'Categories',
controller: function(){}
})
.state('login', {
url: '/login',
template: 'Login',
controller: function(){}
})
.state('profile', {
url: '/abc',
template: 'Username: {{$state.params.username}}',
controller: function(){}
});
});
app.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});