Angular JS - views did not change with html5Mode(true) but URL does

I am trying to get rid off #! from URL. I have the following code HTML and JS,

<head> 
    <base href="/"> 
</head>


<nav id="top-navigations" ng-app="portfolioApp">
            <a class="dropdown">Menu <span class="arrow">&#9660;</span></a>
            <ul ng-controller="sectionController">
              <li ng-repeat="navName in navNames"><a href="/about">{{navName.name}}</a></li>
            </ul>
</nav>


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

portfolioApp.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider){

  $routeProvider
  .when('/about',{
    templateUrl:'views/about.html',
    controller:'sectionController'
  }).otherwise({
    redirectTo:'/'
  });

  $locationProvider.html5Mode(true);

}]);

The URL in the address bar changes to 'http://localhost:4000/about' when i click the link but the views are not rendered and remained the same. Any idea wha i am doing wrong here?

Solution

First:

You have to create two state for example home and about.

Second:

Then you have to create a swappable view as <div ui-view="main"></div>.

Third:

You have to use the url properly like follows:

<a href="/about">About Me</a>
<a href="/home">Home</a>

Third: Create two file, home.html and about.html. The directory structure will be:

-index.html

-views/home.html

-views/about.html

app.js

var app = angular.module("portfolioApp", ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
  var homeState = {
    name: 'home',
    url:'/home',
    views: {
        'main': {
          templateUrl: "views/home.html"
        }
      }
  }

  var aboutState = {
    name: '/about',
    url:'/about',
    views: {
        'main': {
          templateUrl: "views/about.html"
        }
      }
  }

  $stateProvider.state(homeState);
  $stateProvider.state(aboutState);
  $locationProvider.hashPrefix('');

  $urlRouterProvider.otherwise("/home");

});

index.html

<html>
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
         <script src="app.js"></script>
         <style>.active { color: red; font-weight: bold; }</style>
         <base href="/">
    </head>
<body ng-app="portfolioApp">
<nav id="top-navigations">
            <a class="dropdown">Menu <span class="arrow">&#9660;</span>
                <a href="/about">About Me</a>
                <a href="/home">Home</a>
            </a>
</nav>
    <div ui-view="main"></div>
</body>
</html>

home.html:

<p>Home</p>

about.html:

<p>About</p>