我正在学习AngularJS,有一件事真的让我很恼火。

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

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

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

所以我的问题是为什么AngularJS把这个散列#添加到url ?有可能避免吗?


当前回答

**

建议使用HTML 5样式(PathLocationStrategy)作为 Angular中的位置策略

** 因为

它产生干净和SEO友好的url,更容易 便于用户理解和记忆。 您可以利用服务器端呈现,这将使 通过在服务器中呈现页面,我们的应用程序加载速度更快 首先,在将它交付给客户端之前。

只有在必须支持旧的策略时才使用hashlocationstrategy 浏览器。 点击这里了解更多

其他回答

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

在Angular中,获取干净的URL并从URL中删除标签是非常容易的。 默认情况下,AngularJS会使用标签路由url 例如:

http://www.example.com http://www.example.com/#/about http://www.example.com/#/contact

有两件事需要做。

配置locationProvider美元 为相对链接设置基础 美元的位置服务

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

我强烈建议大家通读Angular $location的官方文档,了解一下位置服务和它提供的功能。

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

$locationProvider和html5Mode

We will use the $locationProvider module and set html5Mode to true. We will do this when defining your Angular application and configuring your routes. 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 History API?它是一种使用脚本操作浏览器历史记录的标准化方法。这使得Angular可以在不刷新页面的情况下更改页面的路由和url。关于这方面的更多信息,这里有一篇不错的HTML5 History API文章:

http://diveintohtml5.info/history.html

相对链接设置

要使用相对链接来链接应用程序,您将需要 在文档的<head>中设置<base>。这可能是 找到<base>标签,然后 将它设置为应用程序的根URL。

例如:<base href="/">

还有很多其他的方式来配置它,HTML5模式 设置为true将自动解析相对链接。如果你的根 与url(例如/my-base, 然后把它作为你的基础。

旧浏览器的回退

$location服务将自动回退到hashbang 方法,用于不支持HTML5 History API的浏览器。 这对您来说是透明的,您不需要配置 只要能起作用,什么都可以。在Angular的$location文档中,你可以看到 备用方法及其工作原理。

总之

这是一个简单的方法来获得漂亮的url和删除标签 你的Angular应用。做得超级干净超级好吃吗 快速的Angular应用!

你也可以使用下面的代码重定向到主页(主页):

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

在如上所述指定重定向后,您可以重定向其他页面,例如:

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

让我们写下看起来简单而简短的答案

在路由器中添加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-详细介绍了上面的答案

**

建议使用HTML 5样式(PathLocationStrategy)作为 Angular中的位置策略

** 因为

它产生干净和SEO友好的url,更容易 便于用户理解和记忆。 您可以利用服务器端呈现,这将使 通过在服务器中呈现页面,我们的应用程序加载速度更快 首先,在将它交付给客户端之前。

只有在必须支持旧的策略时才使用hashlocationstrategy 浏览器。 点击这里了解更多

如果你像其他人说的那样启用了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]

当用户进入正确的路线时,他们将被引导到你的应用程序,你的应用程序将读取路线,并将他们带到正确的“页面”。

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