没有散列'#'的AngularJS路由不能工作

时间:2021-10-17 10:28:55

I have read this post many times, and I have followed the instructions there, but I cannot get this to work.

这篇文章我已经读过很多遍了,我已经按照上面的说明做了,但是我不能让它工作。

AngularJS routing without the hash '#'

没有散列'#'的AngularJS路由

I have a Qt app that sends a request to a URL with a # in it. That URL is routed to the Angular code. I want to change this to not require the #.

我有一个Qt应用程序,它向URL发送一个带有#的请求。该URL被路由到角码。我想把这个改为不需要#。

This is my Angular code:

这是我的角码

angular.module('app').config(function($routeProvider, $locationProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'home'
        })

        // route for the workitem page
        .when('/workitem/:identifier', {
            templateUrl : 'workitem.html',
            controller  : 'workitem'
        });
        $locationProvider.html5Mode(true);

});  

This is my nginx config:

这是我的nginx配置:

server {
        listen 8000;
        server_name foo.bar.com;

        location / {
            include /usr/local/nginx/conf/mime.types;
            root /projects/larry/web;
        }
    }

In /projects/larry/web there is an index.html, which loads the JS module with the $routeProvider.

在/project /larry/web中有一个索引。html,它使用$routeProvider加载JS模块。

When I go to the URL: http://foo.bar.com:8000/#/workitem/12345 this works fine. The JS is loaded, and the $routeProvider gets the URL and does what it's supposed to do.

当我转到URL: http://foo.bar.com:8000/#/workitem/12345时,效果很好。JS被加载,$routeProvider获取URL并完成它应该做的事情。

But if I omit the # and go to http://foo.bar.com:8000/workitem/12345 then the JS code is not loaded and the request fails.

但是如果我省略了#,转到http://foo.bar.com:8000/workitem/12345,那么JS代码就不会被加载,请求就会失败。

How can I make this work without the hash?

如果没有散列,我怎么做呢?

1 个解决方案

#1


3  

You also need to add the <base href="/" /> in the <head> of your html page.

您还需要在html页面的中添加

Example below.

下面的例子。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>My Website</title>
    <base href="/" />
</head>
<body>

</body>
</html>

EDIT

编辑

This will take you to a GitHub post with the answer. https://gist.github.com/cjus/b46a243ba610661a7efb

这将带你去见GitHub的帖子,上面有答案。https://gist.github.com/cjus/b46a243ba610661a7efb

#1


3  

You also need to add the <base href="/" /> in the <head> of your html page.

您还需要在html页面的中添加

Example below.

下面的例子。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>My Website</title>
    <base href="/" />
</head>
<body>

</body>
</html>

EDIT

编辑

This will take you to a GitHub post with the answer. https://gist.github.com/cjus/b46a243ba610661a7efb

这将带你去见GitHub的帖子,上面有答案。https://gist.github.com/cjus/b46a243ba610661a7efb