Problems with removing # from url in AngularJs

Question

I'm trying to remove the "#" from the url of my personal website.

From

http://frankcalpitojr.com/#/about

To

http://frankcalpitojr.com/about

I tried doing this AngularJS routing without the hash '#'

But what happened is the url turns changes to http://frankcalpitojr.com/#%2Fabout and I tried different methods like setting requirebase to false and adding base to the head of the index file.

Here's my code

app.js

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

AngularTemplateApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl',
        activetab: 'home'
      }).

      when('/page', {
        templateUrl: 'partials/page.html',
        controller: 'PageCtrl',
        activetab: 'page'
      }).

      when('/page/:pageId', {
        templateUrl: 'partials/page-details.html',
        controller: 'PageDetailsCtrl',
        activetab: 'page'
      }).

      when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl',
        activetab: 'about'
      }).

      when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactCtrl',
        activetab: 'contact'
      }).

      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'SampleListCtrl',
        activetab: 'phones'
      }).

      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'SampleDetailCtrl',
        activetab: 'phones'
      }).

      otherwise({
        redirectTo: '/'
      });

      // $locationProvider.html5Mode(true);

      if(window.history && window.history.pushState){
        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });
      }

  }]);

controller.js

var appTest = angular.module('appTest', ['ui.bootstrap.tpls']);

appTest.controller('HomeCtrl', ['$scope', '$http',
  function ($scope, $http) {
    
    $scope.pages = [
      { id:'1', title:'Home', pageRoute:'', activeNav:'home' },
      { id:'2', title:'About', pageRoute:'about', activeNav:'about'},
      { id:'3', title:'Contact', pageRoute:'contact', activeNav:'contact'}
    ];

    $scope.projects = [{"id":1, "name":"Test 1","date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
    {"id":2, "name":"Test 2", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
    {"id":3, "name":"Test 3", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."},
    {"id":4 , "name":"Test 4", "date":"2015-10-22", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim."}];

  }]);

appTest.controller('PageCtrl', ['$scope', '$http',
  function ($scope, $http) {
   
  }]);

appTest.controller('PageDetailsCtrl', ['$scope', '$http',
  function ($scope, $http) {
   
  }]);

appTest.controller('AboutCtrl', ['$scope', '$http',
  function ($scope, $http) {
   
  }]);

appTest.controller('ContactCtrl', ['$scope', '$http',
  function ($scope, $http) {
   
  }]);

appTest.controller('SampleListCtrl', ['$scope', '$http',
  function ($scope, $http) {
   $scope.phones = [
    { 'phoneId': '1',
      'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'phoneId': '2',
      'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'phoneId': '3',
      'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

    $scope.orderProp = 'age';
  }]);

appTest.controller('SampleDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]);

my index.html and menu.html

<!doctype html>
<html lang="en">
<head>
	<title> App Template </title>
	<script src="node_modules/angular/angular.js"></script>
	<script src="node_modules/angular-route/angular-route.js"></script>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
	<!-- <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> -->
	<script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
	<script src="app/js/app.js"></script>
	<script src="app/js/controllers.js"></script>
	<link rel="stylesheet" href="assets/css/main.css"/>

	<!-- <base href="/"> -->

</head>

<body ng-app="AngularTemplateApp">

	<div ng-include src="'partials/menu.html'"></div>

	<div class="view-animate-container">

		<div id="main-view" ng-view class="view-animate">
			

		</div>
		
	</div>

</body>

</html>

<div id="menu">
	<div class="container">
		<div ng-controller="HomeCtrl" class="pull-right">
			<ul class="nav nav-pills">
				<li role="presentation">
					<a href="#/"> Home </a>
				</li>
				<li role="presentation">
					<a href="#/about"> About </a>
				</li>
				<li role="presentation">
					<a href="#/contact"> Contact </a>
				</li>	
			</ul>
		</div>
	</div>
</div>

I'm trying to learn angularjs so i loaded it to my test site to see if it works. You can check it out here Thanks in advance!

Answer 1

You should use

$locationProvider.html5Mode(true)

as you tried but you should also remove the '#' from your anchors in the HTML file so that it should look something like

<div id="menu">
	<div class="container">
		<div ng-controller="HomeCtrl" class="pull-right">
			<ul class="nav nav-pills">
				<li role="presentation">
					<a href="/"> Home </a>
				</li>
				<li role="presentation">
					<a href="/about"> About </a>
				</li>
				<li role="presentation">
					<a href="/contact"> Contact </a>
				</li>	
			</ul>
		</div>
	</div>
</div>
 

Hope this helps.