Angular 1.x UI Router

angular.module('sampleApp', [
  'ui.router'
]);

<!DOCTYPE html>
<html ng-app="sampleApp">

  <head>
    <meta charset="utf-8" />
    <title>Angular 1.x UI Router</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
    <link href="style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script data-require="ui-router@1.0.0-alpha.5" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
    <script src="main.js"></script>
    <script src="app.component.js"></script>
    <script src="users.component.js"></script>
    <script src="widgets.component.js"></script>
  </head>

  <body>
    <div class="pageheader">
      <h1>UI Router</h1>
      <p class="lead">Using UI Router in Angular 1.x</p>
    </div>
    <div class="container">
      <my-app>
        Loading...
      </my-app>
    </div>
  </body>

</html>

.pageheader {
    padding: 2rem 15px;
    color: #cdbfe3;
    background-color: #563d7c;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    margin-bottom: 2rem;
    text-align: left;    
}

.container h1 {
  text-align: center;
}

.actions {
  margin-bottom: 2rem;
}

.btn {
  outline: none !important;
}

.active {
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.7);
}

function AppComponentCtrl() {}

var AppComponent = {
  bindings: {},
  templateUrl: 'app.component.html',
  controller: AppComponentCtrl
}

var usersState = {
    name: 'users',
    url: '/users',
    component: 'myUsers'
  },
  widgetsState = {
    name: 'widgets',
    url: '/widgets',
    component: 'myWidgets'
  }

function config($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state(usersState)
    .state(widgetsState);
    
  $urlRouterProvider.otherwise('/');
}

angular
  .module('sampleApp')
  .config(config)
  .component('myApp', AppComponent);

<div class="row">
  <div class="col-sm-12 actions">
    <a ui-sref-active="active" ui-sref="users" class="btn btn-primary">Users</a>
    <a ui-sref-active="active" ui-sref="widgets" class="btn btn-warning">Widgets</a>
  </div>
  <ui-view></ui-view>
</div>

function UsersComponentCtrl() {
  this.title = 'Users';
}
  
var UsersComponent = {
  bindings: {},
  templateUrl: 'users.component.html',
  controller: UsersComponentCtrl
}

angular
  .module('sampleApp')
  .component('myUsers', UsersComponent);

<div class="col-sm-12">
  <h1 class="jumbotron">{{$ctrl.title}}</h1>
</div>

function WidgetsComponentCtrl() {
  this.title = 'Widgets';
}
  
var WidgetsComponent = {
  bindings: {},
  templateUrl: 'widgets.component.html',
  controller: WidgetsComponentCtrl
}

angular
  .module('sampleApp')
  .component('myWidgets', WidgetsComponent);

<div class="col-sm-12">
  <h1 class="jumbotron">{{$ctrl.title}}</h1>
</div>