angularjs - primeros - No se puede obtener Angular html5mode y UrlRewriteFilter trabajando con ciertas URL

google maps angular 6

Question

Estoy usando una aplicación web AngularJS 1.3 con una API REST de Java / Jersey. Finalmente conseguí html5mode trabajando con Tuckey UrlRewriteFilter para que algo simple como localhost: 8080 / # / page ahora sea solo localhost: 8080 / page . Pero, parece que no puedo obtener algo más complejo como localhost: 8080 / mypage / category / subcategory / item funciona correctamente. Esta url se cargará en html5mode cuando esté en una sola pestaña del navegador, pero si abro el enlace en una nueva pestaña, obtengo un 404.

Aquí están mis archivos pom y web.xml:

pom.xml

<filter>
<filter-name>UrlRewriteFilter</filter-name>
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
<init-param>
<param-name>confPath</param-name>
<param-value>/WEB-INF/urlrewrite.xml</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>

web.xml:

<urlrewrite>
<rule match-type="wildcard">
<from>*/page</from>
<to>index.html</to>
</rule>
// what should this rule look like in order to recognize a url like:
// localhost:8080/mypage/category/subcategory/item
<rule match-type="wildcard">
<from>?</from>
<to>index.html</to>
</rule>
</urlrewrite>

Leí aquí la documentación de UrlRewriteFilter e intenté usar diferentes variaciones de la sintaxis de coincidencia y regex de comodines, pero siempre termino obteniendo un 404.

También agregaré que estoy usando la versión 0.2.13 de angular-ui-router y mi url para la página / estado en cuestión se parece a / mypage /: category /: subcategory /: item .

Entonces mi pregunta es ¿cómo puedo unir este patrón para que el redireccionamiento a index.html funcione correctamente para html5mode o debo configurar el enrutamiento de manera diferente para que funcione mejor con UrlRewriteFilter?

Answer 1

Aquí es lo que terminé usando

<urlrewrite>
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-filename" operator="notdir" />
<condition type="request-uri" operator="notequal">(/.html|/.js)</condition>
<from>^/html/(.*rootpage1.*|.*rootpage2.*)$</from>
<to last="true">/html/index.html</to>
</rule>

Como mi aplicación usa <base href="/myapp/html/">

También tuve que cambiar las referencias en mi index.html de relativo a href="/myapp/html/otherpage.html" porque, por ejemplo, cuando se usan referencias relativas en / myapp / html / rootpage1 / page1 / something y la reescritura pasa la url a index.html, está en rootpage1 / scope, en lugar de html / scope.

Answer 2

Tenga paciencia conmigo ya que soy un desarrollador de ASP.NET MVC5 y Web API 2. Creo que nos desarrollamos en diferentes idiomas, pero he resuelto este problema en el proyecto MVC5 que mi compañía está utilizando. Creo que necesitas crear 2 páginas separadas para cada página que estás haciendo. Uno para la página de aterrizaje parcial y otra para la principal. El elemento angular será utilizado por AngularJS en la configuración de la ruta y la página principal de destino debe apuntar a la misma URL que su ruta. Entonces, si tiene "/ página", debe apuntar a "parcial / página" en la configuración de ruta y otra página completa en el proyecto apuntando a / página como lo haría con un sitio web tradicional y no debería contener ningún contenido, PERO señale el mismo diseño que está utilizando en todas sus páginas. De esta forma, en cualquier página que aterrice, AngularJS seguirá cargándose y se encargará de la ruta.