Question

伙计这让我发疯，在这上面争了好几个小时，找不到解决办法！

我知道为了从URL路径清除主题标签，我需要使用

$locationProvider.html5Mode(true);

但由于某些原因，这对我来说效果不佳，我正在使用tomcat 7顺便说一句。

这些是我的HTML导入，两个AngularJS的东西都是v1.2.6：

    <script type="text/javascript" src="angular/angular.min.js"></script> 
    <!-- Angular Libraries -->
    <script type="text/javascript" src="angular/angular-route.js"></script>
    <!-- This one handles the alert notifications -->
    <script type="text/javascript" src="angular/angular-flash.min.js"></script>

    <!-- App related libraries -->
    <script type="text/javascript" src="js/services/portfolioServices.js"></script>
    <script type="text/javascript" src="js/controllers/myWorkControllers.js"></script>
    <script type="text/javascript" src="js/controllers/navController.js"></script>
    <script type="text/javascript" src="js/controllers/aboutController.js"></script>
    <script type="text/javascript" src="js/controllers/contactController.js"></script>
    <script type="text/javascript" src="js/directives/portfolioDirectives.js"></script>

然后这是我的配置

的服务javascript

portfolioApp = angular.module('portfolioApp', ['ngRoute']);

portfolioApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/mywork', {
            templateUrl: 'partials/mywork.htm',
            controller: 'myWorkController'
        })
        .when('/about', {
            templateUrl: 'partials/about.htm',
            controller: 'aboutController'
        })
        .when('/contact', {
            templateUrl: 'partials/contact.htm',
            controller: 'contactController'
        })
        .otherwise({redirectTo: '/mywork'});    
        $locationProvider.html5Mode(true);
}]);

每个控制器只定义，没有什么特别的，注入$ scope的名称和函数。什么都没有。

基本上，不使用html5Mode的URL是

http://localhost:8080/template/#/

我想成为：

http://localhost:8080/mywork
http://localhost:8080/about
http://localhost:8080/contact

现在，我可以让它工作......通过访问http://localhost:8080/template它会被重定向到上面的那些网址...但是当我用Ctrl + F5刷新页面时，我从Tomcat找到404 Not Found ！：S怎么来的？路径不应该通过角度来解决？

请问我在这里做错了什么？我真的生气哈哈

顺便说一句，万一你想知道我的项目目录是什么，这里有一个screeshot：

http://puu.sh/5UI0Z.png

这是我当前的web.xml

<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>Portfolio Application</display-name>

    <!-- Auto scan rest service -->
    <context-param>
        <param-name>resteasy.scan</param-name>
        <param-value>true</param-value>
    </context-param>

    <context-param>
        <param-name>resteasy.servlet.mapping.prefix</param-name>
        <param-value>/rest</param-value>
    </context-param>

    <listener>
        <listener-class>
            org.jboss.resteasy.plugins.server.servlet.ResteasyBootstrap</listener-class>
    </listener>


    <servlet>
        <servlet-name>resteasy-servlet</servlet-name>
        <servlet-class>
            org.jboss.resteasy.plugins.server.servlet.HttpServletDispatcher</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>resteasy-servlet</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>

</web-app>

提前致谢。

Answer 1

当你点击F5时，你没有使用角度指令或与角度有关的任何东西。您只需告诉浏览器向当前位于地址栏中的URL发送新请求，并使用从服务器返回的内容刷新页面。因此，如果当前位置为http://localhost:8080/mywork，则会向http://localhost:8080/mywork发送请求，如果服务器没有配置处理此URL的任何内容，您将获得404.

现在，如果您将服务器配置为在命中URL /mywork时返回主角度HTML页面，则浏览器将显示此HTML页面并执行其包含的JavaScript。角度路由器将检测到该位置是/ mywork，因此它将加载与该位置关联的部分和控制器，并显示相应的模板。

旧的基于hashbang的路由不需要后端的任何配置，因为URL总是相同的。只有hashbang之后的部分（服务器未知）才会发生变化。

Answer 2

我还没有尝试过，但据我所知，您必须确保您的服务器只返回这些不存在的URL的初始HTML页面。然后，当页面重新加载时，将触发onload事件，您可以通过history.state访问最后一个状态。我猜角度会自动恢复状态，所以你不必担心这个。

Answer 3

我通过在web.xml中添加

来解决此问题

手动刷新目标页面时，会将404页面重定向到主页面。然后角度路由器将生效以将其路由到目标页面。

路由和清理路径（没有＃标签）在angularJS中不起作用

3 个答案: