I am using Yeoman package manager to create an angular web application. this is my main controller:

    'use strict';

angular
  .module('resFourApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',


  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })

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

      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl'
      })
      .otherwise({ redirectTo: '/' });

      // use the HTML5 History API
  // use the HTML5 History API
    $locationProvider.html5Mode(true);
  });

which works fine if I access the app from the base directory but if I access it from the url and go to www.base.com/route I get a 404 error. Which I understand is because Angular is a client side app so there is nothing on the server to handle these requests. I have read a lot online about having to reroute with server or mod rewrites with apache, but I still have not gotten it working.

Things I have tried

Apache rewrite rules not being applied for angularjs

https://groups.google.com/forum/#!msg/angular/GmNiNVyvonk/mmffPbIcnRoJ

my .htaccess for apache web server:

    # BEGIN angularJS
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)       /index.html/#/$1 
</IfModule>
# END angularJS