从AngularJS的url中删除片段标识符(# symbol)

是否可以从angular.js的url中移除#符号?

我仍然希望能够使用浏览器的后退按钮等，当我改变视图，将更新的URL与参数，但我不想要#符号。

教程routeProvider的声明如下:

angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);

我可以编辑这个有相同的功能没有#吗?

205021 次浏览
小开
最佳答案

是的，你应该配置$locationProvider并将html5Mode设置为true:

angular.module('phonecat', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {


$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});


$locationProvider.html5Mode(true);


}]);
小开

一定要检查浏览器对html5历史API的支持:

  if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
小开

我的解决方案是创建。htaccess和使用#索里安代码。没有.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]
小开

我在web上写了一个规则。在app.js中设置$locationProvider.html5Mode(true)后配置。

霍普，帮助别人。

  <system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>

在index.html中，我将此添加到<head>

<base href="/">

不要忘记在服务器上为iis安装url重写器。

此外，如果你使用Web Api和IIS，这个匹配url将不起作用，因为它将改变你的Api调用。因此，添加第三个输入(第三行条件)并给出一个模式，该模式将排除www.yourdomain.com/api的调用

小开
要移除漂亮的URL和代码缩小后工作的Hash标签，你需要 像下面的例子一样构建你的代码:

jobApp.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus/:id', {
templateUrl: 'views/job-detail.html',
controller: 'JobDetailController'
});


//you can include a fallback by  including .otherwise({
//redirectTo: '/jobs'
//});




//check browser support
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">


// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase


// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
小开

你可以调整html5mode，但这只适用于页面的html锚中包含的链接，以及url在浏览器地址栏中的样子。试图从页面外的任何地方请求不带标签(带或不带html5mode)的子页面将导致404错误。例如，以下CURL请求将导致一个page not found错误，与html5mode无关:

$ curl http://foo.bar/phones

虽然下面会返回根/主页:

$ curl http://foo.bar/#/phones

这样做的原因是，在请求到达服务器之前，标签之后的任何内容都会被剥离。因此，对http://foo.bar/#/portfolio的请求作为对http://foo.bar的请求到达服务器。服务器将为http://foo.bar响应一个200 OK响应(假设)，代理/客户端将处理其余的事情。

因此，如果你想与他人分享一个url，你别无选择，只能包含这个标签。

小开

如果你在。net堆栈中使用MVC和AngularJS，这是你必须做的从url中删除'#':

  1. 在_Layout页面中设置base href: <head> <base href="/"> </head>

  2. 然后，在angular应用配置中添加以下内容:$locationProvider.html5Mode(true)

  3. 上面会从url中删除“#”，但页面刷新不会工作，例如，如果你在“yoursite.com/about”页面刷新会给你一个404。这是因为MVC不知道angular路由，通过MVC模式，它会在MVC页面中寻找“about”，而这在MVC路由路径中并不存在。解决方法是将所有MVC页面请求发送到单个MVC视图，你可以通过添加捕获所有请求的路由来实现

url:

routes.MapRoute(
name: "App",
url: "{*url}",
defaults: new {
controller = "Home", action = "Index"
}
);
小开

根据文档。你可以使用:

$locationProvider.html5Mode(true).hashPrefix('!');
注意:如果你的浏览器不支持HTML 5。别担心:它有 退回到hashbang模式。所以，你不需要手动检查if(window.history && window.history.pushState){ ... }

例如:如果你点击:<a href="/other">Some URL</a>

< p > 在HTML5浏览器中: angular会自动重定向到example.com/other

< p > 在非HTML5浏览器中: angular会自动重定向到example.com/#!/other

小开

这个答案假设你正在使用nginx作为反向代理，并且你已经设置了$locationProvider。Html5mode为true。

->献给那些可能还在为上面这些酷东西而挣扎的人。

当然，@maxim grach解决方案工作得很好，但对于如何响应不希望标签被包括在第一个地方的请求的解决方案，可以做的是检查php是否发送404，然后重写url。下面是nginx的代码，

在php位置中，检测404 php错误并重定向到另一个位置，

location ~ \.php${
...
fastcgi_intercept_errors on;
error_page 404 = /redirect/$request_uri ;
}

然后重写url在重定向位置和proxy_pass数据，当然，把你的网站url在我的博客的url的地方。(请求:只有在你尝试之后才会质疑这个问题)

location /redirect {
rewrite ^/redirect/(.*) /$1;
proxy_pass http://www.techromance.com;
}

看看魔法。

这绝对有效，至少对我来说是这样。

小开

遵循两个步骤-
1. 首先在应用程序配置文件中设置locationProvider.html5Mode美元(真正的)。
For eg -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

< p > 2。第二，在你的主页中设置& lt; base> For eg ->
<base href="/"> < br > < br > < / p >

对于不支持HTML5 History API的浏览器，$location服务将自动回退到散列部分方法。

小开

第一步:将$locationProvider服务注入到应用配置的构造函数中

步骤2:将代码行$locationProvider.html5Mode(true)添加到应用配置的构造函数中。

第三步:在container (landing, master, or layout)页面中，在标签内添加诸如<base href="/">之类的html标签。

步骤4:从所有锚标记中删除所有路由配置的“#”。例如，href="#home"变成href="home";Href ="#about"变成herf="about";Href ="#contact"变成Href ="contact"

 <ul class="nav navbar-nav">
<li><a href="home">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Contact us</a></li>
</ul>
小开

只需要添加$locationProvider

.config(function ($routeProvider,$locationProvider)

然后添加$locationProvider.hashPrefix(''); 在< / p > 

.otherwise({
redirectTo: '/'
});

就是这样。

小开

从index.html开始，从<a href="#/aboutus">About Us</a>中删除所有#，因此它必须看起来像<a href="/aboutus">About Us</a>。现在在index.html的头标签中，在最后的meta标签之后写入<base href="/">。

现在在你的路由js中注入$locationProvider并写入$locatonProvider.html5Mode(true); 类似这样:-

app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/aboutus",{templateUrl:"Templates/aboutus.html"})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
$locationProvider.html5Mode(true);
});
更多细节请看这个视频 https://www.youtube.com/watch?v=XsRugDQaGOo < / p >
小开

看来现在说这个有点晚了。但是将下面的配置添加到app.module导入中就可以了:

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

提交答案