是否可以从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'});
}]);
我可以编辑这个有相同的功能没有#吗?
你可以调整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,你别无选择,只能包含这个标签。
我在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的调用
你可以调整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,你别无选择,只能包含这个标签。
为了移除一个漂亮的URL的散列标签,也为了让你的代码在缩小后工作,你需要
像下面的例子一样构建你的代码:
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
});
}
}]);
这个答案假设你正在使用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;
}
看看魔法。
这绝对有效,至少对我来说是这样。
从index.html开始删除<a href="#/aboutus">About Us</a>中的所有#,因此它必须看起来像<a href="/aboutus">About Us</a>。现在在index.html的头标签中,在最后一个元标签之后写入<base href="/">。
现在在你的路由js中注入$locationProvider并写入$locationProvider . 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