AngularJS 1.6.9中ngRoute路由配置异常问题求助

嘿，我看了你遇到的两个路由问题，根源都和html5Mode配置以及服务器端的路由重写规则有关，咱们一步步拆解解决：

第一个问题：访问http://localhost:8080/test/rafael返回404 #

你开启了html5Mode(true)，这会让AngularJS尝试去掉URL里的#，但这里有个关键前提：服务器必须把所有路由请求都转发到你的index.html。现在你直接访问/test/rafael，服务器会以为这是一个真实的文件路径，但你的项目里根本没有这个物理文件，所以自然返回404（你的错误提示JBWEB000065是JBoss/Tomcat的标准404错误）。

服务器端配置（针对JBoss/Tomcat） #

你需要给服务器加一个URL重写规则，把所有非静态资源的请求都转到index.html。这里给你一个简单的实现方式：

1. 先引入UrlRewriteFilter依赖（如果用Maven，在pom.xml中添加对应依赖）
2. 在WEB-INF/web.xml里配置过滤器：

<filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

3. 在项目根目录创建urlrewrite.xml，编写重写规则：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN"
        "http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">
<urlrewrite>
    <rule>
        <note>把所有非静态资源、非index.html的请求转发到index.html</note>
        <condition type="request-uri" operator="not equal">^/(css|js|images|lib)/.*$</condition>
        <condition type="request-uri" operator="not equal">^/index.html$</condition>
        <from>^/(.*)$</from>
        <to type="forward">/index.html</to>
    </rule>
</urlrewrite>

这样服务器就会把路由请求交给AngularJS处理，不会再返回404了。

第二个问题：访问http://localhost:8080/#/test/rafael地址变成#!#%2Ftest%2Frafael且页面空白 #

这个问题是因为你同时开启了html5Mode(true)和hashPrefix('')，但服务器没配置好html5模式，导致AngularJS在处理URL时出现了编码冲突。另外，当html5模式开启时，正确的无#访问应该是http://localhost:8080/test/rafael（需服务器配置好重写），带#的访问反而会触发异常转换。

快速测试方案（先关闭html5模式） #

如果你暂时不想折腾服务器配置，可以先关闭html5模式，用哈希路由来测试：

var app = angular.module('ByName', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix(''); // 去掉默认的!，让路由变成#/xxx格式
    // 注释掉html5模式，改用哈希路由
    // $locationProvider.html5Mode(true); 
    $routeProvider.when('/test/:yourname', {
        templateUrl : 'ByName/ByNameView.html',
        controller : 'ByNameController',
        controllerAs : 'vm'
    });
});

改完之后，访问http://localhost:8080/#/test/rafael就能正常加载路由，控制器也会被调用了。

额外要检查的小细节 #

• 确认ByNameView.html的路径正确：如果index.html在根目录，ByName文件夹也在根目录，那'ByName/ByNameView.html'是对的，别写错路径导致模板加载失败。
• 控制器的依赖注入没问题：你的ByNameController注入了$routeParams，只要ngRoute模块加载成功，这个就没问题。
• ng-view标签位置正确：你的index.html里<ng-view></ng-view>是对的，路由模板会渲染到这里，别漏了这个标签。

等服务器配置好重写规则后，再开启html5Mode(true)，同时记得在index.html的<head>里加<base href="/">，这样AngularJS能正确处理相对路径：

<head>
    <base href="/">
    <!-- 其他CSS、JS资源 -->
</head>

内容的提问来源于stack exchange，提问作者rcoelho_6