Dean Dean - 5 months ago 15
AngularJS Question

How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

I have the AngularJS seed project and I've added

$locationProvider.html5Mode(true).hashPrefix('!');


to the app.js file. I want to configure IIS 7 to route all requests to

http://localhost/app/index.html


so that this works for me. How do I do this?

Update:

I've just discovered, downloaded and installed the IIS URL Rewrite module, hoping this will make it easy and obvious to achieve my goal.

Update 2:

I guess this sums up what I'm trying to achieve (taken from the AngularJS Developer documentation):


Using this mode requires URL rewriting on server side,
basically you have to rewrite all your links to entry point of your
application (e.g. index.html)


Update 3:

I'm still working on this and I realise I need to NOT redirect (have rules that rewrite) certain URLs such as

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html


so anything that is in the css, js, lib or partials directories isn't redirected. Everything else will need to be redirected to app/index.html

Anyone know how to achieve this easily without having to add a rule for every single file?

Update 4:

I have 2 inbound rules defined in the IIS URL Rewrite module. The first rule is:

IIS URL Rewrite Inbound Rule 1

The second rule is:

IIS URL Rewrite Inbound Rule 2

Now when I navigate to localhost/app/view1 it loads the page, however the supporting files (the ones in the css, js, lib and partials directories) are also being rewritten to the app/index.html page - so everything is coming back as the index.html page no matter what URL is used. I guess this means my first rule, that is supposed to prevent these URLs from being processed by the second rule, isn't working.. any ideas? ...anyone? ...I feel so alone... :-(

Answer

The IIS inbound rules as shown in the question DO work. I had to clear the browser cache and add the following line in the top of my <head> section of the index.html page:

<base href="/myApplication/app/" />

This is because I have more than one application in localhost and so requests to other partials were being taken to localhost/app/view1 instead of localhost/myApplication/app/view1

Hopefully this helps someone!