<html ng-app="theApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.13/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script>
<script src="stateController.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<font face="Source Sans Pro">
</head>
<body ng-controller="stateController">
<div class="container-fluid">
<center>
<br><br>
<button ui-sref="home"><b> Home </b></button>
<button ui-sref="about"><b> About </b></button>
</center>
<div ui-view></div>
</div>
</body>
</html>
<div class="container">
<center>
<h1> Hello user1902160! </h1>
<h2> This is your <u>home</u> page! </h2>
<h3> Show the world what you're made of! </h3>
</center>
</div>
var app = angular.module('theApp', ['ui.router']);
app.run(['$state', function($state) {
$state.transitionTo('home');
}]);
app.controller('stateController', function($scope, $state) {
$scope.$state = $state;
});
app.config(function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
});
<div class="container">
<center>
<h1> Hello again user1902160! </h1>
<h2> This is your <u>about</u> page! </h2>
<h3> Write stories about yourself! </h3>
</center>
</div>