petebacondarwin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script>
    var e = document.createElement("base");
    e.setAttribute("href",location.pathname);
    console.log(location.pathname);
    document.head.appendChild(e);
  </script>
  <script type="text/javascript" src="https://code.angularjs.org/snapshot/angular.js"></script>
  <script type="text/javascript" src="https://code.angularjs.org/snapshot/angular-route.js"></script>
  <script type="text/javascript">

    angular.module('demo', ['ngRoute'])

    .config(function($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
        $routeProvider.when('/Book/', {
        templateUrl: 'book.html',
        controller: 'BookCntl'
      });
      $routeProvider.when('/Book/:bookId', {
        templateUrl: 'book.html',
        controller: 'BookCntl'
      });
      $routeProvider.otherwise({
        templateUrl: 'other.html',
        controller: 'MainCntl'
      });


    })

    .controller('MainCntl', function MainCntl($scope, $route, $routeParams, $location) {
      $scope.$route = $route;
      $scope.$location = $location;
      $scope.$routeParams = $routeParams;
    })

    .controller('BookCntl', function BookCntl($scope, $routeParams) {
      $scope.name = "BookCntl";
      $scope.params = $routeParams;
    });
  </script>

</head>
<body>
  <div ng-app="demo">
    <div ng-controller="MainCntl">
        <a href="./Book/Moby">Moby</a> |
        <a href="./Book/Gatsby">Gatsby</a> |
        <a href=".">base root</a> |
        <a href="/Outside">Outside</a> |
        <a href="http://localhost:8080/Outside">Outside absolute</a> |

      <div ng-view></div>


    </div>


    <!-- book.html -->
    <script type="text/ng-template" id="book.html">
      controller: {{name}}<br />
      Book Id: {{params.bookId}}<br />
    </script>

    <!-- chapter.html -->
    <script type="text/ng-template" id="chapter.html">
      controller: {{name}}<br />
      Book Id: {{params.bookId}}<br />
      Chapter Id: {{params.chapterId}}
    </script>

    <!-- chapter.html -->
    <script type="text/ng-template" id="other.html">
        <p style="color:red">The 'otherwise' route matches both the first page load and when the 'Outside' link is clicked.</p>
    </script>

  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script>
	var e = document.createElement("base");
	e.setAttribute("href",location.pathname);
	console.log(location.pathname);
	document.head.appendChild(e);
	</script>
	<script type="text/javascript" src="https://code.angularjs.org/snapshot/angular.js"></script>
	<script type="text/javascript" src="https://code.angularjs.org/snapshot/angular-route.js"></script>
	<script type="text/javascript">

	angular.module('demo', ['ngRoute'])

	.config(function($routeProvider, $locationProvider) {
	$locationProvider.html5Mode(true);
	$routeProvider.when('/Book/', {
	templateUrl: 'book.html',
	controller: 'BookCntl'
	});
	$routeProvider.when('/Book/:bookId', {
	templateUrl: 'book.html',
	controller: 'BookCntl'
	});
	$routeProvider.otherwise({
	templateUrl: 'other.html',
	controller: 'MainCntl'
	});


	})

	.controller('MainCntl', function MainCntl($scope, $route, $routeParams, $location) {
	$scope.$route = $route;
	$scope.$location = $location;
	$scope.$routeParams = $routeParams;
	})

	.controller('BookCntl', function BookCntl($scope, $routeParams) {
	$scope.name = "BookCntl";
	$scope.params = $routeParams;
	});
	</script>

	</head>
	<body>
	<div ng-app="demo">
	<div ng-controller="MainCntl">
	<a href="./Book/Moby">Moby</a> \|
	<a href="./Book/Gatsby">Gatsby</a> \|
	<a href=".">base root</a> \|
	<a href="/Outside">Outside</a> \|
	<a href="http://localhost:8080/Outside">Outside absolute</a> \|

	<div ng-view></div>


	</div>


	<!-- book.html -->
	<script type="text/ng-template" id="book.html">
	controller: {{name}}<br />
	Book Id: {{params.bookId}}<br />
	</script>

	<!-- chapter.html -->
	<script type="text/ng-template" id="chapter.html">
	controller: {{name}}<br />
	Book Id: {{params.bookId}}<br />
	Chapter Id: {{params.chapterId}}
	</script>

	<!-- chapter.html -->
	<script type="text/ng-template" id="other.html">
	<p style="color:red">The 'otherwise' route matches both the first page load and when the 'Outside' link is clicked.</p>
	</script>

	</div>
	</body>
	</html>