Angularjs ui-router- 404 not found on refreshing page

I have 3 pages: index (parent page), home and signup. I made one controller signup controller have one function signup to print in the console the user came from the form input. When I remove the route from the URL to be like this "localhost/angular-project/" the links work until I refresh it gives me status code 404 not found. I don't know why? Here's my code

index.html

    <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <base href="/angular-project/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Vogator</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a ui-sref="home">Home <span class="sr-only">(current)</span></a></li>
                    <li><a ui-sref="signup">Signup</a></li>
                </ul>
            </div>
        </div>  
    </nav>

    <div ui-view></div>

    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="js/app.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/controllers.js"></script>
</body>
</html>

home.html

<h1>Welcome</h1>

signup.html

    <h1>Signup</h1>

<form class="form-horizontal" novalidate name="signupForm" ng-submit="submitted=true;signup()">

    <input type="text" name="name" ng-model="user.name" required class="form-control" placeholder="Enter your name">
    <p ng-if="signupForm.name.$error.required && submitted">Please enter your name</p>

    <input type="text" name="email" ng-model="user.email" required class="form-control" placeholder=" Enter your email">
    <p ng-if="signupForm.email.$error.required && submitted">Please enter your email</p>
    <p ng-if="signupForm.email.$error.email && submitted">Please enter valid email</p>

    <input type="text" name="mobile" ng-model="user.mobile" required class="form-control" placeholder="Enter your mobile">
    <p ng-if="signupForm.mobile.$error.required && submitted">Please enter your mobile</p>

    <input type="password" name="password" ng-model="user.password" required class="form-control" placeholder="Enter your password">
    <p ng-if="signupForm.password.$error.required && submitted">Please enter your password</p>

    <button name="button">Signup</button>
</form>

app.js

'use strict';
angular.module('myApp', ['ui.router'])

controller.js

    angular.module("myApp").controller("signupController", function($scope){
    $scope.signup = function(){
        console.log($scope.user);
    }
})

routes.js

    angular.module("myApp")
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url: '/home',
        templateUrl: 'templates/home.html'
    })
    .state('signup',{
        url:'/signup',
        templateUrl: 'templates/signup.html',
        controller: 'signupController'
    });

    $locationProvider.html5Mode(true);
})

Solution

I got what I'm missing here, I changed AllowOverride from none to all in the httpd.conf file located in "wamp/bin/apache/apache2.4.23/conf", and I created .htaccess in the project root folder and I put this code inside it and voila

    <IfModule mod_rewrite.c>
    Options +FollowSymlinks
    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]
</IfModule>

code refrence: .htaccess, #AngularJS, UI-Router: Configure Apache server to work with html5Mode