title: AngularJS routing issue with apache
body: <p>I am using Yeoman package manager to create an angular web application. this is my main controller:</p>
  
  <pre><code>    '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);
    });
  </code></pre>
  
  <p>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. </p>
  
  <h1>Things I have tried</h1>
  
  <p><a href="https://stackoverflow.com/questions/15385659/apache-rewrite-rules-not-being-applied-for-angularjs">Apache rewrite rules not being applied for angularjs</a></p>
  
  <p><a href="https://groups.google.com/forum/#!msg/angular/GmNiNVyvonk/mmffPbIcnRoJ" rel="nofollow noreferrer">https://groups.google.com/forum/#!msg/angular/GmNiNVyvonk/mmffPbIcnRoJ</a></p>
  
  <p>my .htaccess for apache web server:</p>
  
  <pre><code>    # BEGIN angularJS
  &lt;IfModule mod_rewrite.c&gt;
      RewriteEngine On
      RewriteBase /
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule ^(.*)       /index.html/#/$1 
  &lt;/IfModule&gt;
  # END angularJS
  </code></pre>