更新

Question

我正在学习AngularJS，有一件事让我很烦恼。

我使用$routeProvider为我的应用程序声明路由规则：

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

但是当我在浏览器中导航到我的应用时，我会看到app/#/test而不是app/test。

所以我的问题是为什么AngularJS将此哈希#添加到网址？有没有可能避免它？

Answer 1

事实上，非HTML5浏览器需要＃（＃标签）。

否则他们只会在上述href对服务器进行HTTP调用。＃是一个旧的浏览器短路，它不会触发请求，这允许许多js框架在其上构建自己的客户端重新路由。

如果可用，您可以使用$locationProvider.html5Mode(true)告诉角度使用HTML5策略。

此处支持HTML5策略的浏览器列表：http://caniuse.com/#feat=history

Answer 2

如果您启用了其他人说过的html5mode，并创建一个包含以下内容的.htaccess文件（根据您的需要进行调整）：

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

用户在进入正确的路线时会被定向到您的应用，您的应用会阅读路线并将其带到其中的正确“页面”。

编辑：请确保不要让任何文件或目录名与您的路线冲突。

Answer 3

让我们写出简单明了的答案

在路由器结束时添加 html5Mode（true）;

$icons = array(
    "&#xE84D;" => "3d rotation",
    "&#xE84E;" => "accessibility",
    etc. etc.
);

在html head中添加 base 标记

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

感谢 @plus - 详细说明上述答案

Answer 4

尝试

$locationProvider.html5Mode(true)

更多信息 $locationProvider
Using $location

Answer 5

以下信息来自： https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

很容易获得干净的URL并从Angular中的URL中删除＃标签默认情况下，AngularJS将使用主题标签路由URL 例如：

有两件事需要做。

配置$ locationProvider
设置相关链接的基础
$ location Service

在Angular中，$ location服务解析地址栏中的URL并对您的应用程序进行更改，反之亦然。

我强烈建议您阅读官方Angular $位置文档，以了解位置服务及其提供的内容。

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider和html5Mode

我们将使用$ locationProvider模块并将html5Mode设置为true。

我们将在定义Angular应用程序时执行此操作配置您的路线。

angular.module('noHash', [])

.config(function($routeProvider, $locationProvider) {

   $routeProvider
       .when('/', {
           templateUrl : 'partials/home.html',
           controller : mainController
       })
       .when('/about', {
           templateUrl : 'partials/about.html',
           controller : mainController
       })
       .when('/contact', {
           templateUrl : 'partials/contact.html',
           controller : mainController
       });

   // use the HTML5 History API
   $locationProvider.html5Mode(true); });

什么是HTML5历史记录API？它是使用脚本操作浏览器历史记录的标准方法。这使Angular可以更改页面的路由和URL，而无需刷新页面。有关这方面的更多信息，这里有一个很好的HTML5历史API文章：

http://diveintohtml5.info/history.html

设置相关链接

要使用相关链接链接您的应用程序，您需要在文档的<base>中设置<head>。这可能是在 Angular应用程序的root index.html文件。找到<base>标记，然后将其设置为您希望应用的根网址。

例如：<base href="/">

还有很多其他方法可以配置它，以及HTML5模式设置为true应自动解析相对链接。如果你的根你的应用程序与url不同（例如/ my-base，然后用它作为你的基础。

旧浏览器的后备

$ location服务将自动回退到hashbang 不支持HTML5 History API的浏览器的方法。
这对您来说是透明的，您无需进行配置什么工作。从Angular $位置文档中，您可以看到回退方法及其工作原理。

结论

这是获取漂亮网址并删除主题标签的简单方法你的Angular应用程序。玩得那么超级干净和超级快速Angular应用程序！

Answer 6

如果您想在OS X 10.8上本地配置为Angular与Apache配置，那么您可能会在.htaccess文件中找到以下内容：

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

选项+ FollowSymlinks如果没有设置可能会在日志中给你一个禁止的错误，如下所示：

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

需要重写基础，否则请求将被解析到您的服务器根目录，默认情况下本地不是您的项目目录，除非您专门配置了您的虚拟主机，因此您需要设置路径以便请求找到您的项目根目录。例如，在我的机器上，我有一个/ Users / me / Sites目录，我保留了所有项目。就像旧的OS X设置一样。

接下来的两行有效地说明路径不是目录或文件，因此您需要确保没有与应用路径路径相同的文件或目录。

下一个条件是如果请求没有以指定的文件扩展名结尾，那么添加你需要的内容

[L]最后一个是说要提供index.html文件 - 所有其他请求的应用。

如果您仍有问题，请查看apache日志，它可能会为您提供有用的提示：

/private/var/log/apache2/error_log

Answer 7

使用HTML5模式需要在服务器端重写URL，基本上您必须重写所有指向应用程序入口点的链接（例如index.html）。需要<base>标记对于这种情况也很重要，因为它允许AngularJS区分作为应用程序库的url部分和应用程序应该处理的路径。有关详细信息，请参阅AngularJS Developer Guide - Using $location HTML5 mode Server Side。

更新

如何：配置服务器以使用html5Mode ¹

启用html5Mode后，您的网址中将不再使用#字符。 #符号很有用，因为它不需要服务器端配置。没有#，网址看起来更好，但它也需要服务器端重写。以下是一些例子：

Apache重写

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx重写

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS重写

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Express重写

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

Answer 8

在Angular 6中，您可以通过路由器使用：

RouterModule.forRoot(routes, { useHash: false })

Answer 9

您也可以使用以下代码重定向到主页面（主页）：

{ path: '', redirectTo: 'home', pathMatch: 'full'}

如上所述指定重定向后，您可以重定向其他页面，例如：

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

Answer 10

**

建议使用HTML 5样式（PathLocationStrategy）作为 Angular的位置策略

** 的因为

它生成更容易的干净和SEO友好的URL 用户要理解并记住。

您可以利用服务器端渲染通过在服务器中呈现页面，我们的应用程序加载速度更快首先在交付客户之前。


仅在您必须支持旧版时才使用Hashlocationstrtegy   浏览器。

Click here to know more

没有散列'＃'的AngularJS路由

10 个答案:

让我们写出简单明了的答案

更新

如何：配置服务器以使用html5Mode ¹

Apache重写

Nginx重写

Azure IIS重写

Express重写

没有散​​列'＃'的AngularJS路由

10 个答案:

让我们写出简单明了的答案

更新

如何：配置服务器以使用html5Mode 1

Apache重写

Nginx重写

Azure IIS重写

Express重写

没有散列'＃'的AngularJS路由

如何：配置服务器以使用html5Mode ¹