Migrate from ngRoute to ui-router

web/index.html

@@ -13,7 +13,7 @@
 	<link rel="stylesheet" href="/css/skin.css" type="text/css" />
 	<script type="text/javascript" src="/js/moment.min.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"></script>
+	<script src="/js/angular-ui-router.min.js"></script>
 	<script src="/js/dirPagination.js"></script>
 	<script type="text/javascript" src="/js/Chart.min.js"></script>
 	<script src="/js/app.js"></script>
@@ -29,7 +29,7 @@
 
 <div ng-include="'/views/header.html'"></div>
 
-<div ng-view></div>
+<section ui-view></section>
 
 </body>
 </html>

web/js/app.js

@@ -4,21 +4,31 @@ var ZoneMinder = angular.module('ZoneMinder', [
 	'ui.bootstrap',
 	'angularUtils.directives.dirPagination',
 	'ui.bootstrap.datetimepicker',
-	'ngRoute'
+	'ui.router'
 ]);
 
-ZoneMinder.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
+ZoneMinder.config(['$locationProvider', function($locationProvider) {
 	$locationProvider.html5Mode(true);    
+}]);
 
-	$routeProvider
-		.when('/', {
+ZoneMinder.config(function($stateProvider, $urlRouterProvider) {
+	$urlRouterProvider.otherwise('/');
+
+	$stateProvider
+		.state('/', {
+			url: '/',
 			templateUrl: '/views/console.html'
 		})
-
-		.when('/events', {
+		.state('events', {
+			url: '/events',
 			templateUrl: '/views/events.html'
+		})
+		.state('options', {
+			url: '/options',
+			templateUrl: '/views/options.html'
 		});
-}]);
+});
+
 ZoneMinder.config(function(paginationTemplateProvider) {
     paginationTemplateProvider.setPath('/js/dirPagination.tpl.html');
 });

web/views/header.html

@@ -1,15 +1,15 @@
     <nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController">
 			<div class="container-fluid">
-				<a href="#"><span class="navbar-brand">ZoneMinder</span></a>
+				<a ui-sref="/"><span class="navbar-brand">ZoneMinder</span></a>
 
 				<button type="button" class="btn btn-md navbar-btn pull-right" ng-class="isRunning ? 'btn-success' : 'btn-danger'" data-toggle="modal" data-target="#myModal">
 					<span class="glyphicon glyphicon-off"></span>
 				</button>
 
 				<ul class="nav navbar-nav pull-right">
-					<li><a href="#events">Events</a></li>
+					<li><a ui-sref="events">Events</a></li>
 					<li><a href="?view=timeline">Timeline</a></li>
-					<li><a href="#options">Options</a></li>
+					<li><a ui-sref="options">Options</a></li>
 					<li><a href="?view=log">Logs</span></a></li>
 					<li><a href="?view=devices">Devices</a></li>
 					<li><a href="?view=host">Host</a></li>