AngularJS and .htaccess redirect

Question

I'm using angularJs to build a website.

I have the following folder structure:

/
--index.html
--js
  --contoller.js
--css
  --style.css
--pages
  --homepage.html
  --faq.html
  --about.html

The relevant html on the index page is:

<div id="app">
    <div ng-view>
        <!-- this is where the views are injected -->
    </div>
</div>
<li><a href="about">About</a></li>
<li><a href="about/faq">FAQ</a></li>

The routing is:

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'
    })
})

The .htaccess file is:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.php [L]

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 /about, it works - ok again. When i do this however /about/faq 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:

response image

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.

My links are in the header as follows:

<link rel="stylesheet" type="text/css" href="css/style.css" >       
<!-- external font -->
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>

That being said, i'm stuck. I am developing this on a local machine and the url is something like this:

localhost/websites/angularProject

My guess is that the redirect needs something extra. (??)

Justin Iurman · Accepted Answer · 2014-08-26 15:46:06Z

2

Use absolute paths instead.

Your links

<link rel="stylesheet" type="text/css" href="/websites/angularProject/css/style.css" >

Do the same for your js and images links.

index.html

<div id="app">
    <div ng-view>
        <!-- this is where the views are injected -->
    </div>
</div>
<li><a href="/websites/angularProject/about">About</a></li>
<li><a href="/websites/angularProject/about/faq">FAQ</a></li>

For your links, you could also use <base href="/websites/angularProject/" /> html tag instead of replacing all links.

htaccess

RewriteEngine On
RewriteBase /websites/angularProject/

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.php [L]

edited Aug 26, 2014 at 15:46

answered Aug 26, 2014 at 15:24

Justin Iurman

19k3 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Radu Andrei Over a year ago

I'm developing this on localhost, where i have more than one website. My url on localhost is something like this "localhost/websites/angularProject". Your solution does not help me out of the binding i'm in. However i may not have been specific enough. Edited my post to reflect that.

Justin Iurman Over a year ago

That's not a problem, i edited my answer to make it work like you want

Radu Andrei Over a year ago

You are the man! Thank you very much - though the <a> need no modification. I think i need to catch up on apache mod_rewrite.

Justin Iurman Over a year ago

Do you have an example ?

mirzak Over a year ago

This helped me so much. Been looking ages for this.

|

Collectives™ on Stack Overflow

AngularJS and .htaccess redirect

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related