Deep Linking AngularJS on Windows Azure IIS

To do proper deep linking in a single page AngularJS application you need to enable HTML5 mode in your router whether you use ui router or the default router.

To get HTML5 Mode to work within AngularJS, that is to have routes in your app that do not rely on a hash '#' to prevent server requests, you need server side logic to redirect all app specific route requests back to your Angular App.

If you are familiar with .htaccess rules for Apache, Azure Websites use the same concept only a different syntax, a rather undocumented xml formatted file called web.config that works in a similar manner.

Here is the web config code you have to add into your web config file:

<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="Main Rule" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Note you may already have a web config file with <configuration> and <system.webServer> blocks so just place the <rewrite> blocks inside of that.

This sample rule will take any incoming url and determine if it routes to a file on the system or directory on the system. If it is a file or directory that does exist, it will allow it to access that file or directory. However, if the url references a file or directory that does not exist, the server will return the root path to the request, which will map to your index.html where your Angular app runs and Angular will handle the route and render the views as you have them configured.

Success.

For a lot more info on web config rewrite rules, there is only one good source for this if you, like me, are hard coding this webconfig file in a text editor rather than automatically generating it from something like Visual Studio. Official Microsoft Documentation