I am currently having trouble with AngularJS html5Mode. I am working on a blog site that is hosted on my localhost WAMP server. I have a base URL defined in my index.html file and I have html5Mode set to true in the config section in my app.js file and I also have a .htaccess file in my directory.
This is what my url looks like without html5 mode enabled. http://localhost/Blog/index.html/#posts
If I load my site like this: localhost/Blog/ or localhost/Blog/index.html it will redirct to localhost/Blog/posts which is what I want.
But if I try to type this url manually or refresh the page it goes to localhost/dashboard and If I click on one of the other links it will go to localhost/nameOfLink
I am not 100% sure but I think the problem could be in the .htaccess file
This is my index.html file
<!DOCTYPE html>
<html lang="en" ng-app="blog" class="no-js" ng-cloak>
<head>
<base href="/Blog/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#29B6F6">
<meta name="msapplication-navbutton-color" content="#29B6F6">
<meta name="apple-mobile-web-app-status-bar-style" content="#29B6F6">
<title>Phone reviews</title>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
<link rel='stylesheet' id='primary-font-css' href='http://fonts.googleapis.com/css?family=Karla:300,400,500,700' type='text/css' media='all' />
<link rel="stylesheet" href="http://blackrockdigital.github.io/startbootstrap-sb-admin/font-awesome/css/font-awesome.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav0">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="login.html" class="navbar-brand">Phone Reviews</a>
</div>
<div class="collapse navbar-collapse" id="nav0" ng-controller="NavCtrl">
<ul class="nav navbar-nav navbar-right">
<li ng-click="scroll()" ng-class="{ active: isActive('/posts')}"><a href="#/posts">Home</a></li>
<li ng-click="scroll()" ng-class="{ active: isActive('/contact')}"><a href="#/contact">Contact Us</a></li>
<li ng-click="scroll()" ng-class="{ active: isActive('/registration')}"><a href="#/registration">Register</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">My Account <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" ng-init="userInit(<?php echo $_SESSION['name'] $_SESSION['role']; ?>)">
<li><a href="#">{{user}}</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Favourites</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<header class="header">
<h1>Phone Reviews</h1>
</header>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>You have successfully registered! Go to your email to confirm account.</p>
</div>
<div class="social-icons">
<ul>
<li><a href="#" class="icon facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icon instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="#" class="icon youtube"><i class="fa fa-youtube"></i></a></li>
<li><a href="#" class="icon twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icon pinterest"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="container-fluid" id="wrapper">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 content"><div ng-view></div></div>
<div ng-include="'includes/sidebar.html'"></div>
</div>
<div ng-include="'includes/footer.html'"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-sanitize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="ui-bootstrap.js"></script>
<script src="page.js"></script>
<script src="app.js"></script>
</body>
</html>
This is my app.js file
var app = angular.module('blog', ['ngRoute', 'ngSanitize', 'ui.bootstrap.tpls', 'angularUtils.directives.dirPagination'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/posts', { templateUrl: 'includes/main.html', controller: 'MainCtrl' }).
when('/posts/:postUrl', { templateUrl: 'includes/post.html', controller: 'PostCtrl' }).
when('/contact', { templateUrl: 'includes/contact.html', controller: 'ContactCtrl' }).
when('/registration', { templateUrl: 'includes/register.html', controller: 'RegistrationCtrl'}).
otherwise({redirectTo: '/posts'});
}]);
This is my .htaccess file
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
