title: Use HTTPD's mod_rewrite and AngularJS RouteProvider with Parameters
body: <p>I am trying to use HTTPD's mod_rewrite and AngularJS's routeProvider to allow users to access a webpage with a clean URL that will change its content based on some parameters in the URL.</p>
  
  <p>For example, let's say there are profile pages for JohnSmith and JaneDoe. I want them to be able to access their pages via URL, like so: </p>
  
  <pre><code>http://my.example.com/JohnSmith
  </code></pre>
  
  <p>I want the AngularJS code to be able to grab the name "JohnSmith" from the URL, and use that for the REST call thusly: </p>
  
  <pre><code>$http.get('http://my.example.com/profile/name/' + $routeParams.profile)
  </code></pre>
  
  <p>So far, I have managed to get AngularJS to grab the correct profile IF the URL is formatted like one of the following: </p>
  
  <pre><code>http://my.example.com/#/JohnSmith
  http://my.example.com/index.html#/JohnSmith
  </code></pre>
  
  <p>Here is the relevant code thus far: </p>
  
  <p>index.html:</p>
  
  <pre><code>    &lt;html ng-app="profile"&gt;
      &lt;head&gt;
          &lt;title&gt;Profile&lt;/title&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;
          &lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"&gt;&lt;/script&gt;
          &lt;link rel='stylesheet' href='style/style-main.css' type='text/css' /&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;ng-view&gt;&lt;/ng-view&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>(function() {
  var app = angular.module('profile', ['ngRoute']);
  
  app.config(function($routeProvider) {
      $routeProvider.when("/:profile",
      {
          templateUrl: "profile.html",
          controller:"ProfileController",
          controllerAs: "profile"
      });
  
  });
  
  app.controller("ProfileController", [ '$http', '$routeParams', function($http, $routeParams) {
      var SELF = this;
      SELF.profile = $routeParams.profile;
      console.log(SELF.profile);
  }) ();
  </code></pre>
  
  <p>Using a clean URL like this: </p>
  
  <pre><code>http://my.example.com/JohnSmith
  </code></pre>
  
  <p>...will return a 404. </p>
  
  <p>So I'm trying to use Apache's mod_rewrite to change the URL into a form that AngularJS can understand and extract the 'JohnSmith' parameter from.</p>
  
  <p>I've got the following RewriteRule in place on my Apache node: </p>
  
  <pre><code>RewriteRule "(^[^\/#\.]+$)" "#/$1"
  </code></pre>
  
  <p>I've checked it out, and I know that this RewriteRule should trigger on any URL that doesn't contain any extra slashes, pound signs, or periods. Therefore, it should rewrite a URL like this: </p>
  
  <pre><code>http://my.example.com/JohnSmith
  </code></pre>
  
  <p>to this: </p>
  
  <pre><code>http://my.example.com/#/JohnSmith
  </code></pre>
  
  <p>That's a form that I know AngularJS can serve content for correctly, so after Apache rewrites the URL into that form, it should work, right? </p>
  
  <p>Well, with that RewriteRule in place, trying to access the clean URL no longer results in a 404. In fact, if I right-click and select 'View Source', I can see that my browser has definitely attempted to load the HTML page. It looks like the routeProvider is no longer picking up the parameter from the URL, however. </p>
  
  <p>How can I resolve this issue so the HTTPD RewriteRule and AngularJS routeProvider work together to provide the correct content using the clean URL? </p>