HTML5 Mode AngularJS ui.router

Question

Hi I want to use html5 mode. My file structure is as the following:

mypage.de/mysub

I can only mess around in mysub.

So far, I added into my index.html:

<base href="/mysub/">

And created a new (and the only one) .htaccess in /mysub/

RewriteEngine on

# Don't rewrite files or directories

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]

If I use an url: mypage.de/mysub/#/site1 it is transformed into mypage.de/mysub/site1 and loaded

But if I use the transformed url directly, e.g.: mypage.de/mysub/site1 I get a 404

The server is an apache: I looked into that tutorial: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

But I'm not sure what server-name is & if /path/to/app is

or

/mysub/

Also it throws my already an internal server error when I just leave the virtual host & the part within the directory tags.

because the .htaccess is within the directory. I tried diff. varaitions but nothing worked here so I just used the part within Directory as mentioned here: AngularJS: can't get html5 mode urls with ui-route $state

Also doesn't it cut the whole #/sitex part? Wouldn't be s.th. like this better: mysub\/(#\/)?(.*)$ in the regex — Andi Giga

Muhammad Reda Muhammad Reda · Accepted Answer · 2015-03-03T09:54:12

Try this

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
  RewriteBase /mysub/

  # Don't rewrite files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Rewrite everything else to index.html to allow html5 state links
  RewriteRule ^ index.html [L]
</IfModule>

HTML5 Mode AngularJS ui.router

1 Answers