title: AngularJS and .htaccess redirect
body: <p>I'm using angularJs to build a website.</p>
  
  <p>I have the following folder structure:</p>
  
  <pre><code>/
  --index.html
  --js
    --contoller.js
  --css
    --style.css
  --pages
    --homepage.html
    --faq.html
    --about.html
  </code></pre>
  
  <p>The relevant html on the index page is:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div ng-view&gt;
          &lt;!-- this is where the views are injected --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about/faq"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The routing is:</p>
  
  <pre><code>obApp.config(function($routeProvider, $locationProvider) {
      $routeProvider
      // route for the home page
      .when('/', {
          templateUrl : 'pages/homepage.html',
          controller  : 'homepageController'
      })
      // route for the about page
      .when('/about/faq', {
          templateUrl : 'pages/faq.html',
          controller  : 'faqController'
      })
      // route for the contact page
      .when('/about', {
          templateUrl : 'pages/about.html',
          controller  : 'aboutController'
      })
  })
  </code></pre>
  
  <p>The .htaccess file is:</p>
  
  <pre><code>RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule . index.php [L]
  </code></pre>
  
  <p>Now here's my problem:
  When i access the links everything works perfectly - so it's ok. When i type into the browsers address bar the url <code>/about</code>, it works - ok again. When i do this however <code>/about/faq</code> i get everything to work, but the stylesheets are not loading. I've checked out the network response and it i get the wrong content type on them:</p>
  
  <p><img src="https://i.stack.imgur.com/N4hms.png" alt="response image"></p>
  
  <p>As you can see the external link with the google font is loaded ok, only the local css files are sent with the wrong type.</p>
  
  <p>My links are in the header as follows:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/style.css" &gt;       
  &lt;!-- external font --&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'&gt;
  </code></pre>
  
  <p>That being said, i'm stuck. I am developing this on a local machine and the url is something like this: </p>
  
  <pre><code>localhost/websites/angularProject
  </code></pre>
  
  <p>My guess is that the redirect needs something extra. (??)</p>