路由和干净的路径（不包括hashtag）在angularJS不工作 [英] routing and clean path (no hashtag) not working in angularJS

问题描述

家伙这是推动我疯了，一直争取在这个时间，并不能找到一个解决办法！

Guys this is driving me crazy, been fighting for hours on this, and couldn't find a solution!

我知道，为了从URL路径清理这个标签，我需要使用

I know that in order to clean the hashtag from the URL path, i need to use the

$ locationProvider.html5Mode（真）;

但出于某种原因，这不是我的工作很好，我现在使用Tomcat 7顺便说一句运行此。

But for some reason this is not working well for me, I'm using tomcat 7 btw to run this.

这是我的HTML进口，无论是AngularJS的东西是V1.2.6：

These are my HTML imports, both AngularJS stuff are 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服务与配置

Then this is my Service javascript with the config

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);
}]);

这些控制器中的每一个仅限定，没有什么特别的，名称和注入$范围的功能。没有在其中。

Each of those controllers is only defined, nothing special, the name and the function injecting the $scope. Nothing in them.

基本上，在不使用html5Mode URL是

Basically, the URL without using the html5Mode is

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

我想是：

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

现在，我可以使它工作......通过访问到的http：//本地主机：8080 /模板它会重定向到URL者的上述...但是当我刷新页面Ctrl + F5键，我得到一个404从Tomcat未找到！ ：S怎么来的？该路径不应角度来解决？

Now, i could make it work... by accessing to http://localhost:8080/template it gets redirected to those url's above... but when i refresh the page with Ctrl+F5, i get a 404 Not Found from Tomcat! :S how come?? the path shouldn't be solved by angular?

请我在做什么错在这里？我真的惹毛了HAHAH

Please what am I doing wrong in here? I'm really getting mad hahah

顺便说一下，以防万一你想知道我的项目目录是如何，下面是它的一个screeshot：

Btw, just in case you want to know how my project directory is, here's a screeshot of it:

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

这是我当前的web.xml

This is my current 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>

先谢谢了。

推荐答案

。您只需告诉浏览器发送到目前在地址栏中的URL一个新的请求，并与随之而来从服务器返回刷新页面。因此，如果当前位置是的http：//本地主机：8080 / MYWORK ，请求将被发送到的http：//本地主机：8080 / MYWORK ，如果服务器没有有什么配置，以处理这个URL，你会得到一个404

When you hit F5, you're not using an angular directive or anything angular-related. You simply tell the browser to send a new request to the URL that is currently in the address bar, and to refresh the page with what comes back from the server. So if the current location is http://localhost:8080/mywork, a request will be sent to http://localhost:8080/mywork, and if the server doesn't have anything configured to handle this URL, you'll get a 404.

现在，如果将服务器配置为返回主角HTML页面时，网址 / MYWORK 被击中，那么浏览器就会显示此HTML页面和执行JavaScript它包含。角路由器将检测的位置是/ MYWORK，因此它会加载部分和与该位置相关联的控制器，以及显示适当的模板

Now, if you configure the server to return the main angular HTML page when the URL /mywork is hit, then the browser will display this HTML page and execute the JavaScript it contains. The angular router will detect that the location is /mywork, and it will thus load the partial and the controller associated with this location, and display the appropriate template.

，因为该URL是始终不变的旧的，基于hashbang的路由不需要后端的任何配置。只有hashbang（由服务器未知）之后的部分，修改

The old, hashbang-based routing doesn't need any configuration of the backend because the URL is always the same. Only the part after the hashbang (unknown by the server), changes.

这篇关于路由和干净的路径（不包括hashtag）在angularJS不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！