Gwash3189/app.js

## app.js
function clean (array,deleteValue) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] == deleteValue) {
      array.splice(i, 1);
      i--;
    }
  }
  return array;
}

var app = angular.module('app',[]);
app.config(function($routeProvider){
  $routeProvider.when('/Approvals', {
    controller: 'ctrl',
    templateUrl: './home.html'
  });
  $routeProvider.when('/Steve,Test', {
    controller: 'ctrl',
    templateUrl: './home.html'
  });
  $routeProvider.when('/Steve,', {
    controller: 'ctrl',
    templateUrl: './home.html'
  });
  $routeProvider.when('/', {
    template: '<a href="#/Steve,Test">Steve,Test </a> <br> <a href="#/Approvals">Approvals</a><br> <a href="#/Steve,">Steve,</a>'
  })
})
app.controller('ctrl', function($scope, $location){
    $scope.vm = {};
    $scope.vm.message = $location.path();
});
app.directive('headerBar', function(){
  return {
    restrict: 'E',
    controller: function($scope, $location){
      $scope.vm = {};
      $scope.vm.message = getName(getRoute($location.path()));
      $scope.vm.back = function(){
        $location.path('/');
      }

      function getRoute(route){
        var result = clean(route.split('/'), '');
        if(result.length >= 2) {
          var length = result.length - 1;
          return result[length];
        }
        return result[0];
      }

      function getName(name){
        if(name.indexOf(',') > -1){
          return name.split(',')[0] + ' ' + name.split(',')[1];
        } else {
          return name;
        }

      }
    },
    template: '<div class="header-bar">' +
    '<span class="col-xs-2" ><button ng-click="vm.back()" class="btn route-button">back</button></span>'+
    '<h3 style="" class="col-xs-8 center">{{ vm.message }}</h3>' +
    '<span class="col-xs-2 pull-right"><button class="btn route-button">logout</button></span>'+
    '</div>'
  }
});

## html.html
<div class="container">
      <div class="row">
        <header-bar></header-bar>
      </div>
</div>

## index.html
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">

  <div ng-view>

  </div>
  </body>

</html>

## style.css

.center{
  text-align:center;
}

.route{
  display: inline;
}

.route-button{
  margin-top: 1.2em;
}

.header-bar{

}
	function clean (array,deleteValue) {
	for (var i = 0; i < array.length; i++) {
	if (array[i] == deleteValue) {
	array.splice(i, 1);
	i--;
	}
	}
	return array;
	}

	var app = angular.module('app',[]);
	app.config(function($routeProvider){
	$routeProvider.when('/Approvals', {
	controller: 'ctrl',
	templateUrl: './home.html'
	});
	$routeProvider.when('/Steve,Test', {
	controller: 'ctrl',
	templateUrl: './home.html'
	});
	$routeProvider.when('/Steve,', {
	controller: 'ctrl',
	templateUrl: './home.html'
	});
	$routeProvider.when('/', {
	template: '<a href="#/Steve,Test">Steve,Test </a> <br> <a href="#/Approvals">Approvals</a><br> <a href="#/Steve,">Steve,</a>'
	})
	})
	app.controller('ctrl', function($scope, $location){
	$scope.vm = {};
	$scope.vm.message = $location.path();
	});
	app.directive('headerBar', function(){
	return {
	restrict: 'E',
	controller: function($scope, $location){
	$scope.vm = {};
	$scope.vm.message = getName(getRoute($location.path()));
	$scope.vm.back = function(){
	$location.path('/');
	}

	function getRoute(route){
	var result = clean(route.split('/'), '');
	if(result.length >= 2) {
	var length = result.length - 1;
	return result[length];
	}
	return result[0];
	}

	function getName(name){
	if(name.indexOf(',') > -1){
	return name.split(',')[0] + ' ' + name.split(',')[1];
	} else {
	return name;
	}

	}
	},
	template: '<div class="header-bar">' +
	'<span class="col-xs-2" ><button ng-click="vm.back()" class="btn route-button">back</button></span>'+
	'<h3 style="" class="col-xs-8 center">{{ vm.message }}</h3>' +
	'<span class="col-xs-2 pull-right"><button class="btn route-button">logout</button></span>'+
	'</div>'
	}
	});
	<div class="container">
	<div class="row">
	<header-bar></header-bar>
	</div>
	</div>
	<!DOCTYPE html>
	<html>

	<head>
	<link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
	<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	</head>

	<body ng-app="app">

	<div ng-view>

	</div>
	</body>

	</html>

	.center{
	text-align:center;
	}

	.route{
	display: inline;
	}

	.route-button{
	margin-top: 1.2em;
	}

	.header-bar{

	}