AngularJS de link direto no Windows Azure IIS

Para fazer deep linking adequado em um aplicativo AngularJS de página única, você precisa habilitar o modo HTML5 em seu roteador, independentemente de usar o roteador ui ou o roteador padrão.

Para fazer o modo HTML5 funcionar dentro do AngularJS, ou seja, ter rotas em seu aplicativo que não dependem de um hash ‘#’ para evitar solicitações do servidor, você precisa da lógica do lado do servidor para redirecionar todas as solicitações de rota específicas do aplicativo de volta para seu aplicativo Angular.

Se você estiver familiarizado com as regras .htaccess para Apache, os Sites do Azure usam o mesmo conceito, apenas uma sintaxe diferente, um arquivo xml formatado não documentado chamado web.config que funciona de maneira semelhante.

Aqui está o código de configuração da web que você deve adicionar ao seu arquivo de configuração da web:

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

Observe que você já pode ter um arquivo de configuração da web com os blocos <configuration> e <system.webServer>, então apenas coloque os blocos <rewrite> dentro dele.

Este exemplo de regra pegará qualquer url de entrada e determinará se ele direciona para um arquivo no sistema ou diretório no sistema. Se for um arquivo ou diretório existente, ele permitirá o acesso a esse arquivo ou diretório. No entanto, se o url referenciar um arquivo ou diretório que não existe, o servidor retornará o caminho raiz para a solicitação, que mapeará para seu index.html onde seu aplicativo Angular é executado e o Angular tratará da rota e renderizará as visualizações como você os configurou.

Sucesso.

Para obter muito mais informações sobre regras de reescrita de configuração da web, há apenas uma boa fonte para isso se você, como eu, estiver codificando este arquivo webconfig em um editor de texto, em vez de gerá-lo automaticamente a partir de algo como o Visual Studio. Documentação oficial da Microsoft