从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'});
}]);

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

当前回答

这个答案假设你正在使用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;
}

看看魔法。

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

2016-02-10 18:10:17

其他回答

是的，你应该配置$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);

  }]);

2013-02-08 11:17:32

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

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

2013-12-07 07:30:27

为了移除一个漂亮的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
          });
        }
    }]);

2015-01-08 09:41:11

以下两步: 1. 首先在你的应用配置文件中设置$locationProvider.html5Mode(true)。例如: 角。module('test'， ['ui.router']) .config(function($stateProvider， $urlRouterProvider， $locationProvider) {$locationProvider. html5mode (true);美元urlRouterProvider.otherwise(“/”);})；

2.第二，在主页中设置<base>。对于eg -> <基地href = " / " >

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

2016-04-14 07:28:15