Can't make ng-view work

I'm new to angular and trying to learn it, so I guess this is a pretty basic question,

I am trying to use ng-view, so far with no success.

this is my code:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello world</title>
    <script src="~/scripts/refernces/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="~/scripts/refernces/angular.min.js"></script>
    <script src="~/scripts/refernces/angular-route.min.js"></script>
    <script src="../../scripts/App/myApp.js"></script>
</head>
<body ng-app="myApp">
  <nav class='navbar navbar-default'>
    <div class='container-fluid'>
      <div class='navbar-header'>
         <a class='navbar-header' href='Home'>Demo Site</a>
      </div>
    <div>
   <ul class='nav navbar-nav'>
      <li class='active'><a href='#Home'>Home</a></li>
      <li><a href='/#About'>About</a></li>
      <li><a href='/#Contact'>Contact</a></li>
      <li><a href='/#Other'>Other</a></li></ul></div</div></nav>"
  <div ng-view></div>
</body>

JS:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when("#About", {
        template: '<h1>about</h1>'
    })
        .when("Contact",
    {
        template: '<h1>Contact</h1>'
    });   
});

I've tried declaring 'when' with and without the '#' sign, and I know Angular is loading fine (I have a controller that acts as I expect and I don't have any errors in the console) but I can't seem to make the routing work.

Tnx

Solution

If you set $locationProvider.html5Mode to true, you need to add:

<base href="/">

in the head of the document.

Also you do not need to use the hash in the href.

So give this code a try:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="/">
    <title>Hello world</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.9/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
<nav class='navbar navbar-default'>
    <div class='container-fluid'>
        <div class='navbar-header'>
            <a class='navbar-header' href='Home'>Demo Site</a>
        </div>
        <div>
            <ul class='nav navbar-nav'>
                <li class='active'><a href='Home'>Home</a></li>
                <li><a href='/About'>About</a></li>
                <li><a href='/Contact'>Contact</a></li>
                <li><a href='/Other'>Other</a></li>
            </ul>
        </div
    </div>
</nav>

<div ng-view></div>
<script>
    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when("/About", {
                    template: '<h1>about</h1>'
                })
                .when("/Contact",
                        {
                            template: '<h1>Contact</h1>'
                        });
    });
</script>
</body>