关于javascript：没有散列’＃’的AngularJS路由

AngularJS routing without the hash '#'

我在学安古拉杰，有一件事真的让我恼火。

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

1
2
3
4
5

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

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

所以我的问题是，为什么AngularJS将这个hash-#添加到URL中？有没有可能避免？

相关讨论

实际上，对于非HTML5浏览器，您需要(hashtag)。

否则，他们只会在上面提到的href处对服务器进行HTTP调用。是一个不触发请求的旧浏览器短路，它允许许多JS框架在此基础上构建自己的客户端重新路由。

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

以下是支持HTML5策略的浏览器列表：http://canius.com/feat=history

相关讨论

好的，谢谢。这是我怀疑的。但对于我来说，这是相当不友好的用户！假设我想通过url、app/res获得一些资源。我的网站用户如何才能发现他们应该改为键入app//res？
用户不必手动键入url，但如果可能，可以在站点UI中导航。
但如果是这样，为什么我需要这些路径在位置栏中可见？如果用户不使用它们，我可以制作单页的javascript应用程序。
当您想要跟踪应用程序状态时，它是有用的。这些框架提供了一个历史机制。此外，它允许通过URL共享直接访问应用程序的状态，例如
在支持HTML5历史API的现代浏览器中不需要hashtag。请参阅@skeep的答案和提供的链接。在HTML5模式下，Angular只在浏览器不支持的情况下使用hashtags。还要注意，如果您不想使用$routeProvider，则不必使用它…您可以使用ng-clicks和ng-include连接自己的路由(实际上，如果您需要多个级别的路由，则必须这样做，因为ng视图每页只能出现一次)。另请参见stackoverflow.com/questions/1279309/&hellip；
@感谢你的精确性。相应地更正答案
对于hashbang/pushstate/server-side呈现HTML的情况，twitter的一个非常适合阅读engineering.twitter.com/2012/12/&hellip；它解释了他们是如何做到的，因此它与旧浏览器和搜索引擎向后兼容。我知道这不是AngularJS特有的，但是你可以复制这个流程。
只想为任何阅读者添加，非HTML5浏览器不需要散列，可以通过输入或不输入散列来正确路由。请看下面我的答案。
@doob值得注意的是，Twitter最终不再在其URL中使用hashes-#，原因很多，包括性能。你可以在twitter.com上阅读关于提高性能的文章，也可以阅读使用#的缺点(还有一些大的缺点)，因为它是关于散列函数的。
@solid7在评论中发表你对答案的评论，不要试图编辑答案并改变其含义。
Twitter链接改为blog.twitter.com/2012/implementation-pushstate-for-twittercom
还需要在head标记中添加以避免控制台中的javascript错误。关于scotch.io的解释

如果您像其他人所说的那样启用了html5模式，并创建一个包含以下内容的.htaccess文件(根据您的需要进行调整)：

1
2
3
4
5
6

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]

当用户输入正确的路线时，他们将被引导到您的应用程序，您的应用程序将读取路线并将其带到正确的"页面"。

编辑：只需确保没有任何文件或目录名与您的路由冲突。

相关讨论

让我们写一个简单而简短的答案。

In Router at end add html5Mode(true);

1
2
3
4
5
6
7
8

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

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

$locationProvider.html5Mode(true);
})

In html head add base tag

1
2
3
4
5

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

相关讨论

尝试

1	$locationProvider.html5Mode(true)

更多信息$locationProvider公司使用$位置

相关讨论

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

很容易获得干净的URL并从URL中以角度删除hashtag。默认情况下，AngularJS将使用哈希标记路由URL例如：

http://www.example.com
http://www.example.com/关于
http://www.example.com//联系人

有两件事需要做。

正在配置$locationProvider
为相关链接设置基础
$location服务

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

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

https://docs.angularjs.org/api/ng/service/$位置

$locationProvider和HTML5Mode

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

我们将在定义角度应用时执行此操作，并且正在配置路由。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

相对链接设置

要使用相对链接在应用程序周围链接，需要在文件的中设置。这个可能在角型应用的根index.html文件。找到标签，然后将其设置为应用程序所需的根URL。

例如：。

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

旧浏览器的回退

$location服务将自动回退到hashbang不支持HTML5历史记录API的浏览器的方法。
这对您来说是透明的，您不必配置任何有用的东西。从角度$location文档中，您可以看到回退方法及其工作方式。

总之

这是一种获取漂亮URL并删除你的角度应用。让这些超级干净超级有趣快速角度应用程序！

>使用HTML5模式需要在服务器端重写URL，基本上，您必须重写到应用程序入口点(如index.html)的所有链接。在这种情况下，需要<wyn><base></wyn>标记也很重要，因为它允许angularjs区分URL中作为应用程序基的部分和应用程序应处理的路径。有关详细信息，请参阅《AngularJS开发人员指南-使用$location HTML5模式服务器端》。更新如何：将服务器配置为使用HTML5Mode1启用html5模式后，<wyn>#</wyn>字符将不再用于URL。<wyn>#</wyn>符号很有用，因为它不需要服务器端配置。如果没有<wyn>#</wyn>，URL看起来更好，但它也需要服务器端重写。以下是一些例子：Apache重写
<div class=

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>

NGIX重写

1
2
3
4
5
6
7
8
9
10
11

server {
server_name my-app;

index index.html;

root /path/to/app;

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

Azure IIS重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">

</conditions>

</rule>
</rules>
</rewrite>
</system.webServer>

快速重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

如果您想在OS X 10.8上本地配置它，并为Apache提供Angular服务，那么您可以在.htaccess文件中找到以下帮助：

1
2
3
4
5
6
7
8
9

<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如果未设置，可能会在日志中出现禁止的错误，如下所示：

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

Rewrite Base是必需的，否则请求将解析为您的服务器根目录，在本地默认情况下，该根目录不是您的项目目录，除非您已经专门配置了vhosts，所以您需要设置路径，以便请求找到您的项目根目录。例如，在我的机器上，我有一个/users/me/sites目录，我在其中保存所有项目。就像旧的OS X设置一样。

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

下一个条件是，如果请求没有以指定的文件扩展名结尾，请在其中添加所需的内容

最后一个命令是为index.html文件提供服务——你的应用程序可以处理所有其他请求。

如果仍然有问题，请检查Apache日志，它可能会给您提供有用的提示：

1	/private/var/log/apache2/error_log

相关讨论

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

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

It is recommended to use the HTML 5 style (PathLocationStrategy) as
location strategy in Angular

**因为

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

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

Use Hashlocationstrtegy only if you have to support the older
browsers.

Click here to know more

您还可以使用以下代码重定向到主页(主页)：

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

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

1
2
3

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