angularjs 路由在专有浏览器中不起作用
angularjs routing not working in proprietary browser
首先,我要说你将无法重现我的问题,除非你也在使用最新的 athenaPractice EMR 从事医疗保健工作。
我只是不知道在哪里解决这个问题,也不知道应该检查哪些信息或设置的建议。
我有一个 AngularJS SPA 设置,在常规 Chrome 浏览器 window 本地服务(http-server 通过 npm 安装)中路由 100% 正常。我可以通过 URL(localhost:port/app
,重定向到 /app/#!
)加载主应用程序页面,我可以通过 URL(localhost:port/app/#!/page
)加载子页面。我可以在有或没有尾随 /
的情况下做到这一点。我可以通过页面上的链接从一个视图导航到另一个视图。效果很好。
但是当我把它放在服务器位置(如果相关,路径比 //localserver/
root 的 /app/ 长),并通过 EMR 加载文件时,我遇到了问题(即 运行 Chromium)。 (通过添加一个特殊格式的文件将文件加载到 EMR 中,该文件以一种形式链接所有包含的项目,在 HTML 文件的情况下,只是一个 URL 到资源://localserver/directory/subdirectory/app/#!/page
).它第一次加载很好,但如果我尝试单独加载不同的页面(例如 //localserver/directory/subdirectory/app/#!/
),它会显示当前打开的页面。这几乎就像浏览器的两个实例都是同一个浏览器 window 并且它不会为具有相同地址的 URL 加载一个新的 window 到 #!
].我可以通过链接从一个页面导航到另一个页面,但不能通过从根地址加载,如果我在一个“表单”下导航,然后单击回到另一个,它也被导航,因此我认为它只是一个实例window.
我尝试了 HTML5 路由但没有成功,因为这是 JBoss 7.x 服务器中的 运行 我很难找到任何文档甚至接近匹配我在服务器上看到的 URL 重写访问的文件。 (我发现说明中引用的文件在我们的安装中是不存在的,所以我不知道这是应用程序提供商自定义的还是什么。)
我无法通过 EMR 访问开发者工具、控制台甚至地址栏。
关于如何解决此问题有什么建议吗?
编辑添加:可能值得注意的是,我已经尝试过 ngRoute 和 ui-router,结果相同。
我让这个工作正常。我不知道 EMR 中的根本原因是什么,但它使用 #!
路由将 SPA 的每个加载路由视为同一实例的一部分。让 HTML5 路由工作解决了这个问题。
在与 Undertow 战斗了一天并且没有关于为什么我的规则不起作用的反馈之后,我最终使用了 Tuckey's URL Rewrite。它有助于记录它正在比较的输入与允许我查看我第一次尝试规则的地方出错的输入,并相应地编辑它们直到它们起作用。
这需要在应用程序 .war
目录内的 WEB-INF
目录中更改三个文件。 (此设置中有各种 META-INF 和 WEB-INF 目录,但在我现在正在使用的特定部署中使用这个目录,即我们的演示服务器。)
在WEB-INF
里面新建一个/lib
目录,把urlrewritefilter-4.0.4.jar
放进去(从the Maven repository下载)
将示例 urlrewrite.xml
放入 WEB-INF
并根据必要的规则进行调整。对于我们 SPA 的根页面和第一个路由,我插入的自定义规则如下所示:
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/route1/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
- 将 Tuckey 重写过滤器添加到
web.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>
<init-param>
<!-- This configures how often to check for an update to urlrewrite.xml -->
<param-name>confReloadCheckInterval</param-name>
<param-value>60</param-value>
</init-param>
<init-param>
<!-- This configures what detail level of messages to log. TRACE was useful to
figure things out but DEBUG or WARN is probably more appropriate for production -->
<param-name>logLevel</param-name>
<param-value>TRACE</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
最后,我必须更新 SPA 的 index.html
以包含基本标记, 在 所有样式表链接和 javascript 脚本包含之前,以便他们路由正确。对于演示服务器,我的看起来像 <base href="/demo/ws/FormsFolder/subfolder/app/">
但必须更新才能发布到实时服务器。
如果其他人试图在类似的 JBoss 服务器上配置 HTML5 路由,希望这对您有所帮助。
首先,我要说你将无法重现我的问题,除非你也在使用最新的 athenaPractice EMR 从事医疗保健工作。
我只是不知道在哪里解决这个问题,也不知道应该检查哪些信息或设置的建议。
我有一个 AngularJS SPA 设置,在常规 Chrome 浏览器 window 本地服务(http-server 通过 npm 安装)中路由 100% 正常。我可以通过 URL(localhost:port/app
,重定向到 /app/#!
)加载主应用程序页面,我可以通过 URL(localhost:port/app/#!/page
)加载子页面。我可以在有或没有尾随 /
的情况下做到这一点。我可以通过页面上的链接从一个视图导航到另一个视图。效果很好。
但是当我把它放在服务器位置(如果相关,路径比 //localserver/
root 的 /app/ 长),并通过 EMR 加载文件时,我遇到了问题(即 运行 Chromium)。 (通过添加一个特殊格式的文件将文件加载到 EMR 中,该文件以一种形式链接所有包含的项目,在 HTML 文件的情况下,只是一个 URL 到资源://localserver/directory/subdirectory/app/#!/page
).它第一次加载很好,但如果我尝试单独加载不同的页面(例如 //localserver/directory/subdirectory/app/#!/
),它会显示当前打开的页面。这几乎就像浏览器的两个实例都是同一个浏览器 window 并且它不会为具有相同地址的 URL 加载一个新的 window 到 #!
].我可以通过链接从一个页面导航到另一个页面,但不能通过从根地址加载,如果我在一个“表单”下导航,然后单击回到另一个,它也被导航,因此我认为它只是一个实例window.
我尝试了 HTML5 路由但没有成功,因为这是 JBoss 7.x 服务器中的 运行 我很难找到任何文档甚至接近匹配我在服务器上看到的 URL 重写访问的文件。 (我发现说明中引用的文件在我们的安装中是不存在的,所以我不知道这是应用程序提供商自定义的还是什么。)
我无法通过 EMR 访问开发者工具、控制台甚至地址栏。
关于如何解决此问题有什么建议吗?
编辑添加:可能值得注意的是,我已经尝试过 ngRoute 和 ui-router,结果相同。
我让这个工作正常。我不知道 EMR 中的根本原因是什么,但它使用 #!
路由将 SPA 的每个加载路由视为同一实例的一部分。让 HTML5 路由工作解决了这个问题。
在与 Undertow 战斗了一天并且没有关于为什么我的规则不起作用的反馈之后,我最终使用了 Tuckey's URL Rewrite。它有助于记录它正在比较的输入与允许我查看我第一次尝试规则的地方出错的输入,并相应地编辑它们直到它们起作用。
这需要在应用程序 .war
目录内的 WEB-INF
目录中更改三个文件。 (此设置中有各种 META-INF 和 WEB-INF 目录,但在我现在正在使用的特定部署中使用这个目录,即我们的演示服务器。)
在
WEB-INF
里面新建一个/lib
目录,把urlrewritefilter-4.0.4.jar
放进去(从the Maven repository下载)将示例
urlrewrite.xml
放入WEB-INF
并根据必要的规则进行调整。对于我们 SPA 的根页面和第一个路由,我插入的自定义规则如下所示:
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/route1/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
- 将 Tuckey 重写过滤器添加到
web.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>
<init-param>
<!-- This configures how often to check for an update to urlrewrite.xml -->
<param-name>confReloadCheckInterval</param-name>
<param-value>60</param-value>
</init-param>
<init-param>
<!-- This configures what detail level of messages to log. TRACE was useful to
figure things out but DEBUG or WARN is probably more appropriate for production -->
<param-name>logLevel</param-name>
<param-value>TRACE</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
最后,我必须更新 SPA 的 index.html
以包含基本标记, 在 所有样式表链接和 javascript 脚本包含之前,以便他们路由正确。对于演示服务器,我的看起来像 <base href="/demo/ws/FormsFolder/subfolder/app/">
但必须更新才能发布到实时服务器。
如果其他人试图在类似的 JBoss 服务器上配置 HTML5 路由,希望这对您有所帮助。