AngularJS路由没有哈希'＃'
我正在学习AngularJS，有一件事情让我非常恼火。
我使用$routeProvider为我的应用程序声明路由规则：
$routeProvider.when('/test', { controller: TestCtrl, templateUrl: 'views/test.html' }) .otherwise({ redirectTo: '/test' });
但是当我在浏览器中导航到我的应用程序时，我看到app/#/test而不是app/test 。
所以我的问题是为什么AngularJS将这个哈希#添加到url？ 有没有可能避免它？
事实上，你需要非HTML5浏览器的＃（hashtag）。
否则，他们只会在提到的href上对服务器进行HTTP调用。 ＃是一个旧的浏览器短路不会触发请求，这使得许多js框架build立自己的客户端重新路由最重要的。
如果可用，可以使用$locationProvider.html5Mode(true)来告诉angular使用HTML5策略。
这里支持HTML5策略的浏览器列表如下： http ： //caniuse.com/#feat=history
如果您像其他人所说的那样启用了html5mode，并使用以下内容创build一个.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]
当用户input正确的路线时，用户将被引导到您的应用程序，您的应用程序将读取路线并将其引导至其中的正确“页面”。
编辑：只要确保不要有任何文件或目录名称与您的路线冲突。
让我们写出看起来简单而短小的答案
在路由器中添加html5Mode（true） ;
app.config(function($routeProvider,$locationProvider) { $routeProvider.when('/home', { templateUrl:'/html/home.html' }); $locationProvider.html5Mode(true); })
在html头添加基本标记
<html> <head> <meta charset="utf-8"> <base href="/"> </head>
感谢@plus – 详细的上述答案
尝试
$locationProvider.html5Mode(true)
更多信息$ locationProvider
使用$ location
以下信息来自：
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
获取干净的URL并从Angular中的URL中移除hashtag非常容易。
默认情况下，AngularJS将路由到一个hashtag的URL例如：
有两件事情需要完成。
-
configuration$ locationProvider
-
设置我们的基地相对链接
-
$位置服务
在Angular中，$ location服务分析地址栏中的URL并对应用程序进行更改，反之亦然。
我强烈build议通过官方的Angular $位置文档阅读，以了解位置服务和它提供的内容。
https://docs.angularjs.org/api/ng/service/$location
$ locationProvider和html5Mode
- 我们将使用$ locationProvider模块并将html5Mode设置为true。
-
我们将在定义您的Angular应用程序和configuration您的路线时做到这一点。
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？ 这是使用脚本来操纵浏览器历史logging的标准方法。 这让Angular可以在不刷新页面的情况下更改页面的路由和URL。 有关这方面的更多信息，这里有一个很好的HTML5历史API文章：
http://diveintohtml5.info/history.html
设置相对链接
- 要使用相对链接链接应用程序，您需要在文档的
<head>中设置<base>。 这可能在您的Angular应用程序的根index.html文件中。 find<base>标记，并将其设置为您想要的应用的根url。
例如： <base href="/">
- 有很多其他的方式来configuration这个，HTML5模式设置为true应该会自动parsing相关链接。 如果您的应用程序的根目录不同于url（例如/ my-base），那么将其作为您的基础。
较旧的浏览器的后退
- $ location服务将自动回退到不支持HTML5 History API的浏览器的hashbang方法。
- 这种情况对你来说是透明的，你不需要configuration任何东西来工作。 从Angular $ location文档中，您可以看到后备方法以及它的工作原理。
结论是
- 这是一个简单的方法来获得漂亮的url，并删除您的Angular应用程序中的hashtag。 玩得开心使这些超级干净和超快速的angular度的应用程序！
如果你想在OS X 10.8上configurationApache，那么你可能会在.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
重写基地是必需的，否则请求将被parsing到您的服务器根目录，默认情况下本地不是您的项目目录，除非您已经专门configuration了您的虚拟主机，所以您需要设置path，以便请求find您的项目根目录。 例如在我的机器上，我有一个/ Users / me / Sites目录，我保留了所有的项目。 像旧的OS X设置。
接下来的两行有效地说，如果path不是一个目录或文件，所以你需要确保你没有文件或目录相同的应用程序pathpath。
下一个条件说明如果请求不以指定的文件扩展名结尾，那么在那里添加你需要的
[L]最后一个是说服务的index.html文件 – 您的应用程序的所有其他请求。
如果你仍然有问题，然后检查Apache日志，它可能会给你有用的提示：
/private/var/log/apache2/error_log
正如在上面的答复中提到的那样，
将<base href="/">到index.html
在app.js中启用html5mode $ location.html5Mode（true）。
有了这个应用程序将工作良好。 但是只有在您从index.html导航到其他页面的场景中。 例如我的基本页面是www.javainuse.com。 如果我点击链接Java它将正确导航到www.javainuse.com/java。
但是，如果我直接去www.javainuse.com/java将得到页面没有发现错误。
要解决这个问题，我们必须使用url重写。 Dot net需要IIS的URL重写。
如果你正在使用tomcat，那么URL重写将不得不使用Tuckey完成。 这里可以得到更多关于URL重写的信息
您也可以使用下面的代码redirect到主页面（主页）：
{ path: '', redirectTo: 'home', pathMatch: 'full'}
如上所述指定redirect之后，您可以redirect其他页面，例如：
{ path: 'add-new-registration', component: AddNewRegistrationComponent}, { path: 'view-registration', component: ViewRegistrationComponent}, { path: 'home', component: HomeComponent}
使用HTML5模式需要在服务器端重写URL，基本上你必须重写你的应用程序入口点的所有链接（例如index.html）。 需要一个<base>标签对于这种情况也很重要，因为它允许AngularJS区分作为应用程序库的url部分和应用程序应该处理的path。 有关更多信息，请参阅AngularJS开发人员指南 – 使用$ location HTML5模式服务器端 。
