Angularjs – How to configure IIS for URL Rewriting an AngularJS application in HTML5 mode

angularjsiisurl-rewriting

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… 🙁

Best Answer

I write out a rule in web.config after $locationProvider.html5Mode(true) is set in app.js.

Hope, helps someone out.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

In my index.html I added this to <head>

<base href="/">

Don't forget to install IIS URL Rewrite on server.

Also if you use Web API and IIS, this will work if your API is at www.yourdomain.com/api because of the third input (third line of condition).

UPDATE: Check out AngularUI's new project to address this problem

For subsections it's as easy as leveraging strings in ng-include:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

Or you can create an object in case you have links to sub pages all over the place:

$scope.pages = { page1: 'section1/subpage1.htm', ... };

<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

Or you can even use $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;

<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

You can also put an ng-controller at the top-most level of each partial

Angularjs – Configure IIS URL Rewrite module for AngularJS HTML5Mode Still Not Working

Install this extension: https://www.iis.net/downloads/microsoft/url-rewrite

And add this to web.config under system.webServer

<rewrite>
  <rules>
    <clear />        
    <rule name="Html5Mode" enabled="true" stopProcessing="true">
      <match url="^(.+)$" negate="true" />
      <conditions>
        <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
    </rule>
    <rule name="AngularJS" enabled="true" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" />
    </rule>        
  </rules>
</rewrite>

Here is the full web.config including serving static files.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <clear />        
            <rule name="Html5Mode" enabled="true" stopProcessing="true">
              <match url="^(.+)$" negate="true" />
              <conditions>
                <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
            </rule>
            <rule name="AngularJS" enabled="true" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" />
            </rule>        
          </rules>
        </rewrite>
        <handlers>
           <clear />
            <add 
                name="StaticFile" 
                path="*" verb="*" 
                modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" 
                resourceType="Either" 
                requireAccess="Read" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
        </staticContent>
    </system.webServer>
</configuration>

Best Answer

Related Solutions

Javascript – Complex nesting of partials and templates

UPDATE: Check out AngularUI's new project to address this problem

Angularjs – Configure IIS URL Rewrite module for AngularJS HTML5Mode Still Not Working

Related Topic