¿Cómo configuro IIS para reescribir URL una aplicación AngularJS en modo HTML5?

Tengo el proyecto de semillas AngularJS y he agregado

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

al archivo app.js. Quiero configurar IIS 7 para enrutar todas las solicitudes a

 http://localhost/app/index.html 

para que esto funcione para mí ¿Cómo hago esto?

Actualizar:

Acabo de descubrir, descargar e instalar el módulo Reescribir URL de IIS , con la esperanza de que esto sea fácil y obvio para lograr mi objective.

Actualización 2 :

Supongo que esto resume lo que estoy tratando de lograr (tomado de la documentación de AngularJS Developer ):

El uso de este modo requiere la reescritura de URL en el lado del servidor, básicamente tiene que volver a escribir todos sus enlaces al punto de entrada de su aplicación (por ejemplo, index.html)

Actualización 3:

Todavía estoy trabajando en esto y me doy cuenta de que NO debo redirigir (tienen reglas que reescriben) ciertas URL como

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

entonces, cualquier cosa que esté en los directorios css, js, lib o parciales no se redirecciona. Todo lo demás tendrá que ser redirigido a la aplicación / index.html

¿Alguien sabe cómo lograr esto fácilmente sin tener que agregar una regla para cada archivo?

Actualización 4:

Tengo 2 reglas de entrada definidas en el módulo Reescribir URL de IIS. La primera regla es:

IIS URL Reescribir la regla de entrada 1

La segunda regla es:

IIS URL Reescribir la regla de entrada 2

Ahora cuando navego a localhost / app / view1 carga la página, sin embargo, los archivos de apoyo (los de los directorios css, js, lib y parciales) también se reescriben en la página app / index.html, así que todo está por venir volver como la página index.html sin importar qué URL se usa. Supongo que esto significa que mi primera regla, que se supone que evita que estas URL sean procesadas por la segunda regla, no funciona … ¿Alguna idea? …¿nadie? …Me siento tan sola… 🙁

Escribo una regla en web.config después de que $locationProvider.html5Mode(true) se establece en app.js

Hope, ayuda a alguien.

                 

En mi index.html agregué esto a

  

No olvide instalar IIS URL Rewrite en el servidor.

Además, si utiliza API web e IIS, esto funcionará si su API se encuentra en www.yourdomain.com/api debido a la tercera entrada (tercera línea de condición).

Las reglas de entrada de IIS como se muestra en la pregunta SI funcionan. Tuve que borrar el caché del navegador y agregar la siguiente línea en la parte superior de mi sección de la página index.html:

  

Esto se debe a que tengo más de una aplicación en el servidor local y las solicitudes a otros parciales se estaban llevando a localhost/app/view1 lugar de localhost/myApplication/app/view1

¡Espero que esto ayude a alguien!

En mi caso, seguí obteniendo un 403.14 después de haber configurado las reglas de reescritura correctas. Resultó que tenía un directorio que tenía el mismo nombre que una de mis rutas URL. Una vez que eliminé la regla de reescritura de IsDirectory mis rutas funcionaron correctamente. ¿Hay algún caso en el que eliminar la negación del directorio pueda causar problemas? No puedo pensar en ninguno en mi caso. El único caso en el que puedo pensar es si puedes navegar por un directorio con tu aplicación.

        

El problema con solo tener estas dos condiciones:

    

es que solo funcionan mientras el {REQUEST_FILENAME} exista físicamente en el disco . Esto significa que puede haber escenarios en los que una solicitud de una vista parcial con un nombre incorrecto devuelva la página raíz en lugar de la 404, lo que provocaría que el angular se cargue dos veces (y en ciertos escenarios puede provocar un desagradable bucle infinito).

Por lo tanto, se recomendarían algunas reglas seguras de “recuperación” para evitar estos problemas difíciles de solucionar:

     

o una condición que coincida con cualquier finalización de archivo :

     

La forma más fácil que encontré es simplemente redirigir las solicitudes que activan 404 al cliente. Esto se hace agregando un hashtag incluso cuando se establece $locationProvider.html5Mode(true) .

Este truco funciona para entornos con más aplicaciones web en el mismo sitio web y que requieren restricciones de integridad de URL (por ejemplo, autenticación externa). Aquí hay paso a paso cómo hacerlo

index.html

Establezca el elemento adecuadamente

  

web.config

Primero, redirija 404 a una página personalizada, por ejemplo, “Inicio / Error”

      

Controlador casero

Implemente un simple ActionResult para “traducir” la entrada en una ruta del lado del cliente.

 public ActionResult Error(string aspxerrorpath) { return this.Redirect("~/#/" + aspxerrorpath); } 

Esta es la forma más simple.


Es posible (¿es aconsejable?) Mejorar la función de Error con alguna lógica mejorada para redirigir 404 al cliente solo cuando la URL es válida y dejar que el 404 se active normalmente cuando no se encuentre nada en el cliente. Digamos que tienes estas rutas angulares

 .when("/", { templateUrl: "Base/Home", controller: "controllerHome" }) .when("/New", { templateUrl: "Base/New", controller: "controllerNew" }) .when("/Show/:title", { templateUrl: "Base/Show", controller: "controllerShow" }) 

Tiene sentido redirigir la URL al cliente solo cuando comienza con “/ Nuevo” o “/ Mostrar /”

 public ActionResult Error(string aspxerrorpath) { // get clientside route path string clientPath = aspxerrorpath.Substring(Request.ApplicationPath.Length); // create a set of valid clientside path string[] validPaths = { "/New", "/Show/" }; // check if clientPath is valid and redirect properly foreach (string validPath in validPaths) { if (clientPath.StartsWith(validPath)) { return this.Redirect("~/#/" + clientPath); } } return new HttpNotFoundResult(); } 

Esto es solo un ejemplo de lógica mejorada, por supuesto, cada aplicación web tiene diferentes necesidades